📒 오늘 공부한 내용
🔍수업목차
[1-1] React
[1-2] 기본 리눅스 명령어
[1-3] React 프로젝트 설치
[1-4] React 폴더구조
[1-5] React 변화된 방식
✅ React
페이스북과 인스타그램에서 사용자 경험을 향상하기 위해 만든 라이브러리다.
이벤트 요청 시 서버에서 코드를 받아 다시 렌더링해야 되는 문제를 해결하기 위해 만들어졌다.
React는 프레임워크가 아니고 사용자 인터페이스 라이브러리다.
UI 컴포넌트를 만드는 일만 하며 캡슐화를 잘 시켜줘서 재사용 성이 높다.
한가지 일만하여 단순하고 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있다.
그래서 React를 사용하기 위해서 기존 코드를 모두 바꿀 필요 없이 필요한 부분부터 조금씩 사용이 가능하다.
⏩ 라이브러리 :
프로그래밍에서 말하는 라이브러리(library)에 대한 감을 제대로 잡으려면 라이브러리를 도서관이 아닌 '책들의 집합'이라고 이해하는 편이 좋다.
💡 라이브러리를 왜 사용해야 되는 이유
- 모든 기능을 직접 코딩하지는 못하기 때문에
- 시간을 절약하기 위해
⏩ 프레임워크 :
차, 비행기, 배같은 탈것과 같은 운송수단이다. 사람이 탑승하여 시동을 걸고, 기어를 넣고, 핸들을 작동하고, 운전을 해야 한다. 하지만, 앞서서 제시한 탈것들은 라이브러리처럼 좀처럼 대체가 어렵다.
이유는 하늘을 날려면 비행기를 타야하고, 도로를 달리려면, 자동차가 훨씬 유용하다. 바다에서는 배를 타야만 한다. 애초에 그 목적에 맞게 만들어졌기 때문에, 톱이나 망치를 가지고 탈 것을 직접 만들 필요를 없게 한다.
다만, 정해진 규칙에 따라 시동걸고, 기어를 넣고, 핸들을 돌리기만 하면 된다. 즉, 라이브러리와는 달리 프레임워크는 이미 프로그래밍할 규칙이 정해져 있음을 말한다.
✅ 기본 리눅스 명령어
✅ React 프로젝트 설치
1️⃣ npx create-next-app를 복사하여 자신의 "codecampO기이름" 폴더에서 붙여넣기를 하고 엔터키 입력
2️⃣ "class" 라는 이름의 폴더가 만들어졌습니다. 해당 폴더로 이동
3️⃣ 해당 폴더에서 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 명령어를 복사하여 React 17버전과 React 17버전을 지원하는 next를 설치해주세요
4️⃣ node_modules 와 pages 안에 있는 api폴더를 삭제
💡 package.json에서 react 와 react-dom의 버전을 바꿔주세요.
"dependencies" : { "next" : "12.1.0", "react" : "17.0.2", "react-dom" : "17.0.2" }
5️⃣ 이렇게 버전을 바꿔주셨다면, npm install 명령어를 입력
6️⃣ 우리는 이제 npm을 사용하지 않을 것입니다. yarn을 사용
sudo npm install -g yarn을 입력
💡yarn -v버전 확인
7️⃣ class" 폴더에서 Emotion 을 설치
yarn add @emotion/react복사 후 class 폴더에서 붙여넣기하고 엔터를 입력yarn add @emotion/styled복사 후 class 폴더에서 붙여넣기
8️⃣ "class" 폴더에서 Apollo-Client와 Graphql을 설치
npm install @apollo/client graphql을 복사 후 class 폴더에서 붙여넣기하고 엔터 키를 입력
9️⃣ "class" 폴더에서 Ant-Design을 설치
yarn add antd을 복사 후 class 폴더에서 붙여넣기하고 엔터 키를 입력
🔟 "class" 폴더에서 Axios을 설치
yarn add axios를 입력
💡 모두 설치했는지 확인하기
node --versionnpm --versionyarn --version
✅ React 폴더구조
보일러 플레이트 : 초기 셋팅이 완료된 폴더를 보일러플레이트라고 한다.
각 폴더의 한 줄 요약
프론트엔드의 각 페이지 화면들(pages)
제품 설명서(package.json)
Next는 React 기반 프레임워크
✅ React 변화된 방식
다른 폴더의 파일 불러오기 (import / export)
React의 HTML(JSX)
React의 CSS(CSS-IN-JS) - emotion
📌 과제 제출 방법
1. git add .
2. git commit -m "O일차 신재욱 제출"
3. git push origin master✦ 출처
