[React TIL] Node.js & Why React?

220331

• node.js 설치
• vscode 유용한 extension 설치
• node.js 기초 섹션 강의 수강
• react.js 기초 섹션 강의 수강

외부 모듈 export in JS

// example
module.exports = {
    moduleName : "calc module",
    add : add,
    sub : sub,
}; 

npm

node package manager = node.js의 패키지 도구 , 관리 용이

package

• 로그인 모듈, 문자인증 모듈 등

package.json

우리가 만들 패키지의 정보를 기록하는 환경설정 파일
이름,버전,정보,설정 등
main : 진입 파일
ㄴcripts : 자주 실행할 명령어를 사전에 정의
key만 입력해도 value의 명령어 자동 실행됨

npmjs

다른사람의 모듈을 쓰고 싶을때 사용
노트 js의 쇼핑몰
오픈소스 형태로 제공됨
npmjs에서 특정 모듈을 설치하게 되면

• package.json의 dependencies 부분이 생김
  -> 설치한 모듈의 랜덤 버전(몇 이상)이 적혀있음
• random_modules 폴더가 생김
  -> 폴더 내에 내가 설치한 모듈의 실제 코드가 저장되어있음.(=외부 패키지 보관소)
• package-lock.json 파일이 생김
  -> 내가 설치한 모듈의 정확한 버전이 나와있음

리액트 사용 이유

1. 중복 코드 작성

한 개의 문제가 수많은 코드를 수정해야하는 상황 -> 유지보수에 문제가 있음 (산탄총 수술)
헤더, 푸터, Nav 같은 컴포넌트 제작 : 필요한 페이지마다 이름을 불러서 사용함
타이핑하는 코드의 양이 확실히 줄어듦
컴포넌트화 방식이라고 불림

리액트는 컴포넌트 기반의 라이브러리
레고를 만들며 조립하는 느낌 = 행복함 (과연)

2. 선언형 프로그래밍

왼쪽은 jquery, 오른쪽은 react

3. virtual DOM

다섯번 업데이트 해야할 것을 , 묶어서 한 번에 연산한다.

Create React App

boiler plate

패키지의 패키지 = npx

npx creat-react-app '프로젝트명' . (점 찍어야 파일구조 깔끔함)
npm start ( 리액트 실행 .. )

html을 안 적었는데 왜 웹브라우저가 실행될까?

App함수가 return하는 값이 id가 root인 div 아래의 자식요소로 들어갔다고 유추할 수 있음
public > index.html에 우리가 찾던 html 파일 존재!

정리해보면,🌟
index.js에서 시작 -> id가 root인 요소를 찾음 -> 그 요소에다가 app이라는 컨포넌트를 가져옴

jsx

js와 html을 합쳐 사용
= 자바스크립트 표현식
= jsx

컴포넌트

app이라는 함수를 만든 뒤, jsx문법의 html을 return으로 넘겨주면 컴포넌트 생성 가능
최상위 컴포넌트는 언제든지 바꿔도 됨 (굳이 app말고도....ㅇㅇ 가능)
export.default (ES6버전..?)
module.exports (Common js 버전)

궁금증 & etc....

• npm으로 실행시키는거나, node로 실행시키는거나 뭐가 다른거지?
• 맥북 개발자 도구 단축키 option+command+i
• create-react-app으로 설치 진행하면 node_modules내에 패키지 왕 많음(react도 아무튼 외부모듈이라 여기에 존재함). 깃허브 올리기엔 시간 오래 걸림
• 사실 package.json, package-lock.json에 패키지명 명시되어있기 때문에 node_modules 파일 삭제해도 됨. 실수로 삭제해도.. npm -i 명령어로 설치 가능
• npm i = npm install