1) React Project - Instagram Clone coding

아직 좀 잘 모르는 부분이 있어 클론코딩 하며 정리를 다시한번 더 해보려 한다

 

지금 개인프로젝트 중인데 뭔가 이상함을 느꼈다

 

라우트가 안된다.. 알고 있고 배운대로 하는데 왜 안되는지 정리 노트 봐도 모르겠다

 

그렇다는건 처음 빌드업 부터 잘못 됬다 라고 할수 있을것 같다

 

코드가 너무 지저분해졌다..

 

지금 인스타그램 클론 코딩에서 얻어가야 할것은

1. 폴더별 코드 정리

2. 라우팅시 파라메터 라우팅과 부모 라우트 안에 자식 라우트 안에 자식라우트 안에..... 어떻게 하는지

3. props (사용법 말고 활용법 중심으로... 부모 라우트에서 자식의 자식의 자식의 자식등으로 전달은 되는데.. 그게 문제가 아님)

 

★ 이표시만 

 

---

 

	node -v 하면 현재 node 버전 확인 가능하고 npm -v 하면 같이 설치된 npm 의 버전 확인 가능 그리고 npm 보다 좀 더 빠른 yarn을 사용하기로 함 npm i yarn -g 해서 글로벌에 설치 해주자
	npx create-react-app instagram-clone
	yarn start 앞으로 서버는 이렇게 켜라
	그리고 es7 검색해서 이거 플러스 버전으로 설치.. 이게 뭐냐면.. 밑에 Homepage.js 폴더 만들면 보여주겠음
	필요없고 안쓸거먼저 지우자 은근 중요함 이런거..
	클론 코딩할건데 몇몇개는 필요 없어서 지운거다
	그럼 뭐 로고없네여~ 하는
	그냥 전부 밀어 (App.css도 다시 짤거니깐 걍 밀어)

---

셋팅 끝났다 드가자

	폴더를 생성할때 이게 정답이 없는거였음 navigation : 탐색용 폴더 ? timeline : 타임라인 기록 ? suggestions : 제안용? 아 영문 번역이 발번역이라 모르겠네 뭔 용도인지.. 해가면서 함 알아가 보자
	아아 이게 컴포넌트화 해서 관리를 하기 때문에 이렇게 하는것 navigation 인줄은 아는데 저게 들어갈거였다 ㅎㅎ
	가운데 몸통? 이게 timeline 폴더에 들어갈거
	마지막으로 가장 우측에 있는거 이거 뭐 추천란인데 이거였음...
	그리고 Homepage로된 js와 css 파일을 생성 하고..
	리액트 함수가 구현된 코드를 빠르게 만들어 줄수가 있다 이렇게 해당 파일 들어가서  rfce 만 쳐주면 자동 완성이 된다
	이제 이 homepage는 main 페이지가 될것이다

---

컴포넌트 만들기 (좀더 직관적이며 낭비없이 만들기)

	정답은 없는데 이강의도 특이하다 그리고 뭔가 더 효율적으로 느껴진다 역시 현업 전문가가 하는 방법은 이미 충분한 연습과 학습에대한 데이터인듯
	이렇게 Timeline 도 해주고
	그런 다음  Homepage로 넘어와 방금 만든 컴포넌트들을 불러와 연결만 시켜준다
	★ 이제 이 Homepage 를 App.js에 넣어줄 차례다 여기서.. App.jsx 안에는 html을 쓰는게 아니라 필요한 컴포넌트를 갖고와 연동만 시켜주는것임을 상기해라 그리고 라우트경로 지정하는거랑 같이..

---

CSS

	전체 배경과 글자색을
	인스타 스럽게 바꿔준다음
	여기 Homepage의 homepage__nav는 전체 화면의 20%를주고 homepage__titleline는 전체 화면의 80%를 주려 한다
	와 이건 처음 보는데 ㄷㄷ 메인을 display를 flex로 둬서 자유롭게 한다음 row를 써서 일렬로 두고 그걸 이제 flex로 0.2와 0.8로 해서 나눠진다 이렇게도 할 수가 있구나..

	앞전에 만들었던 Sugesstions 폴더를 없애고 timeline 안에 만들어줬다 그 이유는 저기 80% 안에서 넣고 거기서 반을 나누는 편이 더 좋아 보인다
	이렇게 timeline 안에 추가 해주고
	이제 저 둘을 또 나눠 줄거다 아까와 똑같다 보면 되니
	이렇게 해주면

와 레이아웃을 이렇게도 잡는구나.. 새로운 신의 한수인듯..

 

이제 안에 채워 넣기만 하면 된다

 

와 끝나고 나면 내꺼 이렇게 다시 짜야 겠다..ㄷㄷ