🚀 학습 목표
1.SPA가 무엇인지 설명할 수 있다.
- 리액트로 구현된며 모든 css 파일이 하나의 html에 포함되어 있다
- index.js에서는 화면에 그려질 컴포넌트가 존재하며 그려질 곳에는 (인자 2개) 아이디가 루트인 디브(index html에 있는)
- react-router-dom를 이용해 Routes Component를 구현할 수 있다.
- 라우터 : 특정경로에 따라서 다른 화면을 보여주는 기능
- 리액트 자체만으로는 할 수 없는 기능 -> install외부패키지 -> 기능 구현
- 링크 = a태그처럼 -> 눌렀을 때 무조건적으로 이동
- navigate -> 자바스크립트 조건 걸어서 사용 가능
- react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.
- Link Component 와 a tag 의 차이점에 대해 설명할 수 있다
- css 전처리기의 역할에 대해 설명할 수 있다.
- html이 읽을 수 있는 스타이시트 = css
- 자체적인 문법만으로는 사용하기 불편한 부분 존재
- 더 편리한 문법을 사용하여 작성
- SASS
- 네스팅 -> 클래스네임을 컴포넌트 명과 동일하게 지어서
- sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.
common reset -> index js 위에서 임포트
variables / mixin -> 실제 사용할 sass 파일 상단에서 import 하면 됨 -> 컴포넌트르 나누어 사용할 경우에도 각가 임포트 해야 함
🚀 학습 목표
- Git을 이해하고 Github을 통해 팀 프로젝트를 진행할 수 있다.
- Git Conflict가 어떤 상황에서 발생하는지 인지하고 해결할 수 있다.
- 같은 프로젝트 <- branch에서 작업한 후 -> pr -> 합치기 (같은 파일 같은 줄에서 코드 작성하는 경우 -> 병합시키려고 할 때 conflict 발생)
- 팀원들과 프로젝트 초기세팅을 할 수 있다.
- commit msg와 PR template을 통해 멘토와 소통할 수 있다.
- 진행하는 도중 -> PR -> 구체적으로 명시하기
내쪽 = 로컬
깃헙 = 리모트
깃클론 주소 -> 내쪽에서 받아짐
브랜치 생성 (feature/~)
내 위치 확인
git checkout feature/~
git add .-> 깃헙에 저장
git commit -m "~" : 내용을 커밋함
git push origin featuer/~ : 깃헙에 올리기
pr : 내 파일에 대한 내용
마스터는 최신화 시켜야 함 -> 다른 사람의 작업을 계속 확인할 필요는 없음 -> 간헐적으로
git pull origin master : 내 현재 위치:featur/~
git checkout -> get pull(최신 내용 반영)
npx create-react-app westagram
초기세팅 -> 구조 만들어줌
node.modules -> 모듈 모음집
package.json -> 프로젝트 요약본 / 버전정보
초기세팅 진행
-> 파일 정리 / 라우터 설치 + 파일 / reset / common ...
git add .
git commit -m "Add: initial settings complete"
git remote add origin "~"
모듈스 -> 용량이 커서 .gitignore 되어있음
그다음 git push origin master
-> 깃헙 레파지토리 상에 올라감
-> 깃 클론으로 파일 내려받기
->npm install -> 구성 파일을 실제로 받아오지 않았기 때문에(패키지제이슨에 써있기 때문에 -> 기반으로 다운받을 수 있음)
-> 브랜치 생성 -> 작업
라우터 작성 시 주의
충돌 시 -> 깃헙에서 알려줌
다른 사람이 올린 파일 -> 먼저 머지 한 경우
깃헙 마스터에서 로컬 마스터로 최신화
-> git checkout master
-> git pull origin master -> 끌어와서 코드 업데이트 최신화
->git checkout feature/~로 이동
->git merge master (내 브랜치에서 머지하기)
해결한 다음
-> git add.
-> git commit -m "Frx: conflict resolved"
-> git push origin featur
git checkout -b feature/ ~
만들면서 이동 가능
학습자료 -> cra 세팅자료
컴포넌트 이름 고유성 -> 겹치지 않게 짜기
내부 파일 하나 공용
경로에 따른 파일 이동이 잘 되는지 확인해보기
인덱스파일 -> 불필요한 주석 날리기
이미지 -> 이름별로 사진 넣기
데이터 폴더 생성
깃 -> 빈 폴더 트래킹 ㄴㄴ -> 이름이라도 넣어서 파일 생성하자
백그라운드 이미지 -> 소스폴더 하위 -> 에셋 -> 이미지 폴더 생성
