1주차 커리큘럼
프론트엔드는 통신도 가능해야 함!!!
UI만 그리는 사람은 퍼블리셔
DAY 01
터미널 명령어
터미널에서 폴더 만들기
mkdir 폴더명
폴더로 이동하기
cd 폴더명
목록 확인하기
ls
현재 위치 확인하기
pwd
os에 프로그램 설치
- VSCODE 설치
- VSCODE-EXTENSION 설치
- Node.js 설치
=> Node.js를 설치하면 npm은 자동으로 설치됩니다.- Yarn 설치 => npm install -g yarn
설치 안되면 관리자 버전으로 => sudo npm install -g yarn
버전 확인 => yarn --version
프로젝트 생성하기
Next.js
npx create-next-app@latest
emotion
yarn add @emotion/react
Apollo-Client와 Graphql
npm install @apollo/client graphql
Ant-Design
yarn add antd
보일러 플레이트
보일러 플레이트는 회사, 프로젝트 마다 다를 수 있다
pages
- pages 폴더는 프론트엔드의 페이지 화면들을 모아놓은 폴더
- app.js : 페이지 설정
- index.js : 시작페이지
package.json
- 핵심이 되는 파일로, 제품 설명서
React
- javascript 를 쉽고 효율적으로 사용할 수 있게 만들어준다.
Next
- React 기반 프레임 워크
- Next를 설치하였기 때문에 react, react-dom이 자동으로 설치되었음
다른 폴더의 파일 불러오기 : import / export
import { } from '../../styles/emotion';
export default function MyPage() {
return (
);
}왜?
하나의 소스코드에 이 모든 내용을 코딩하면 너무 복잡
HTML, CSS, JAVASCRIPT를 작성하는 소스코드 파일을 각 각 따로 만들고, 필요에 따라 서로 불러와서 사용한다
React의 HTML (JSX) : React 전용 HMTL
기존방식
<div>
<div class = "title"> 제목창 </div>
<button onclick = "alert();"> 버튼을 누르세요 </button>
</div>JSX 방식 : Name 이 붙거나 camel case로 작성하는 것
<div>
<div className = "title"> 제목창 </div>
<button onClick = "alert();"> 버튼을 누르세요 </button>
</div>웹브라우저는 HTML, CSS, JAVASCRIPT 만 읽을 수 있지 않나??
최종적으로 소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환되어 실행
React의 CSS (CSS-IN-JS) - emotion
css를 js 상수에 저장해서 사용하는 방법이다
기존
.title {
width : 1000px;
height : 55px;css-in-js
**const Title** = styled.div`
width : 1000px;
height : 52px;
`왜?
1. 태그에 의미를 부여할 수 있어 태그를 통해 결과물을 예상할 수 있다.
2. 코드 길이가 짧아져 읽기 쉬운 코드가 된다
3. 코드 재활용이 가능하다
Git
Git은 소스코드 저장을 도와주는 프로그램
누가 언제 어떤 글자 또는 코드를 변경했는지 알 수 있다.
중요한 코드를 실수로 잘못 바꾼 경우 다시 되돌리기도 가능하다
Github는 Git이라는 프로그램으로 저장한 파일들이 **실제로 저장되는 장소**
**우리가 작성한 파일들을 Git을 사용하여 Github에 저장**
오늘 공부를 돌아보며
오늘은 아쉬움이 많이 남는 하루다.
부트캠프 시작 전에 리액트에 대한 공부를 하려다가 기본 자바스크립트 공부쪽으로만 했는데,
완전 잘못된 판단이었다는 생각이든다.
리액트에 대한 진짜 기본적인 지식을 아주 조금이라도 익히고 왔으면, 오늘 조금 덜 헤맸을텐데...
리액트나 next.js 이런것들에 대한 youtude 영상이라도 몇 개 들었어야했다
아주 그냥 바보가 되었구만...ㅜ
그래도, 처음 만나는 동기분들의 도움을 많이 받았는데 3개월동안 열심히 해서..
다음주에는, 그 다음달에는... 이제 내가 도움을 줄 수 있는 역할이 되었으면 한다.
오늘 과제 ... 다 할 수 있을까..? ㅠㅠ
집에 가는데 조금 속상했다
