[node.js-express]노드익스프레스 홈페이지 만들기 1

노드 익스프레스(Node.js Express)는 Node.js를 기반으로 한 웹 애플리케이션 프레임워크로, 서버 측 애플리케이션과 API를 쉽게 구축할 수 있도록 도와줍니다. 익스프레스는 경량화된 구조로 되어 있어, 필요한 기능을 추가하여 유연하게 조정할 수 있는 장점이 있습니다.

 

노드js는 자바스크립트와 언어구조가 거의 유사합니다. 유튜브에서는 노드js를 백엔드용 자바스크립트라고들 하더라구요.

 

역시 범용성 하나는 자바스크립트가 짱인것 같습니다.

 

저희의 최종목표는 봉사활동홈페이지를 만드는것입니다. 

종합개발환경은 Visual 코드로 선정하겠습니다.(무료니까요 ㅎ)

 

visual코드와 node.js는설치하기 쉬우니 (워낙 설명이 많기도하고)여기서 생략하고  express 설치하는법부터 설명하겠습니다,

 

그래도 cmd에 노드버전 확인은 꼭 해봅시다!

명령어

node -v

npm -v

 

Visual코드를 실행시켜서 C드라이브에 작업폴더를 만들어줍니다.

전 nulpln 폴더를 만들고 그안에 homepage라는 폴더를 만들었습니다.

명령프롬프트로 homepage폴더까지 접근해야합니다.

저같은 경우는 명령어가 cd nulpln/homepage가 되겠네요.

 

폴더접근후 이곳에 express를 설치해줍시다.

저는 최초 한번만 설치하려고 하니 pc전역에 설치하도록하겠습니다.

npm i –g express-generator

 

네 express설치완료되고 Visual코드에서 cmd창키세요

express my-node-app —view=ejs 요 명령어 입력합니다.

볼드체로 되어있는곳은 사용자임의로 앱 이름을 결정합니다. 전 my-hompage-app이렇게썼어요. 이름 fadfsd이렇게 아무렇게나 지으셔도됩니다.

커맨드에 설치가 완료되었단 문구가 뜨면 Visual코드 좌측에

요런 폴더들(프레임워크)이 생성됩니다.

각 폴더들의 의미는 포스팅을 해가며 설명하겠습니다.(빨리 알고싶다면 GPT돌리세요.)

 

이제 개발 딱기다려!!! 

ㄴㄴ 아뇨! 

 package.json파일을 확인하면 dependencies라는 객체가 보입니다. 그 안에있는것들을 또 설치해야해요?

아니 저걸 다요? 어느새월에?

 

CMd 키고 경로 my-homepage-app 들어가서 npm i쳐주세요 알아서 다 설치해줍니다.

 

그리고 nodemon이란걸 설치해줍시다. 노드몬은 또 몬가요? 웹페이지가 잘 실행됐는지 보려면 localhost에 띄우는걸 중지하고 코드를 수정하고 다시 시작하고 이짓거리를 반복해야하는데 하기 싫어서 설치해주는 응용프로그램입니다.

cmd에 nodemon i 입력하면 알아서 설치해주고

bin폴더에 www파일을 살짝만져주면 됩니다.

원래는

"start" : "node ./bin/www" 이걸 noemon으로만 수정해주면됩니다.(사진처럼)

여기까지가 항상 디폴트로 설정해주고

커맨드창에(경로는 항상 node-이름-app 상태로) npm start해주시면

커맨드창에 저런게뜨면 성공입니다.

인터넷창에 localhost:3000 입력하시고 아래사진이 뜨면 드디어 준비완료입니다.