React 재활훈련- 1일차, Nodejs 사용하기

놀고 싶은데, 왜 다들 공부하는거야·2024년 5월 24일
Reactnodejs
0

react

목록 보기
1/11

react를 처음 배웠던 건 2019년이었다. 대학교 2학년 시절 판교 스타트업 인턴 채용에 지원했다가, react로 프로젝트를 하나 만들어오라는 채용 절차가 있었다. 이전까지 vanila js나 jquery만 써봤다가, 처음으로 react를 써봤었는데 상당히 쉽고 재밌었다.

시원하게 탈락을 맛보고, react를 계속해서 공부해서 hooks, redux, redux-saga, nextjs까지 쭉 2학년 때 전부 공부했던 걸로 기억난다. 그렇게 대학생활까지 재밌게 잘 썼었지만, 막상 취업하고나서는 쓸 일이 없어서 한동안 놓고있었더니 많이 변해있었던 것 같다.

그래서 재활훈련 겸으로 react를 한 번 다시 처음부터 공부해봤다. 대학생 때는 react강의가 없어서, docs나 요상한 인도인(?) 친구 강의만 봤었는데 요즘에는 상당히 많아졌다. 그래서 그런지 선택하기가 더 어려워졌는데, 커리큘럼만 보고 괜찮은 강의는 이 강의가 가장 괜찮아보였다.

https://www.udemy.com/course/react-next-master/

물론 가격은 좀 있어서, 회사의 도움을 받았다!

Nodejs 사용하기

nodejs에서 project단위는 package라고 한다. 

쇼핑몰 project --> package
웹 포털 project -> package

이 package를 처음에 설정하는 명령어가 npm init이다.

npm init

누르면 package name, version, description, entrypoint 등등이 나오면서 Is this OK?가 나온다. 마지막으로 yes를 해주면 package.json이 만들어지고, 우리가 입력한 정보들이 나열된다.

  • package.json
{
  "name": "lecture1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

index.js 파일을 만들고 다음의 code를 넣어주도록 하자.

  • index.js
console.log("Hello Node js");

실행시키는 방법은 node를 사용하면 된다.

node index.js

Nodejs module

기능별로 code를 나누어 관리하는 것이 module이다.

유저 관리 기능 --> user.js --> user 모듈
장바구니 기능 --> cart.js --> cart 모듈
결제 기능 --> payment.js --> payment 모듈

전체 program의 일부로 재사용성이 가능한 것을 module이라고 한다. js에서는 하나의 js파일이 하나의 module이라고 생각하면 된다.

이러한 module을 만들고, load하고 사용할 수 있도록 해주는 시스템이 바로 module system이다. js에서는 두 가지가 있다.

  1. Common js 모듈 시스템(CJS)
  2. ES 모듈 시스템(ESM)

이들은 환경이 nodejs서버인지, 브라우저인지에 따라 달라질 수 있다.

Common JS 모듈 시스템

common js는 예전의 module system으로 nodejs에서 주로 사용한다.

math.js 모듈의 함수들을 가져와서 index.js에서 사용해보도록 하자.

이때, math.js 모듈에서 함수를 외부로 노출시키기 위해서는 다음과 같이 nodejs에서 제공하는 module객체를 사용하면 된다.

  • math.js
function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

module.exports = {
    add, sub
}

module의 exports property를 사용하여 외부로 노출할 함수들의 이름을 적어주면 된다. 해당 module을 받아 사용하는 부분은 require를 사용하면 된다.

  • index.js
const moduleData = require('./math')

console.log(moduleData.add(1,2)) // 3
console.log(moduleData.sub(1,2)) // -1

math.js 모듈을 가져와 사용하는 것을 볼 수 있다. require를 사용하면 math.js의 module.exports를 가져오는 것과 동일하다. 때문에 다음과 같이 구조분해 할당도 가능하다.

  • index.js
const {add, sub} = require('./math')

console.log(add(1,2)) // 3
console.log(sub(1,2)) // -1

ES module system

브라우저에서 사용하는 최신 모듈 시스템이 바로 es module system이다. nodejs에서는 이를 사용하기위해서 package.json을 약간 수정해야한다.

  • package.json
{
    ...
  "type": "module"
}

"type": "module"만을 추가하면 common js module system에서 es module system으로 변경된다. 따라서, 우리가 위에서 만든 code들은 동작하지 않는다.

먼저 math.js module에서 외부로 함수를 내보낼 때는 export keyword를 사용하면 된다.

  • math.js
function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

export {
    add, sub
}

이전보다 훨씬 직관적이다.

다음으로, 이를 불러오는 곳에서는 import를 사용하면 된다.

  • index.js
import {add , sub} from './math.js'

console.log(add(1,2)) // 3
console.log(sub(1,2)) // -1

단, es module system에서는 확장자를 꼭 써주어야 한다. require를 쓰는 common js의 경우는 확장자를 써주지 않아도 동작한다.

몇가지 테크닉들이 있는데, 다음도 가능하다.

  • math.js
export function add(a, b) {
    return a + b;
}

export function sub(a, b) {
    return a - b;
}

위에서의 code와 동일하다.

또한, default export가 가능한데, 이는 단 하나만 내보낼 수 있도록 하는 것으로 구조 분해 할당을 쓰지 않아도 된다.

  • math.js
export function add(a, b) {
    return a + b;
}

export function sub(a, b) {
    return a - b;
}

export default function multiply(a, b) {
    return a * b;
}

다음과 같이 export default로 math.js 모듈에서 어떤 함수를 default로 내보낼 지, 지정할 수 있다.

  • index.js
import multiply ,{add , sub} from './math.js'

console.log(add(1,2)) // 3
console.log(sub(1,2)) // -1 
console.log(multiply(1,2)) // 2

그럼 받아오는 쪽에서 다음과 같이 구조 분해 할당을 쓰지 않고 그대로 가져올 수 있는 장점이 있다. 단, export default의 대상은 반드시 하나여야 한다.

Library

프로그램을 개발 할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해놓은 것들이다.

npm을 통해서 library package들을 설치할 수 있다. https://www.npmjs.com/

npm을 통해서 library package를 설치하는 방법은 다음과 같다. 먼저 randomcolor라는 package를 설치해보도록 하자.

npm i randomcolor

이제 package.json으로 가면 dependencies에 library가 설치된 것을 볼 수 있다.

{
  "name": "lecture1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "randomcolor": "^0.6.2"
  }
}

그리고 node_modules라는 directory가 생겼을 텐데, 여기에 우리가 설치한 randomcolor library code가 생긴다.

마지막으로 pakcage-lock.json도 생겼는데, 여기서는 실제 설치된 정확한 version이 있고 정합성을 검증하기 위한 정보들이 있다.

사용하는 방법은 매우 간단한데, import를 사용하면 된다.

  • index.js
import randonColor from "randomcolor"

여기서 from을 잘보면 ./이 없는 것을 볼 수 있다. 이는 경로가 없다는 의미인데, 경로가 없다면 node_modules에서 찾겠다는 것이다. 즉, library를 사용하겠다는 것이다.

이제 실행해보도록 하자.

  • index.js
import randomColor from "randomcolor"

const color = randomColor()
console.log(color) // #92efc2

매번 실행마다 console.log에 찍히는 결과가 달라질 것이다.

nodejs package system에서 중요한 점은 package.json이 해당 project에 설치된 package의 정보들을 전부 들고 있다는 것이다. 때문에 node_modules가 삭제되어도 package.json만 있다면 언제든 다시 설치가 가능하다. 먼저 node_modules를 삭제해보도록 하자.

rm -rf ./node_modules

package.json을 사용하여 module들을 다시 설치해보도록 하자.

npm install

다시 node_modules가 생기는 것을 볼 수 있다. 이는 package.json의 정보를 바탕으로 새로 library package들을 다시 설치한 것이다.

profile
놀고 싶은데, 왜 다들 공부하는거야
R3의 망령
다음 포스트

React 재활훈련- 2일차, React 소개

0개의 댓글