본문 바로가기
_TIL

20240723. TIL

by SILTEA 2024. 7. 24.

 

 

React를 배우는 첫날!
(실습 중간중간 명령어가 잘 먹히지 않거나 오류가 즐비했지만 도장 깨기 마냥 해결해 나가니 재미있었다)

React는 뭐야? Node.js는 뭐야? nvm은 뭐야?라는 질문에 막힘없이 술술 답변할 수 있도록
오늘은 복습하는 시간!

 

 

1강 Node.js

브라우저 3대장

  • Node.js를 알기 전 먼저, 우리가 JavaScript를 별도의 설치 없이 사용할 수 있었던 이유 :
  • ➡️ 브라우저에 JavaScript가 내장되어 있어 브라우저를 사용한다면 설치 없이 사용이 가능하다.
  • ➡️ 다르게 말한다면 브라우저 없이는 JavaScript를 사용할 수 없다.

= node.js란?

  • 등장배경 : JavaScaript를 브라우저 바깥에서 사용하기 위해 Node.js가 만들어지게 되었다
  • 장점 : JavaScript는 브라우저에서만 사용이 가능했기 때문에, 기존의 서버는 파이썬, 자바 등의 언어로 프로그래밍되어 프런트앤드와 백앤드 간의 기술이 통합되지 않았지만, node.js가 사용가능해짐에 따라 자바스크립트로 브라우저뿐만 아니라 서버까지 프로그래밍이 가능하게 되었다. 그 결과로, 프런트앤드와 백앤드 간의 기술이 통합되어 협업의 능률이 올라갔고 개발 주기가 단축되었다.

 

터미널에서 VSC 실행
VOD의 터미널에서는 code . 로 vsc를 손쉽게 열었는데
나는 열리지 않아서 또다시 구글링...
(다른 실습 때에도 같은 상황이 몇 번 있어서 그냥 vsc를 따로 실행시키곤 했는데,
번거로울 것 같아서 해결방법을 찾아보기로 했다)

 

 

1. (mac기준) command + shift + P를 눌러 아래와 같이 명령 팔레트를 실행시킨다

 

2. Shell을 입력하면 자동으로 Shell Command: Install 'code' command in PATH 명령어가 검색이 되고

해당 명령어를 실행하면 아래와 같이 설치가 완료되었다는 창이 뜬다.

 

3. 다 되었다. 그럼 터미널에서  code .  을 입력해 VSC가 잘 실행되는지 테스트해 보자!

 

 

2강 NVM (Node Version Manager)

= NVM?

  • Node.js의 여러버전을 손쉽게 관리할 수 있도록 해주는 도구
  • 프로젝트를 진행하면 개발자들이 서로 다른 Node.js를 사용하고 개발하게 되는 일이 많다. 이러한 협업의 과정에서 생기는 충돌문제를 NVM을 통해서 Node.js의 다양한 버전을 쉽게 설치, 제거할 수 있게 하여 충돌 문제를 최소화하게 된다.
  • 장점
    1. 프로젝트별로 Node.js 버전 관리 가능
    2. 기존 프로젝트에 영향 없이 새로운 버전 사용 가능
    3. 팀원들과의 개발 환경 통일 용이
  • 명령어
    • nvm —version : 현재 설치되어 있는 nvm의 버전 확인
    • nvm ls-remote : nvm을 통해 설치할 수 있는 node.js의 버전 확인가능
    • ➡️ LTS : 가장 안정적인 버전
    • nvm install (버전 이름) : (버전 이름)을 설치
    • nvm ls : nvm에 설치되어 있는 Node.js의 버전 리스트 확인
    • nvm use (버전 이름) : 현재 사용할 (버전 이름)으로 node.js의 버전을 변경
    • node -v : node.js의 버전 확인
    • node : 터미널에서 JS를 사용가능하게 함

 

 

MODULE_NOT_FOUND 오류를 해결해 보자!
nvm을 설치하는데 까지는 문제가 없었으나 현재 설치된 node.js의 버전을 계속 확인하려 하니
MODULE_NOT_FOUND라 계속 떠서
열심히 구글링을 했지만 오류코드 자체가 너무 광범위 한지라 뭐가 문제인지 몰랐는데,
우연히 찾은 글에 버전의 default값을 설정해줘야 한다는 글을 읽고는
코드를 실행시켜 보았다. 그랬더니 node ls가 정상작동! 
자 그럼, 다시 실습!

 

 

 

 

MODULE_NOT_FOUND 'MODULE 그게 먼데?'

 

  • nvm 디폴트 설정 명령어 : nvm alias default (버전이름)

 

 

VSC로 node.js를 실행시켜하는데
mac 터미널에서 마주쳤던 그분을 다시 마주쳤다..
mac 터미널과 VSC는 별개라..
다시 또 구글링..
폴더이름 및 파일명에 특수문자가 들어가면 안 된다, 한글이 들어가면 안된다 등등
여러 가지 해결책을 보고 사용해 보았지만..
MODULE_NOT_FOUND님.. 저한테 억하심정 있으세요..?ㅠㅠ

 

MODULE_NOT_FOUND "저한테 왜그러시는 건데요.."

 

MODULE_NOT_FOUND 오류시 check list

  • 파일명, 폴더명, 디렉터리 접근 경로에 특수문자 / 한글이 쓰여있지 않은지 체크
  • 파일이 위치하고 있는 디렉터리에서 node 파일명.js 를 실행시켰는지 체크 (필자가 실행했던 방법)

 

 

3강 npm (Node Package Manager)

= npm?

  • JavaScript 패키지의 설치, 배포, 관리를 도와주는 도구
    • JavaScript패키지 : 재사용 가능한 JS 코드 묶음
    • npm에 배포된 패키지는 package.json 파일로 정보를 표시
  • package.json
    • 패키지의 배포 및 패키지를 사용하기 위한 매뉴얼(안내서) 
    • 개발자가 배포한 패키지에 대해, 다른 사람들이 설치하고 관리하기 쉽게 하기 위한 문서
    • npm에 패키지를 배포하고 업로드하기 위해서 반드시 필요한 문서 파일
  • 명령어
    • npm init -y : 프로젝트 초기화 & package.json 파일 생성
    • npm install (패키지이름) / npm i (패키지 이름) : 패키지 설치
    • npm uninstall (패키지이름) : 패키지 삭제
    • npm ls : 패키지 목록 확인

 

  • 각 필드의 역할

  • name : 배포한 패키지의 이름
  • version :  배포한 패키지의 버전 (메이저.마이너.패치)
  • main : 배포한 패키지의 메인이 되는 파일
  • type : 모듈의 타입 (기본 : Common JS)

  • scripts : 터미널로 노드를 실행시킬 명령어의 정의
  • keywords : npm에 패키지를 검색할 때의 패키지 연관 검색어
  • author : 패키지를 만든 사람 (보통 제작자 이름과 이메일을 작성)
  • license : 패키지의 권한과 제한 사항 (쉽게 말해 저작권 개념)
    • ISC : ISC 라이선스는 Internet Systems Consortium(ISC)에 허용된 free Software license로, ISC에서 개발한 OpenBSD베이스로 개발된 소프트웨어 릴리즈를 위해서 사용되는 라이선스
    • MIT : MIT 라이선스(MIT License)는 미국 매사추세츠 공과대학교(MIT)에서 해당 대학의 소프트웨어 공학도들을 돕기 위해 개발한 라이선스다. MIT 라이선스를 따르는 소프트웨어를 개조한 제품을 반드시 오픈 소스로 배포해야 한다는 규정이 없으며 GNU 일반 공중 라이선스의 엄격함을 피하려는 사용자들에게 인기가 있다. 이 라이선스를 따르는 대표적 소프트웨어로 X 윈도 시스템이 있다.
    • ➡️ ISC, MIT 모두 누구든지 자유롭게 패키지를 사용할 수 있는 라이선스지만 MIT는 출처표시 필요
  • description : 배포한 패키지의 설명
  • dependencies : 현재의 패키지가 다운로드하여 사용하고 있는 패키지의 이름과 버전(요약)
 

 

참고 자료

 

 

'_TIL' 카테고리의 다른 글

20240806. TIL  (1) 2024.08.07
20240805. TIL  (0) 2024.08.06
20240724. TIL  (1) 2024.07.25
20240722. TIL  (5) 2024.07.23
20240719. TIL  (2) 2024.07.20

관련글

티스토리툴바