오늘은 코드캠프에서의 첫 날이라 긴장이 되기도 하고 설레이기도 했다. 그래서 그런지 아침에 탈이 나서 고생을 좀 했지만!!(지옥철도 한 몫 한 것 같다..) 다행히 무사히 도착했다...^^
1일차
- 일정
매주 수요일에는 오후 4시~5시 30분에 주차별 알고리즘 테스트가 있고, 금요일에는 6시 30까지 주어진 알고리즘 폴더를 풀고 제출해야 한다! 주차에 따라 터미널에 yarn submit(01...02) 식으로 입력해서 제출하면 된다. (이것도 처음에 헷갈렸어..)
또한 멘토님은 첫 2주가 중요하다고 강조하셨기에 그 때 할 일은 다음과 같다. 특히 영타가 빠르면 수업을 들으며 다시 한 번 생각해볼 시간이 생기니 , 적은 양이라도 매일 매일 연습하기!!
- 영타실력 늘리기!
- 단축키 사용하기!
- 코드리딩 실력키우기! 나~중에 라이브 코딩
- react
React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구!
오늘은 첫날이라 React를 사용하기 위한 여러 프로그램들을 설치했다.
1. Os에 프로그램 설치
- Node.js
Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다.
런타임이란? 프로그래밍 언어가 구동되는 환경! 따라서 Js 언어가 구동 가능하게 해주는 환경을 제공하는 것이 Node.js라고 이해했다!- Yarn
yarn은 프로젝트의 의존성을 관리하는 javascript의 package manager이다.
=> sudo npm install -g yarn
yarn은 npm과 마찬가지로 package.json을 통해 의존 패키지를 구분하고 프로젝트에서 어떤 일을 할지 결정한다.
2. 폴더에 수업 프로젝트 설치하기
- Next.js
nextjs는 React로 만드는 서버사이드 렌더링 프레인 워크!
서버사이드 렌더링을 함으로 얻는 이득은 다음과 같다.
- 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게됩니다. 이때까지 사용자는 많은 시간을 대기해야 합니다.
- seo 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보를 보이지 않습니다. 구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 됩니다.
이 두가지를 해결하는 것이 서버렌더링입니다.
=> npx create-next-app- Emotion
emotion.js는 CSS-in-JS의 종류 중 하나!
JavaScript 안에서 스타일을 작성할 수 있게 해준다.
<emotion.js는 주로 Framework Agnostic(*쉽게 말하면 프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다.>
=> yarn add @emotion/react- Apollo-client, Graphql
GraphQL을 사용하여 데이터를 관리할 수 있는 자바스크립트 상태 관리 라이브러리이다. 리액트에서 사용할 경우 Redux를 대체 가능하다.
=> npm install @apollo/client graphql- Ant-Design
알리바바 그룹에서 개발한 UI 프레임워크로 다양한 컴포넌트를 지원가능**
=> yarn add antd- Material-UI
부트스트랩, antd와 같이 빠르고 쉽게 웹 개발을 위한 웹 디자인 CSS를 도와주는 프레임워크
=> npm install @material-ui/core- Axios
브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리
=> yarn add axios
3. React 폴더구조
다음은 설치된 프로젝트의 초기 폴더 구조이다.
이렇게 초기 셋팅이 완료된 폴더를 보일러플레이트라고 한다.
(회사마다 다를 수 있을 유.)
프론트엔드의 각 페이지 화면들(pages)
api 폴더는 사용하지 않으므로 삭제!
제품 설명서(package.json)
package.json파일은 핵심이 되는 파일로,제품 설명서와 같은 역할다른 폴더의 파일 불러오기(import/export)
Git과 Github
1. Git
**Git**은**소스코드 저장을 도와주는 프로그램**입니다.Git을 사용하여 프로그램을 저장하면,
**누가 언제 어떤 글자 또는 코드를 변경했는지**알 수 있습니다.또한, 중요한 코드를 실수로 잘못 바꾼 경우
**다시 되돌리기도 가능**합니다.따라서, 실무에서는 파일을 Git을 통해 저장합니다.
2. Github
Github는 Git이라는 프로그램으로 저장한 파일들이**실제로 저장되는 장소**입니다.따라서,
**우리가 작성한 파일들을 Git을 사용하여 Github에 저장합니다.**Github와 같은 저장소들은 Gitlab, Bitbucket 등 많이 있지만, 우리는 가장 인기있는 Github를 사용합니다.
3. Git 설정
1) Github 에 repository 를 생성합니다.
2) vscode를 사용해 프로젝트 폴더 터미널 내 git init 을 입력, 폴더 내 git 저장소를 만들어 줍니다
3) 이후 프로젝트 폴더와 원격저장소(git repository)를 git remote add origin (나의 저장소 주소) 연결시켜 줍니다
이때, 나의 저장소 주소는 github에서 확인 가능합니다
4) 이후 git 저장소에 내 코드를 등록 하고 싶을때는
- git add .
- git commit -m "커밋 메세지"
- git push origin master
를 통해 할 수 있습니다(매일 하면서 익숙해지기!! 사실 git 사용법이 제일 어려웠어효..,,.)
4. Git pull
수업 진행에서 사용할 멘토 reference 코드를 받기 위해서 우리는 git pull 을 사용하여 손쉽게 코드를 받아올 수 있습니다
1) 원하는 위치에 codecamp-04-mento 폴더를 생성합니다
2) vscode의 터미널을 통해 생성해놓은 codecamp-04-mento로 이동합니다
3) git clone (복제할 git 주소)
4) 추후 최신버전의 코드를 받아 올때는 git pull origin master 를 사용해 최신화 합니다
<git의 기본 명령어들>
휴휴 첫 날에 과제하다가 10시에 집갔다~
근데 다 한 것도 아니었따!! 하지만 이전이라면 아예 손도 못댔을 텐데 오늘은 손을 댔다.
내일은 더 발전하는 하루를 보내자 야호
