본문 바로가기

카테고리 없음

Node js 기본 정리하기(feat. 조코딩)

https://www.youtube.com/watch?v=Tt_tKhhhJqY

이 게시물은 조코딩 유튜버의 영상을 참고해 제작되었습니다!

 

 

1. Node.js 는 무엇인가?

 

 

Node.js는 JavaScript 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경이에요. 필수 프론트엔드 언어인 javascript로 백엔드까지 작성해줄 수 있기 때문에 효율성이 높고 엄청난 장점을 가진 언어라고 할 수 있어요. 출시 이후 빠르게 점유율을 높이고 있어 배우면 개발자로서 경쟁력을 키울 수 있을 거예요.

 

 

2. Node js 를 사용하는 이유는?



먼저, Node.js는 JavaScript를 이용하여 서버 측 애플리케이션을 구축할 수 있게 해줘요.

이는 프론트엔드와 백엔드 개발 간의 언어 일관성을 유지할 수 있어 효율적이고 협업하기 쉬워져요.

또한, Node.js는 비동기식 이벤트 기반 아키텍처를 사용하여 높은 처리량과 확장성을 제공해요.

이것은 여러 요청에 대한 응답을 효율적으로 처리할 수 있게 도와주죠.

게다가, Node.js는 네트워크 애플리케이션에 적합한 강력한 런타임 환경을 제공하며, 다양한 패키지와 모듈을 사용할 수 있어 개발 생산성을 높여줘요. 

 

 

 

3. Node js 설치하기

 

 

https://nodejs.org/en/download

 

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

안전하게 하기 위해서는 LTS 버전을 설치해주시면 돼요

 

 

4. Node.js 기초 따라잡기

 

1) vscode에 index.js를 만들어준다.

-Hello World 출력

console 에 아래와 같이 실행해줍니다.

node index.js

 

 

2) figlet 모듈 사용해보기

node.js는 모듈이 정말 잘 되어있어요. 그중에 figlet이라는 모듈을 사용해서 글짜를 console에 예쁘게 출력해볼게요!

 

figlet 설치 가이드

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

 

figlet

Creates ASCII Art from text. A full implementation of the FIGfont spec.. Latest version: 1.7.0, last published: 6 months ago. Start using figlet in your project by running `npm i figlet`. There are 10201 other projects in the npm registry using figlet.

www.npmjs.com

npm 사이트인데 원하는 모듈을 입력해서 가이드대로 따랗면 쉽게 이를 설치하고 활용할 수 있어요

 

먼저 설치 전 입력해 줄 명령어가 있어요.

npm init

 

이 명령어를 입력해주면 아래와 같이 package.json이 생겨요.

설치된 모듈이 입력됨

 

보통은 exe 파일을 클릭해서 설치하겠지만 node의 경우 간단히 터미널에서 'npm install 모듈이름' 으로 해주면 돼요.

npm install figlet

 

 

아래와 같이 옵션을 적용해도 되지만 현재는 필요하지 않아요.

npm install figlet --save(굳이 save 입력 안 해도 됨) -g(내 컴퓨터 전체에 적용됨)

 

매뉴얼에 따라 아래와 같이 index.js 파일에 적용해볼 수 있어요.

 

3) figlet 삭제하기

npm uninstall figlet

 

 

 

4) express 연결해보기

 

이번에는 npm 사이트에서 express 코드를 찾아서 실행해봅니다.

 

브라우저 주소창에 http://localhost:3000 해주면 Hello World!!가 찍힌 것을 확인할 수 있어요.

여기서 localhost는 내 컴퓨터랍니다. localhost 대신에 내 컴퓨터의 IP 주소를 입력해도 똑같이 동작해요.

서버 주소를 입력해도 마찬가지구요.

 

코드를 찬찬히 뜯어보면,

express 기능을 가져오겠다는 뜻이고

 

get의 HTTP( 요청의 목적과 종류를 알리는 수단 )메소드로 들어올 경우 해당 라우팅에서 콜백함수를 실행해주겠다는 의미예요.

라우팅은 localhost 뒤에 붙는 주소를 뜻합니다.

콜백함수는 함수를 실행한 뒤에 실행할 코드를 { } 안에 적는 것인데요, 

이 코드의 경우 app.get을 한 후에 Hello World를 찍겠다는 거겠죠.

 

req 와 res는 각각 request와 reponse를 나타내는데 request는 말그대로 요청하는 정보, response는 응답받는 정보예요.

res.send('Hello world! ')는 응답부에 Hello world를 실어보내겠다는 얘기겠죠?

 

마지막으로 listen을 통해 서버를 시작하고 해당 포트를 통해 클라이언트가 접속할 수 있도록하는 명령어예요.

위에서 localhost는 주소라고 했는데, 이게 집이라면 port는 "문"이라고 생각하시면 돼요. 

다른 비유로는 ip가 ARS 번호이면 port는 내선번호와 같은 개념이라고 할 수도 있어요.

 

 

 

 

코드에서 중요한 것!!

 

 

포트마다 다른 프로그램 사용 가능

 

localhost: 내 컴퓨터

GET메소드로 들어온거는 욜로 와라!, /: 

콜백함수: 함수(끝나고 실행할 함수), 변수 대신

함수 실행 순서 정할때

REQ = 요청에 대한 정보가 다 들어가 잇음

RES = 응답에 대한 정보를 다 가지고 있음

 

HTTP 메소드, 요청의 목적과 종류를 알리는 수단

 

get - 주소창

pOST - 주소창 X, 내부적으로 BODY