코드 본캠프 시작 날.
일단은 설랬고.. 시간표와 과제 설명을 듣고 나서도 그렇구나 했다. 하지만.... 현실은 좀 달랐다.
오늘은 첫날이라 오리엔테이션을 진행하고 수업에 들어갔다.
과제,연습문제,포트폴리오용 과제는 지정된 시간까지 완성도와는 무관하게 제출해야 한다고 한다.기한을 지키는것이 중요하다는 말에 별표를 해가며 듣고있었다.
갑자기 첫 영상재생부터 수업준비물이 튀어나왔다. 농담식으로 노트북이나 컴퓨터가 나올 줄 알았는데 도매인 결제를 위한 신용카드 하나를 준비하라고 하신다. 뭐 아직은 급하지 않으나 팀 프로젝트 후 배포할 때 필요한 것이라 한다. .#주소는 400원정도, .com주소는 1500원정도 한다는데 아직은 잘 모르겠다.
일일과제: 수업후, 복습할 수 있는 퀴즈가 과제로나오고, 그날 배운 내용을 포트폴리오에 적용.
수업에서는 리엑트 라는 것을 이용을 하는데, 이것의 업그레이드 버전인 Next.js를 설치 해보았다.
이것을 설치하면서 내 컴퓨터와 내 폴더에 설치할 것 이 어떻게 다른지 알게되었다.
내 컴퓨터에 설치 하는 것은 모든 프로젝트에 영향을 주는것. 예를들어 VSCode가 있고,
내 폴더에 설치 하는것은 각각의 프로젝트에 필요한 코드들 등이다.
만약 페이스북이나 인스타그램등을 만들려 한다면 코드를 직접 칠 수도 있으나 이미 만들어진 기능을 가져올 수도 있다.다운받아서 해당 프로젝트 폴더에 설치? 하면된다.
Node.js,
yarn,
npm
자바스크립트를 브라우저가 아닌 더블클릭 등으로 실행 시킬 수 있게 만든 실행도구가 바로 Node.js이다.
이것을 통해 여러 프로그램을 만들려면 여러 기능들이 필요한데, 좋은 홈페이지에 만든기능들을 다운받아 쓸 수 있게 나와 있다.
이중에 JS는 np,js.com이라는 노드 페키지 메니저에서 필요한 기능들을 다운받아 사용한다고 한다.
다운-->필요한 폴더에 담기
이것을 다운받게 해주는 도구가 바로 npm인데, node.js를 다운받으면 자동 설치된다.
그럼 yarn은??
yarn은 빠른 npm도구로 npm을 통해 yarn 을 설치한다.
최종목표: npm install -g yarn
여기서 -g란 글로벌의 약자로 여기서는 내 컴퓨터 전체를 말한다.
여기서 CLI명령어 라는 것을 알아봤다.
CLI란? Commend Line Interface
의 약자로 원래는 마우스로 클릭해 폴더를 이동하거나 하는 등의 행위를 우리는 GUI(그래픽 유저 인터페이스)라고 하는데, 클릭하는 행위를 하지 않고 터미널을 이용하여
명령어로 폴더를 만들고, 이동하고, 삭제하고
하는 행위를 말한다.
ls 로는 현재 위치에서의 폴더를,
ls -al 는 숨긴파일까지 보여주고,
pwd 로는 작업하고있는 현 위치를 보여준다.
mkdir 폴더명으로는 폴더를 생성할 수 있는데, mk는 make의 약자, dir은 디렉토리의 약자이다. 말 그대로 디렉토리를 만든다는 뜻이다.
여기서 디렉토리는 폴더 라고 보면 될 것 같다.
rm 은 remove의 약자인데, 폴더를 지울때 사용하나,
그냥 rm 폴더명 이라고 하면 폴더는 지울수 없다는 식으로 에러메세지가 나온다.
이럴때는 그 폴더를 순회하여 안에까지 전부 지운다는 의미로 -r을 사용하는데, 여기에 강제로 하겠다는 의미에 f도 붙여줄 수 있다.
rm -rf 폴더명
폴더 안으로 들어가기
cd명령어 사용
cd 폴더명
폴더 밖로 나가기
cd .. 또는 cd ../
복사하기
cp -R 폴더명 복사해놓을 이름
여기서 cp는 copy의 약자이다.
폴더만 복사할 수 없기에 리커시브(순회)가 필요하고
여기서는 대문자 -R을 사용한다.
프로그램 설치중에...
LTS:롱 텀 서포트==> 장기간 서포트를 지원한다는 의미로 프로그램은 최신버전이 꼭 좋은 것만은 아니기에 LTS가 있는경우 그것으로 설치하도록하자.
프로그램설치 후
너무정신없어서 뭘 설치했는지도 모르겠다.
일단 설치후 폴더를 펼쳐보면 이것저것 많이 뜬다. 이것을 보일러 플레이트라고한다는데.. 회사마다 다르다고한다...
node_modules =>여기는 설치한 프로그램(기능) 저장소리다. 실제 설치 코드들이 있는 곳이라고 한다.
그런데 만약 코드를 가져올 경우에는 이부분은 빼놓고 package.json은 꼭 챙겨서 가져오도록하자.
package.json만 있으면 그것이 있는 해당 폴더 에서 yarn install을 하면 위의 노드모듈이 생기기에 무거운 노드모듈은 지우고 가져오는것이다.
리엑트에는 html이나 css가 좀 다르다.
js파일에서 그 두개를 다룬다.
function이라는 기능안에 return 을 기준으로 위쪽은 자바스크립트 부분, 아래쪽은 html부분으로 나뉜다.
그밖에도 따옴표가 {}이렇게 중괄호로 바뀌기도 하고,
onclick의 경우에도 onClick으로 바뀌는등 의 변화가 있다.
이렇게 조금 다른 html이기에 JSX라고 한다. 아직 이용어에 대해 배우지 않았으니 나중에 정리해 볼 것이다.
리엑트에서 js 일부 불러오기가 가능한데
import {apple,banana}from 'game.js'
라고하면 game.js로부터 {}안의것을 불러와라 라는 명령어이고,
game.js에는
export let apple = 10;
export let banana = 20;
이런식으로 작성하면 된다.
내보낼것들 앞에 export를 붙이면 되는 것이다.
css도 똑같이 import를 이용한다
import styles from '경로'
package.json 은설치 히스토리 목록 으로 여기의 script부분이 사용 설명서인데 이 부분들의 앞에 yarn 을 붙이면 실행을 하게되는아이들이다.
yarn lint ==>코드오류확인
yarn dev ==>라이브서버처럼 js를 브라우저로 실행시킬 수 있는 명령어
수업에서는 주로 yarn dev를 사용했다
local 주소를 커멘드+클릭 하면 열린다.
pages에 폴더를 만들면 /폴더명 하면 pages의 해당폴더의 js가 실행된다.
_app.js는 모든 페이지에 공통 적용되는 페이지 설정 파일이다
페이지란? 여기서는 하나의 js가 한 페이지 라고 할 수 있다.
기존 css와도 다르게 적을 수 있다.
.title { width:200px; height:200px; }
이것을
CSS-IN-JS방식으로 적으면
const Title = styled.divwidth:200px; height:200px;
이런식으로 적어 css가 적용될 곳에 변수명을 대신 넣어주면된다.
git 수업과 알고리즘 오리엔테이션은 나중에 한번에 추가자료보면서 정리 해야 할 것 같다.
과제하는데에 시간을 너무뺏겼다.... 좀더 시간이 많았으면....
알고리즘 문제 너무 걱정된다....
오늘 깃허브 잔디가 노란색이길래 이상해 검색해보니 할로윈 이벤트라는 것 같다. 깜짝놀랐다...
