위코드 3주차... 기반없이 다져온 개념들이 헷갈리기 시작했다. 그런 의미에서 정리를 해보려한다!
.gif)
📍 모듈
- 분리돼서 독립적으로 동작하는 소스코드, 한 기능을 빼낸 느낌.
- 모듈화한다: 큰 덩어리의 코드를 작게 분리해서 의존성을 제거해 독립적으로 움직일 수 있도록 하는 것.
📍 패키지
- 하나의 돌아갈 수 있는 프로그램(
브라우저도 프로그램, 리액트도 ui를 그려주는 프로그램... 너도 나도 프로그램!) - 이 안에는 라이브러리와 프레임워크가 포함되어 있다.
- https://www.npmjs.com/ 에서 찾을 수 있는 모든 것이 패키지라고 한다.
- 패키지에 속해있는 라이브러리와 프레임 워크의 구분은 제어 흐름에 대한 주도성이 누구에게, 어디에 있는가에 따라 구분할 수 있다. 즉 어플리케이션의 플로우를 누가 쥐고 있느냐에 달려있다.
✔️ 라이브러리
- 예: SASS, React, jQuery
- 라이브러리는 단순히 활용가능한 도구들의 집합을 뜻한다.
- 사용자가 전체적인 흐름을 만들며 그 과정에서 라이브러리를 가져다 쓴다. 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있다.
- 예에서 든 SASS와 React처럼 한번에 여러 라이브러리를 불러와 자유롭게 사용할 수 있다!
✔️ 프레임워크
- 예: 앵귤러
- 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜넣는다. 프레임워크는 가져다 쓰기보다는 그곳에 들어가서 사용한다는 느낌!
📍 React를 사용하기 위한 개발환경 세팅
✔️ Node.js 설치
- Node.js란 웹에서만 작동하는 자바스크립트가 웹 밖에서도 작동할 수 있도록 만들어진 또 다른 JS 실행환경이다.
- 쉽게 말해서 자바스크립트를 사랑하는 전세계 덕후들이 이 언어로 웹말고 다른 프로그램도 짜고 싶다고 졸라서(???) 만든 환경!
- 리액트 어플리케이션은 웹 브라우저에서 실행되는 코드라서 사실은 상관이 없지만, 프로젝트를 개발하는데 필요한 주요 도구들(웹팩, 바벨 등)이 node.js 기반이기때문에 반드시 설치해야함!
- 노드를 깔면 npm이 자동으로 설치되는데, 이는 노드 기반의 패키지를 사용하기 위한 패키지 도구이므로 이 또한 반드시 설치해야한다.
✔️ CRA(Create-React-App) 설치
- 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(toolchain)
- 라이브러리인 리액트는 깔끔하게 UI만 제공해준다. 프레임워크와 다르게 즉 초기 세팅부터 시작해서 온갖 것들을 개발자가 구축해줘야 하는데, 이를 매번 개발자가 혼자 하기에 힘이 드니, 하나의 명령어로 리액트 개발환경을 구축할 수 있도록 만든 것!
- CRA에는 바벨과 웹팩과 같은 리액트 어플리케이션 실행에 필요한 다양한 패키지를 비롯해 테스트시스템, ES6+문법과 같은 필수적인 개발환경도 구축해준다.
