[Node.js] Node.js로 웹사이트 구축하고 꾸미기

Node.js로 웹사이트 구축하고 꾸미기

앞서 튜토리얼을 따라 Node.js를 이용해 모듈과 패키지를 꾸리고 서버를 구성해 웹페이지를 띄우는 것까지 진행했습니다.

[Node.js] Node.js로 웹서버 구축하기

이어서 웹페이지를 꾸미고 발전시키는 튜토리얼을 진행해봤습니다.

먼저 npm을 통해 dotenv라는 패키지를 설치했습니다. dotenv는 환경변수를 관리해주는 라이브러리라고 합니다.

포트번호 등 보안에 문제가 될 수 있는 코드를 변수로 처리해 일괄적으로 관리하기 위해 dotenv를 설치했습니다.

index.js 파일에 dotenv를 inport하고 .env파일을 생성해 환경변수를 설정하겠습니다.

env파일에 설정해놓은 환경변수 'PORT'를 상수에 할당하고 이전 포트번호가 있던 곳에 끼워넣었습니다.

그리고 다시 npm run dev 명령어를 이용해 서버를 구동하자 잘 구동되고 있습니다.

튜토리얼로 돌아와 주소창에 localhost:4000을 입력했더니 접속할 수가 없었습니다.

금방 이유를 찾았는데 dotenv.config 뒤에 소괄호를 붙이지 않아서였습니다.

config 뒤에 소괄호가 빠졌습니다.

 

서버구동을 멈추고 웹페이지 공용 자산을 관리하기 위해 public이라는 폴더를 새로 생성했습니다.

public 폴더에 css파일을 만들고 테스트용 간단한 속성도 추가했습니다.

HTML파일로 들어가 해당 css 파일을 import 하고 웹페이지를 새로고침 해보니 글자색이 변경되어있었습니다.

 

본격적으로 css를 꾸미기 시작했습니다. 

css를 꾸밀 때 빼놓을 수 없는 요소가 선택자인데, id는"#", class는 "."으로 표시하는게 jQuery와 비슷하다고 느꼈었는데. 알고보니 css 선택 규칙이 여러 곳에서 통용된것이었습니다.

코드안에 처음 보는 css 속성이 가득합니다. 따로 시간을 내어 공부를 할 필요가 있어보입니다.

완성된 코드입니다.

pug를 이용한 HTML 문서는 굉장히 세련되고 깔끔해보입니다. 앞으로 꾸준히 익히면서 내 것으로 만들어야겠습니다.

완성된 웹페이지입니다.

 

마치며

지금까지의 튜토리얼을 다시 정리해보겠습니다. (틀린 부분이 있다면 지적해주세요.)

1. 로컬에 Node.js를 설치하고 npm을 이용해 express와 babel 등 라이브러리를 설치했습니다.
2. 메인 스크립트 파일을 생성해 서버를 구동시켜주는 express를 선언하고 호출해 서버를 구동했습니다.
3. 서버가 구동되는 동안 스크립트나 코드의 변경사항이 있을 경우 자동으로 재기동/적용 될 수 있도록 babel을 설정했습니다.
4. pug를 이용해 HTML 문서를 작성해 서버에서 구동시켜보았습니다.
5. 보안과 코딩의 효율성을 위해 dotenv를 통해 환경변수를 설정했습니다.
6. 공용자원을 관리하는 public폴더를 생성하고 css 파일을 작성해 페이지에 스타일을 적용했습니다.

서비스 전체를 보는 거시적 감각과 코드 세밀한 곳까지 놓치지 않는 세심함까지, 개발자가 갖춰야 할 시각의 범위는 정말 넓은 것 같습니다.

꾸준함과 배우는 자세 등 다른 기본 소양은 말할 것도 없죠.

 

이틀동안 짧은 튜토리얼을 보면서 Node.js를 이용해 웹페이지를 구성하는 방법을 진행했습니다.

오늘 만든 인프라는 앞으로 HTML이나 CSS 튜토리얼을 할 때 사용할 예정입니다.

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂