Backend Session -1

SSO·2022년 5월 7일
0

LikeLion10th

목록 보기
11/16

짜-잔 백엔드 세션에 처음 참여한 날.
실습하다가 멘탈이 나갈뻔 한 날...

아직 돌아오지 않은 멘탈을 블로그를 정리하며 돌이켜보려고 합니다:)

사전 설치
- node.js
- postman
- yarn
- git

내용을 시작하기 전에 그림으로 간단하게 이해해봅시다!

이렇게만 봐도 대략 이해가 되는 거 같죠?-?
위 그림에는 DB는 나와있지 않은데 좀 더 풀어서 설명해보자면 클라이언트는 서버에게
데이터나 정보를 요청하면 서버는 이러한 요청에 대해 응답을 해준다!

1. 클라이언트 : 서버야 데이터 줘!
2. 서버 : 알겠어 기다려./DB야 데이터 줘!
3. DB : 자 여기 !
4. 서버 : 고마워 / 클라이언트야 여깄어!

이런 느낌이랄까? 서버가 중간 매개체 역할을 해준다고 생각하면 이해가 된다.

Node ?

자 위에서 사전 설치 요소 중에 하나였던 node.js에 대해서 알아보자 !
한 줄로 정의를 말해주자면

Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임.

이렇게만 읽으면 뭔 말인지 모르겠다..
저 문장을 뜯어서 해석해보자.

  • 결론적으로 js 런타임
  • 이 말은 js 실행기라는 뜻
    => 즉 직접적인 !서버!는 아니지만 서버 역할을 수행하는 도구!라고 생각하자.

그럼 이러한 Node가 뭐가 좋을까?
-> js기반이기 때문에 하나의 언어로 웹 사이트를 개발할 수 있기 때문에 생산성이 높다.

모듈 / 패키지 / 라이브러리 / 프레임워크

웹 공부 지금까지 한 나로써 이정도는 구분할 능력이 있다ㅎㅎ
그래도 공부한 내용이니 한 번 더 정리해 보자면
라이브러리 - 프레임워크 - 패키지 - 모듈순으로 라이브러리가 가장 큰 단위라고 보면 된다.

  • 모듈 : 함수들의 집합
  • 패키지 : 모듈을 모아놓은 폴더, 코드의 집합
  • 프레임워크 : 기능이 구현된 패키지
  • 라이브러리 : 패키지들의 집합

하나 새롭게 추가로 알게된 사실이 있는데 라이브러리와 프레임워크의 차이점에 대해서
제대로 알게 되었다.

라이브러리 vs 프레임워크

라이브러리 : 내 코드에 남의 코드 넣기
프레임워크 : 남의 코드에 내 코드 넣기

+more 프레임워크

더 자세한 설명을 덧붙이자면

  • 반복적으로 수행되는 일들을 처리할 때 더 적은 코드 지식으로 더 많은 일을 안전하게 처리 할 수 있도록 해주는 기능이자 도구.
  • 프레임워크가 미리 구현해놓은 기능을 우리는 그걸 가져가서 거기에 우리 코드를 넣어 사용만 하면 된다.
  • 예시를 들면 대표적으로 react가 있다!

Package Manager

npm

  • node package manager
  • 패키지 매니징 = 패키지 설치, 버전 관리 가능 !
  • 외부 라이브러리가 필요하면 우리는 이런 라이브러리를 우리 프로젝트 안에 설치하고 import를 해서 사용하게 된다. 이러한 라이브러리 패키지들을 관리할 수 있게 해주는 게 npm

npx

  • 원하는 라이브러리를 실행할수 있게 도와주는 것
  • npm이 설치, 업데이트면 npx는 실행

nvm

  • node version manager
  • 협업 시, 여러 프로젝트를 동시에 진행할 시 다양한 라이브러리, 프레임워크, 개발툴의 버전 호환 문제를 해결할 수 있게 해준다.
    + 다양한 버전의 node.js를 설치할수 있게 해준다
    • 디폴트 버전 설정, 설치한 버전들의 전체 리스트 확인, 필요없는 버전 삭제 등등

💻 이전에 노드 버전과 관련하여 오류가 난 적이 있었는데 이와 관련하여 에러가 났을 때 다양한 방법을 시도해도 안될 경우 버전 문제일 경우가 몇 번 있었다. 이런 경우 nvm을 사용하여 노드 버전을 여러 가지를 설치하고 필요한 프로젝트에 따라서 노드 버전을 다양하게 사용할 수 있어 편리했던 기억이 있다 :)

yarn

  • 페이스북에서 만든 패키지 매니저
  • npm과의 차이로는 npm보다 더 빠르고 효율적인 캐시 시스템 (+알파)

package.json

개인적인 생각으로 백엔드를 공부하든 프론트를 공부하든 이 파일에 대해서는 알고 있어야한다! 라고 생각하는 파일이다.

그래서 이 파일이 무엇이냐!
- 설치한 패키지의 버전 관리를 위한 버전 기록용파일.
- 현재 프로젝트에 대한 정보, 사용중인 패키지들의 정보(버전)을 기록한 파일
- 같은 패키지라도 버전별로 차이가 있기 떄문에 버전 기록이 필요.
- 노드 프로젝트를 시작하기 전에 폴더를 생성한 후 무조건!! package.json을 만들고 시작해야 한다 : yarn init

dependencies, devDependencies

패키지들을 설치하면 package.json에 dependencies에 기록이 된다.
하지만 설치할 떄 yarn add -D 패키지명이렇게 설치하면 devDependencies에 기록된다.

이 두 가지의 차이점이 무엇일까?
: devDependencies는 쉽게 말해 개발용패키지이다. 따라서 실제 배포 시에는 사용되지 않고 개발 중에만 사용되는 패키지이다. ex) prettier, nodemon, eslint 등
이와 다르게 dependencies는 프로그램이 배포되서, 실행하는 데에 실제로 꼭 필요한 패키지들이다. ex) express

scripts

package.json을 보면 script태그를 볼 수 있다.
이 태그 내에는 실행할 명령어를 넣으면 파일이나 프로젝트를 실행할 수 있다.
이 태그의 장점은 그냥 nodemon index.js이런 식의 짧은 코드는 괜찮지만 실행 코드가 복잡하고 길어진다면 스크립트 태그 내에 "dev" : "어쩌구"이런 식으로 넣으면 yarn dev 와 같은 기능을 한다!

Nodemon

: node monitor, 개발 편리성을 높여주는 모듈로 코드가 수정되거나 그러면 서버를 껐다가 다시 킬 필요 없이 자동으로 재시작해주는 모듈이다!

Babel

: 단순히 말해 Babel은 고차원의 js를 저차원의 js로 변환해준다!

  1. 설치 : yarn add -D @babel/core @babel/node @babel/preset-env
  2. 최상단 경로에 .babelrc 파일 생성

Express

: 노드 위에서 동작하는 프레임워크

  • 미들웨어
  • Node.js를 위한 빠르고 가장 많이 사용되는 개방적인 간결한 웹 프레임워크

이후에 배운 미들웨어와 라우터에 대한 내용은 더 학습한 후 다음에 정리 예정입니다:)

profile
Github_qkrthdus605

0개의 댓글