Zoom 클론 코딩하기 전 알아둬야할 것 정리

노마드 코더 Zoom 클론 코딩 전 사전 준비로 미리 알아본 것 정리한 것 입니다.

심화적인 내용보다는 아주 간단히 기초적인 부분만 정리 했습니다. 자세한 내용은 참고한 링크를 클릭하시면 자세히 보실 수 있습니다.

강의 들을 때 더 필요한 부분이 있으면 추가할 예정입니다.

1. Express

웹 및 모바일 애플리케이션을 위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레임워크

 

⚙ 사용 방법

이미 Node.js를 설치했다고 가정 애플리케이션을 보관할 디렉토리를 만들고 작업 디렉토리로 만들기

 

npm init

 

대화형 프로세스를 거치지 않고 빈 npm 프로젝트 생성 -y 는 yes를 나타냄. 👇

npm init -y

npm init을 통해 package.json 생성

애플리케이션 이름 및 버전과 같은 여러 항목을 묻는 메세지를 표시하는데 그냥 엔터를 누르면 된다.

entry point: (index.js)

👆이 부분에서는 index.js를 입력하거나 app.js 등 원하는 기본 파일 이름을 입력. 기본적으로는 index.js로 되어있는 듯 함.

 

이제 내가 지정한 파일에 Express를 설치한다.

종속성 목록에 저장👇

$ npm install express

종속성 목록에 추가 x👇

$ npm install express --no-save

https://expressjs.com/en/starter/hello-world.html

https://how-can-i.tistory.com/76

2. Pug

Haml의 영향을 크게 받은 고성능 템플릿 엔진으로 Node.js 및 브라우저 용 JavaScript로 구현되어있음.

$ npm install pug

이렇게 설치👆

 

📌 퍼그의 렌더링 프로세스는 단순함.

📌 pug.compile()은 퍼그 소스 코드를 자바스크립트 함수로 컴파일 하여 데이터 객체를 인수로 취함.

📌 결과 함수를 데이터로 호출하면 데이터와 함께 렌더링 된 HTML 문자열을 반환.

📌 컴파일 된 함수는 다시 사용할 수 있으며 다른 데이터 집합으로 호출할 수 있음.

https://pugjs.org/api/getting-started.html

3. app.get()

Express의 라우팅 하위 개념으로 보인다.

라우팅 : 애플리케이션 엔드 포인트(URL) 정의, URI가 클라이언트 요청에 응답하는 방식.

 

app.get(path, callback [, callback ...])

지정된 콜백 함수를 사용하여 지정된 경로로 HTTP GET 요청을 라우팅 한다.

 

*path

📌 경로를 나타내는 문자열

📌 경로 패턴

📌 경로를 일치시키는 정규식 패턴

📌 위의 모든 조합의 배열

 

*callback의 기능

📌 미들웨어 기능

📌 일련의 미들웨어 기능 (쉼표로 구분)

📌 미들웨어 기능의 배열

 

https://expressjs.com/ko/guide/routing.html

https://expressjs.com/ko/4x/api.html#app.get

4. (req, res) =>

📌 req 객체는 HTTP 요청을 나타내며 요청 쿼리 문자열, 매개변수, 본문, HTTP 헤더 등에 대한 속성을 가지고 있습니다 .

📌 res 개체는 Express 앱이 HTTP 요청을 받을 때 보내는 HTTP 응답을 나타냅니다.

https://www.tutorialspoint.com/nodejs/nodejs_response_object.htm

https://www.tutorialspoint.com/nodejs/nodejs_request_object.htm

5. package.json 

https://docs.npmjs.com/cli/v9/configuring-npm/package-json(공식)

https://programmingsummaries.tistory.com/385(번역)

[NodeJS] 모두 알지만 모두 모르는 package.json

6. babel

자바스크립트 컴파일러.

바벨은 주로 ECMA 스크립트 2015+ 코드를 이전 버전의 자바스크립트로 변환하는 데 사용되는 도구.

https://babeljs.io/docs/en/

7. nodemon

디렉터리에서 파일 변경이 감지될 때 노드 응용 프로그램을 자동으로 다시 시작하여 Node.js 기반 응용 프로그램 개발하는데 도움을 주는 도구.

nodemon을 사용하려면 스크립트를 실행할 때 command line의 단어 노드를 바꾼다.

 

⚙설치

npm install -g nodemon # or using yarn: yarn global add nodemon

시스템 경로에서 전역적으로 설치되는 nodemon은 없다.

nodemon을 개발 종속성으로 설치할 수도 있음.

npm install --save-dev nodemon # or using yarn: yarn add nodemon -D

 

https://www.npmjs.com/package/nodemon

 

📍틀린 부분이 있다면 말해주세요!