<시작하면서> 2.0/5.0
- 오전에 안과를 들렀다가 서둘러가려고 했는데, 일어나보니 오전 9시였다. 어제 늦게까지 잠자다보니..
- 낯선 언어를 몸에 익히는 과정이 재미있다. (언제까지 재미있을려나)
스케쥴
10-11: 오전 전체 킥오프 : 리액트, 알고리즘, 기록 이렇게 세가지.
코드카타 : 정답맞추기X 알고리즘 사고 1시간씩 누적 (문제해결능력)
페어프로그래밍/드라이버(손코딩)&네비게이터(입코딩)
11-12: 리액트 기초
12-1:
1-2:
2-3: 리액트 세션 (신영 멘토님)
3-4: 리액트 세션 (신영 멘토님)
4-5: 생활코딩
5-6:
6-7:
7-8: 인스타그램 옮기기 완료하기
8-9: react 이슈 해결, 상위컴포넌트 ui에 하위 컴포넌트 css가 덧입혀짐 ㅠㅡㅠ -> class이름을 변경함
9-10: 이고잉 컴포넌트 3번까지
리액트 인트로 By 멘토 신영님
- why 리액트?
어떤 흐름으로 오늘날 REACT가 많이 사용되고 있나요?
👆돔을 하나하나 쓰는게 귀찮아서 (내 경험으로). 웹이 복잡해지고 다양해질수록 돔 요소로 접근해서 수정하는게 불편함을 느꼈고,
👆생태계가 활성화되어 있어서 문제해결도 쉽고,
👆프레임워크 3대장 - 앵귤러,뷰, 리액트
- 앵귤러: 2010년 구글에서 개발한 프레임워크
타입스크립트 기반으로 매우 안정적. 무겁고 배우기 어렵. - 뷰: 2014년 Evan you 라는 개인개발 프레임워크. 코드가 깔끔하고 배우기 쉬움. 나중에 생김. 성장속도 정말 빠름.
리액트 : 2013년 페북. 지속적으로 데이터가 변화하는, 대규모 앱 구축. UI,VIEW만 담당.
그래서 third-party 라이브러리 함께 사용( 리액트 라우터, 리덕스, 싸스)
mvc 아키텍쳐(model(date)-view-controller) : 데이터와 뷰 둘다 컨트롤 하는 것.
- what 리액트?
-라이브러리인데, 사용자 인터페이스(ui)를 만들기 위한 js 라이브러리
-가상돔을 통해 UI를 빠르게 업데이트
(이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소집합을 계산하는 기술) - settings
- 노드js: js가 브라우저 밖(서버)에서도 동작하게 하는 환경.탈웹. 프로젝트 개발 환경을 구축하는 주요도구들이 노드제이에서 기반(CPA, 바벨)
- npm :노드 패캐지를 사용하게 도와주는, node.js 설치시 npm자동설치.
- CRA
- 리액트는 ui기능만 제공하니까 개발자가 직접 구축해야 하는 게 많음.
cd wecode
cd project
npx create-react-app westagram18 (잘 설치되면 해피해킹 뜸)
vscode 에서 npm start - 세개 : node.modules(패키지 소스코드) / package.json(추가설치된 라이브러리/패키지 정보가 기록되는 파일) /gitignore (github에 올리지 않을 파일.
- 남의 것 clone 한 것에 대한 node.modules을 다운받고 싶으면
npm install 이라고 치면 됨
- --save????
- index.html / index.js /app.js
- 퍼블릭 폴더
- 인덱스.html
- image폴더
- data 폴더 (mock 데이터 관리)
- 소스 폴더
- 컴포넌트 : 공통 컴포넌트 관리
- 페이지스 : 페이지 단위의 컴포넌트 폴더로 구성
로그인 폴더 :
메인 폴더
스타일즈 :
reset.scss -css 초기화
* common.scss - 공통 사용 css 속성 정의
- Components
- 코드 재활용 증가/ 코드 유지보수 용이 / 페이지 구성파악 쉬움
- JSX
- Assignment |westagram-react (4초)
- 항상 "" 쌍따옴표
마음도 몸도 튼튼한 개발자