1. 개발 환경
Last updated
Last updated
자바스크립트의 실행환경 (JavaScript Runtime) 자바스크립트를 브라우저 없이 독립적으로 실행 가능 (한계가 사라짐) 👉 PC 프로그램, 웹 서버 개발 가능
대부분의 개발자가 Node.js를 기반으로 사용하는데, 세팅하기 까다롭고 어려움
🚀 왜 어려운가? → 고정적이고 오래가는 도구가 있는 것이 아니라 계속 바뀌기 때문 전체적인 흐름을 파악하고 앞으로의 변경에 대응할 수 있는 능력을 키우는 것이 중요
Node.js 개발자가 새로 시작한 프로젝트
훨씬 간단하지만, 사용하는 곳이 별로 없음
기술의 최전선, 도전적인 느낌
최신 버전인지 확인 node -v
⇒ 23.03.06 현재 기준 18.14.2 LTS
무조건 최신 버전을 고집할 필요는 없음
nvm보다 빠름
모듈 시스템 : 모듈을 내보내고, 불러와서 사용하는 기능 제공
import, export
브라우저가 지원
Node.js가 기본적으로 제공하는 모듈 시스템
require, exports 등의 내장함수
그 외 모듈 시스템 : ES Modules
CLI로 열거나 직접 열어서 폴더를 가져오거나 상관 없음
npm (Node Package Manager) Node.js의 패키지 관리 도구
node_modules npm i 명령어로 설치한 모듈과 라이브러리가
node_modules
폴더에 생성npx 로컬 또는 원격 npm 패키지에서 명령 실행
npm run
node_modules
폴더의.bin
안에 실행할 수 있는 것들이 담겨있음 (Ex. eslint, tsc 등)./node_modules/.bin/tsc
=npx tsc
-D로 devdependencies 설치한 경우 npx로 실행할 수 있음
-y : npm init에 무조건 yes로 대답한다는 옵션
name: 소문자-이름
형태
version: 시맨틱 버전(Semantic Versioning)
scripts: 실행할 수 있는 명령어, 직접 커스텀 가능
.gitignore
파일을 작성⚠️ 최소한 node_modules
를 통째로 커밋하는 일을 미연에 방지할 것
node를 검색하면 맞춤으로 생성
언어별 선택 가능
기본 설치 시 : dependencies로 추가, 프로그램에서 직접 사용하는 것
i : install
-D : devdependencies로 추가하는 옵션, 개발 환경에서만 사용(도구로서 사용됨)
--save-dev 옵션과 동일
npx : 실행하려는 명령을 수행
tsc : 타입스크립트 컴파일러
--init : 초기화
tsconfig.json
파일의 jsx 속성을 변경"jsx"의 주석을 해제하고, "jsx": "react-jsx"로 설정 변경
.eslintrc.js
파일을 적절히 수정.eslintrc.js에서 .js
는 생략 가능하며, 없을 시 json 형식
아직 Jest를 설치하지 않았지만, 여기서 미리 env에 jest: true
를 잡아주면 좋음
extends에 'plugin:react/jsx-runtime',
추가
.eslintignore
파일을 작성eslint를 적용시키지 않을 파일을 추가 gitignore를 복사해서 .eslintignore에 넣어줘도 됨
@types : 실제 배포될 때 사용되는 것이 아니라, 개발 환경에서 도구처럼 쓰이기 때문에 -D로 devdependencies에 추가
swc 혹은 테스팅 라이브러리 쓰는 방법이 바뀌면 설치 명령이 조율될 수 있음
jest와 swc를 같이 사용하는 것이 핵심
jest.config.js
파일을 생성해 테스트에서 SWC를 사용transform : 타입스크립트 코드는 그냥 실행할 수 없기 때문에 자바스크립트로 변환을 해야 함
웹 애플리케이션 bundler parcel을 이용해 웹서버, dev server 등을 띄울 수 있음
package.json
파일의 scripts를 적절히 수정build: dist 폴더 생성
check: 컴파일 체크
coverage: jest --coverage --coverage-reporters html,
watch:test: jest --watchAll
⚠️
"source": "index.html",
를 추가해야 웹 서버가 실행됨 node의 경우"main": "index.js"
으로 되어있음
index.html
src/main.tsx
src/App.tsx
src/App.test.tsx
src/components/Greeting.test.tsx
src/components/Greeting.tsx
번들러를 사용해 하나의 파일을 만들 때 사용 ()
package.json
npm의 package.json 처리 세부 사항
프로젝트에서 사용하는 외부 패키지 디펜던시를 관리
패키지를 사용하려면 패키지의 이름과 버전
한 쌍이 필수로 들어가야 함
package-lock.json
패키지의 정확한 버전 정보를 추적
중간에 디펜던시가 업데이트 되더라도 동일한 버전의 패키지
를 생성할 수 있도록 함
💡 장점 : 같은 팀의 동료들이 모두 동일한 패키지 버전으로 협업할 수 있음