Torch for new way

지난 글을 마무리 했을 때의 js는 다음과 같은 상태였다. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.use(express.urlencoded({extended:true})) const list = require('./boardData') const data = [...list.data] // list.data라는건 가져온 객체 list 안의 data (배열) // main app.get('/', (req, res)..

오늘은 지금까지 배운 nodejs의 내용을 이용해 간단한 글 작성, 수정, 삭제 기능을 가진 게시판 웹 사이트를 만들어보자. 메인 페이지, 글의 리스트 페이지, 글 쓰기, 삭제, 수정 순으로 기능을 구현해볼 것이다. 1. Set up express와 nunjucks를 먼저 설치하고 다음과 같이 js를 작성한다. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.use(express.urlencoded({extended:tr..

지난 글을 마지막까지 수행했다면 현재 js의 코드는 다음과 같다. const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.listen(3000, () => { console.log('서버 구동') }) app.use('/', (req, res) => { let i = 1000; let j = 2000; res.render('index.html', { num:i, }) }) app.use('/ab', (req, res) => { res.send(' hello..

1. nunjucks의 설치와 세팅 지난 번에 이어서 html을 쉽게 가져오기 위해 템플릿 엔진을 사용하는 방법을 알아보자. nunjucks도 express와 마찬가지로 패키지이므로 설치 방식도 동일하게 npm을 사용하면 된다. 터미널에 다음과 같이 입력하면 자동으로 nunjucks가 설치된다. npm install nunjucks package.json에서 문제 없이 설치가 끝났는지를 확인할 수 있다. 이제 이를 사용하기 위해 js 문서에도 코드를 몇 줄 추가해주어야 한다. const nunjucks = require('nunjucks') 외부 객체인 nunjucks를 현재 js로 가져온다. app.set('view engine', 'html') nunjucks를 사용하기 위한 express의 세팅이다..

1. module, 데이터 전달 1.1. module 이제 express까지 설치한 상태인데, 이 express는 무엇이며, 왜 필요한가? 우선 module에 대해 알 필요가 있다. js파일안에 들어갈 정보가 커지면 이 js파일을 여러 개로 나눠야 할 때가 있다. 이때 각 파일을 module이라고 한다. 특히 다른 라이브러리를 사용할 때, (여기서는 express) 이 module의 개념이 적용된다고 보면 된다. 물론 각자 다른 파일이므로 다른 파일에 있는 데이터를 주고받고 싶을 땐 특수한 명령어가 필요하다. 현재 우리는 express를 설치한 상태인데, 잘 설치되었는지를 확인하려면 package.json 파일을 열면 설치된 package의 목록을 객체 형태로 볼 수 있다. 여기서 express가 있다면..

지난 번에 이어서 본격적으로 nodeJS를 설치해보자. 1. Node.js 인스톨 우선 wsl에서 cd ~ 를 입력해 홈 디렉토리로 간다. node라고 입력을 하면 아직 설치가 되어있지 않다고 뜰 것이다. 이제 apt package manger를 이용해, nodeJS를 다운로드 해준다. sudo apt install nodejs 를 입력하면 자동으로 다운로드를 받아 설치할 수 있다. 2. Node.js 업데이트 Node.js는 주기적으로 업데이트 되는데, 컴퓨터에 있는 Node.js를 업데이트하려면 nvm을 사용하는 방법이 추천된다. 2.1 nvm 설치 우선 nvm을 설치해보자. curl -o- http://raw.githubusercontent.com/creationix/nvm/v0.33.11/inst..

NodeJS는 서버 등 다양한 응용 프로그램을 돌리는데 사용되는 JS 실행기이다. NodeJS를 설치하고 셋업 하는 방법에 대해 알아보자. 1. CLI vs GUI 우리 주로 사용하는 윈도우는 GUI (Graphical User Interface)로, 인터페이스를 그래픽으로 알기 쉽게 표현해주는 인터페이스를 의미한다. 반대로 CLI는 Command Line Interface의 줄임말로, 컴퓨터에게 텍스트로 명령어를 치면 결과를 텍스트로 돌려주는 것을 의미한다. 서버컴퓨터는 대부분 리눅스를 사용하는데, 리눅스는 GUI가 대부분 GUI가 지원되지 않고 CLI를 사용하기 때문에 우리도 CLI를 배울 필요가 있다. 2. Windows Terminal 우선 리눅스를 설치하기 전에, 윈도우에서 터미널을 열고 간단한..

이제 HTML을 꾸미는 도구인 CSS를 사용하는 법을 알아보자. 이번 장에서는 CSS의 문법과 그걸 어떻게 html 파일이 인식하도록 연결하는 지에 대해 알아보자. CSS는 별도의 파일로 존재하므로 폴더의 조직을 신경쓰면서 해보자. // hello-css.html Hello, CSS CSS는 우리가 html element들을 스타일링 할 수 있도록 해준다. 다른 예시도 준비되어 있다. List Styles 꾸며줄 리스트들 disc circle square 숫자를 붙여줄 리스트들 demical lower-roman upper-roman lower-alpha upper-alpha 기타 등등 여기에 추가로 복수의 웹 페이지 집합에서 CSS가 어떻게 작동하는지 알아보기 위해 간단한 html 문서를 하나 더 만들..

link나 image는 하나의 웹 페이지에서 벗어나 외부 리소스를 가져온다는 점에서 차이를 보인다. link는 한 페이지에서 다른 페이지로 사용자를 이동시켜주며, image는 다른 리소스를 페이지 내부로 가져온다. 이 둘을 사용하기 위해서는 attribute라는 다른 html syntax가 필요하다. 이번에는 몇 개의 html문서와 이미지 파일을 포함한 하나의 웹 사이트를 만들어볼 것이다. 본질은 복수의 파일과 폴더의 조직화에 있다는 것을 잊지 않게 주의하면서 시작해보자. 2.1. Naming Conventions 지금까지 만든 폴더나 파일은 이름에 white space가 하나도 없다. 앞으로도 거의 없을 것이다. 이를 추가하려면 추가적인 처리가 필요해 보통은 이름에 띄어쓰기가 들어가지 않도록 한다. 2..

몇 개의 챕터로 이루어진 HTML, CSS의 초보적인 튜토리얼이다. 웹 페이지를 만든다고 생각하고 공부해보자. 1.1. HTML, CSS, Javascript HyperText Markup Language (HTML), Cascading Style Sheets(CSS), JavaScript는 web을 동작시키는 언어다. 서로가 매우 밀접한 연관이 있지만 각각 특정 목적을 위해 디자인 되어있다. 1. HTML은 정제되지 않은 내용을 마킹해 뜻을 더한다. 2. CSS는 마킹된 내용물을 formatting한다. 3. Javascript는 내용물과 formatting을 상호작용하게 한다. HTML은 웹 페이지 무대 뒤의 텍스트나 이미지, CSS는 실제로 보여지는 페이지, JS는 그 둘을 조작하는 툴이라고 일단은..