위코드 16일차

08:00 ~ 09:10 헬스장
10:00 위코드 도착

오늘은 React에 관한 세션을 들었다.

Frontend 3대 라이브러리

Vue

• 2014년에 Evan You가 개발한 코드다. 코드가 깔끔하고 배우기 쉽기 때문에 가장 늦게 생겼지만 성장속도가 빠르다

앵귤러

• 2010년에 구글에서 개발한 프레임워크다. 타입스크립트 기반으로 안정적이며 앱개발이 가능하다. 그리고 다양한 기능이 내장되있지만 배우기엔 난이도가 높다

리액트

• 2013년에 페이스북에서 개발한 라이브러리로 오직 보이는 부분만 담당한다. 리액트는 사용하는 사용자가 많아 정보에 접근이 쉬우며 사용자가 꾸준이 증가하고있다.

CRA - Settings

1. CRA 설치

1. cd Desktop/폴더이름
2. npx create-react-app 프로젝트이름
3. cd 프로젝트이름
4. npm start

2. CRA 초기 폴더 및 파일 세팅 구성

1) node.modules

• CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2) package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보가 기록되는 파일

index.html, index.js, App.js

1) public - index.html

• <div id="root"></div>

2) src - index.js

• React의 시작
• ReactDom.render( <App />, document.getElementById('root'))
  1. ReactDom.render 함수의 인자는 두 개
  2. 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
  3. 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
• (이름 함부로 수정하면 안됨)

3) src - App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트
• Westagram 작업 시 <Login /> 컴포넌트, <Main />컴포넌트를 그 자리에 대체하여 작업
• React Router를 사용하면 <Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치

오늘 처음으로 html과 css로 만든 파일들을 React로 구현해봤는데 확실히 좀 더 직관적으로 볼 수 있고 유지보수가 쉬워 보였지만 html에서 class값을 확실히 줘서 css로도 확실히 그 클래스에만 적용되게 해야지 안 그러면 옮기고 나서 깨진다는 것을 알았다. 개발 기초 단계에서는 확실히 레이아웃을 짜고 나서 기능 구현을 해야 일을 두번하지 않는다는 것을 느꼈다.