TIL 6

👊 4주차 주특기 숙련 시작!

집중도 1~5 (4.3)

5/27 금

---

기억할 것

---

1. 팀 과제 3시

2. 리덕스 이해는 여기서 ( https://www.youtube.com/watch?v=QZcYz2NrDIs )

3. 파이어 스토어 이해는 여기 ( https://www.youtube.com/watch?v=9RkXchEJgKU )

4. props 가 어떻게 쓰이는지 정확한 이해 영상 15분 부분
   ( https://www.youtube.com/watch?v=TjUju3aUIDM&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=6)

5. 여기 es6 자바스크립트 아주 중요한 문법들 다 있음 듣기 ! 이해 쉬움
   ( https://www.youtube.com/watch?v=kLYdgg0ljTk )

   < 여기에 내가 헷갈렸던 내용들이 많이 있음. 8분! 화살표 함수에서 return 유무 차이! return 있음 아마 배열로 값을 반환하는듯
   map은 항상 배열로 반환>

6. 함수에서 return의 의미가 드디어 조각이 맞춰졌다. 저 영상 꼭 보기 ( https://www.youtube.com/watch?v=B5JWd9v5G78)

7. 변수를 설정하고 콘솔로그 찍었을 때 변수가 콘솔 안에서 계속 바뀌다가 state를 아래 첨부하니 그때부터 안 바뀌는데 왜?
   그 이유 이 영상 보면 알 수 있다 < 18분 부분!!> ( https://www.youtube.com/watch?v=TFLvKGhrAwM&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=5 )

8. 코딩 누나 4. redux 적용하기 5분 30초 부분 볼 것! 이해가 안 됐음 여러번 보자 ( https://codingnoona.thinkific.com/courses/take/3/lessons/34128295-4-redux )

---

4주차 개인과제 어떻게 해결할지 미리 전략 짜기

---

// 핵심 [ 리덕스 , 파이어스토어

1. 게시글 목록 페이지

   • 게시글 목록을 화면에 그리기 (각각 뷰는 카드 뷰로 만들기)
   • 게시글 내의 예시는 파란 글씨로 보여주기
   • 게시글 목록을 리덕스에서 관리하기
   • 게시글 목록을 파이어스토어에서 가져오기

2. 게시글 작성 페이지

   • ?? 게시글 작성에 필요한 input 3개를 ref로 관리하기
   • 작성한 게시글을 리덕스 내 게시글 목록에 추가하기
   • 게시글 목록을 파이어스토어에 저장하기

3. 추가로 해보면 좋을 기능 (필수 X)

   • 무한 스크롤 붙이기
   • 게시글 수정해보기 //

⭐ < 개인 과제 내 큰 그림 전략 미리 만들어봄>

1. 단어장 박스 컴포넌트를 만들어주고 그 안에 변경 되는 것들을 state 형식으로 만들어주고 그것들을 reducer에 보관하고
   단어장 박스 컴포넌트 이 안에 { } 변수 형식으로 내가 원하는 위치에 써둔다.

2. 그리고 메인 app에서 오른쪽 아래 클릭 플러스 버튼 만들고 그걸 누르면 라우터로 단어장 만들기 페이지로 이동 ( 거기서 보이는 것들이
   단어장 박스 컴포넌트들 ) 클릭 버튼에 append 추가 시켜둠 아니 append는 상세페이지에서 저장하기를 누르면 실행이 되야할 것.
   ( 메인화면에 박스가 추가해야됌을 인지하자! ) 그럼 끝! 음 너무 간단한 거 같은데?

3. 아! 그리고 메인 화면에 수정하기 버튼 , 클릭하면 그 박스 색깔 변하는 클릭 이벤트 등 단어장 박스에 다양한 이벤트가 필요하다.

4. 수정버튼 누르면 기존에 써있던 내용들이 그대로 있으면서 수정하기 페이지로 이동해야하는데...! < 이 부분이 어려운 거 같다. >
   
   

1 ??. 어떻게 하면 컴포넌트를 상세 페이지에서 내용 추가하면 자동으로 추가 시킬 수 있는지. ( 컴포넌트를 자동 추가? )

2 !!. 아 이거 단어장 보이는 게 리액트 부트스트랩으로 레이아웃 통해서 가운데에 3개씩 보이게 만든 거구나!!!!

---

할 일 ( %% 아주 중요 )

---

1. 리덕스, 파이어스토어 원리 대략적 이해 ### 해결

2. 코딩 자바스크립트 문법 요약 자료 보기 ### 해결

3. %% 누나 코딩 어레이 함수 (배열 함수) 영상 봐보기! ( 그래야 map 정확한 이해 될 것, 기억할 것 5번 부분) ### 해결

4. 누나 코딩 단어장 만들기 강의 보고 따라하기( 연락처 페이지 만들기 부분 + 단어장 만들기 )

5. 일기쓰기

6. 스파르타 강의 ( 3-1)

7. 누나 코딩 payload 부분 다시 볼 것 아직 제대로 이해 못 함. ( + redux의 전반적인 이해는 했으나 내가 손으로 막 쓰진 못 하는 상태. 연습해볼 것)

8. 리액트 부트스트랩에 대해서 ( 그래야 레이아웃을 가운데에 3개의 박스들만 보이게 할 수 있음. (이게 나중에 --> 클론 코딩이랑 연계됌)

---

해야할 것

---

1. ?? disturbing? 리액트에서 계속 쓰이는 props 이름 줄여주는 법 ( 코딩누나 자바스크립트 속성 강의 ( 리액트 강의 안에서 알려줌 다시 볼 것) )

2. 누나 코딩 payload 부분 다시 볼 것 아직 제대로 이해 못 함. ( + redux의 전반적인 이해는 했으나 내가 손으로 막 쓰진 못 하는 상태. 연습해볼 것)

3. 라우터 방법 다시 보기 ( 벌써 다 까먹음. 원래 그런거다 계속 영상 보고 또 해보면서 기억하는 것)

4. 코딩 누나 H&M 만들기부터 따라해보고 그 레이아웃을 기반으로 중국어 단어장을 만들 것.
   < 그럼 H&M 만들기를 먼저 하고 그것에 기반으로 다음 강의의 리덕스 기능을 추가하자.
   리덕스 쓰게 되면 그냥 만든 것에서 수정을 해야할 게 많겠지만 어차피 이전 방법도 연습겸 도움이 될

---

배운 것

---

1. 리덕스는 state를 관리 해주는 라이브러리 ( 안 그럼 props가 넘쳐나기에 )

2. 파이어스토어는 서버를 관리해주는 어플리케이션 ( aws와 같은 맥락 근데 더 비쌈 )

3. @@ props로 가져올 때 메인 컴포넌트에 있는 컴포넌트 이름 안에 속성 값 넣을 떄 스트링은 name="abc" 형태로 ""이걸 쓰고
   그외 모든 것( 숫자 , 함수)들은 { } 이 안에 그대로 써준다 ! 아주 중요!! 이제야 이해했네. <네임, 숫자가 변하는 값이든 아니든>

4. 리덕스

4-1 provider

5. 리덕스 [스텝 1] 컴포넌트에 useDispatch 만들어 그걸 통해서 액션을 던져야함 -----> reducer에게
   [스텝 2] 그럼 reducer은 function reducer(state = initialState, action)의 action을 통해 컴포넌트가 가지고 있던 정보를 받는다.

6. reducer의 행동지침 설정은 if문을 통해 쓸 수도 swich를 통해 쓸 수도 있다. 각 회사마다 다르니 회사에 맞게 하면 됌.
   무튼 if문을 쓰고 그 if문 안에서 return 값을 줬다해도 reducer 함수의 return은 필수적으로 필요. 없으면 store로 전달 x

7. 리덕스가 훌륭한건 내가 부모건 자식이건 할아버지건 뭐건 상관없이 어디서든 필요하면 state를 가져다가 쓸 수 있다!.

8. !! function abc ( ) 앞에 펑션이 있으면 이런 형식이고 앞에 const가 붙는 함수를 만들어야한다면
   const abc = () => { } 이런 형식이다.

9. !! store에 저장된 state 값 받고 싶으면 그 파일 위에 import {useselector} 해서 가져오면 된다. (이것만 쓰면 어느 페이지에서든 state 값 가져올 수 있음

/+ 🤦‍♂️

새로운 개인과제가 주어진 4주차 첫날.

이전엔 첫날에 개인과제, 팀 과제를 알게 되면 그동안 부족한 부분들을 찾아 듣고 난 후에 항해에서 제공하는 커리큘럼에 따라

스파르타 강의를 들으면서 구글링, 유튜브 영상을 통해 개인과제를 어렵사리 해결했는데 그런 방식으로 그냥 있는 대로 머리로

받아들이치니 뭔가 끝나고 전체적인 원리에 대한 이해가 부족한 느낌과 보이는 대로 막 공부하니 후반부쯤에 지금까지 공부하던 것 중에서

어떤 게 중요하고 더 공부했어야 했다는 느낌이 들어 한 주 동안 힘 줘야할 곳 덜 줘야할 곳을 제대로 집어내지 못 했구나란 생각에 아쉬움이 있어서 이번엔 다른 방식으로 시작해 보았다.

이번엔 위의 4주 차 개인과제 전략 짜기 부분처럼 이번 주차 과제를 보고 바로 들이대지 않고 한 걸음 뒤로 물러서서

스파르타 강의는 3~5주 차 리액트 기초가 언제 어떤 키워드의 강의를 갖고 있는지, 개인 과제에서 무엇을 원하는지

그리고 이번 주차에서는 어떤 키워드가 핵심인지, 개인과제를 어떻게 해나가야 할지에 대한 고민 후 전략을 먼저 짜보았다.

이런 방식으로 이번 과제를 마무리하고 다음 주에 이번 주를 돌이켜봤을 때 과연 어떨까? 오늘 하루가 끝난 시점에서 돌이켜보면

이번 방식이 지난 3주간의 방식보다 훨씬 바람직한 것 같다.