sugar.kim

리액트 개발에 필요한 도구들 설명 본문

DEV/React

리액트 개발에 필요한 도구들 설명

김슈가 2024. 11. 12. 12:39
728x90
반응형

<<Do it 리액트 프로그래밍 정석>>으로 리액트 기본 다지기 하는중... 회사에서도 프런트 개발할 때 사용하기는 했지만 아직 개념이 많이 부족하니 해당 책을 중점으로 개념 정리와 올바른 사용법을 익혀보려 한다. 

  • 노드제이에스 : 구글에서 공개한 소프트 웨어로 V8 엔진을 기반으로 만든 자바스크립트 런타임 도구  ( 웹 브라우저가 아닌 컴퓨터 혹은 서버에서 자바스크립트를 실행할 수 있게 해준다. 
  • NVM(Node Version Manager) 노드 버전 매니저 : 노드 제이에스 버전을 관리해주는 프로그램 (노드 제이에스 설치 진행) 
  • npm(node package manager) 노드 패키지 매니저 : 자바스크립트 라이브러리를 관리해주는 프로그램, 노드 제이에스와 함께 설치된다. ( 동작 방식은 https://www.npmjs.com에서 사용할 라이브러리를 내려받아 설치하고 관리해주는 프로그램. npm은 node_modules 폴더에 라이브러리를 내려받아 저장하고 package.json이라는 파일에 설치된 라이브러리의 정보를 적어 저장한다. 이렇게 하는 이유는 node_modules에 저장되는 라이브러리 용량이 너무 크기 때문에 다 가져다 쓰지 않고 사용할 라이브러리만 package.json에 따로 명세하여 가져다 쓰면 되기 때문이다. 
  • yarn : 페이스북에서 npm의 단점을 보완한 (성능, 속도 개선) 라이브러리 관리 도구 (npm 명령어를 통해 설치 가능) 
  • 웹팩 : 프로젝트에 사용된 파일을 분석하여 기존 웹문서 파일로 변환하는 도구 . 기존 웹문서 파일(.css,.js,.jpg)을 프레임워크에서 사용하지 않을 경우 웹브라우저가 해석을 못하므로 중간에서 웹팩이 해석해준다. (웹브라우저는 .hbs, .cjs, .sass 등의 파일을 해석 못하는데 웹팩이 중간에서 분석해서 .js , .css 등의 파일로 변환해준다.) 또한 js, png, jpg등과 같은 파일을 적절한 크기로 자르거나 묶어주는 역할도 한다. 이는 안쓰는 파일을 제외하고, 압축해서 프로젝트의 용량을 줄여준다. 또한 간단한 노드 기반의 웹서버를 구동하기도 한다. 등등... 많음.  

 

728x90
반응형
Comments