TIL 7

Ted·2022년 5월 28일

TIL

목록 보기

7/51

👊 그동안 흩어져 있던 조각들이 점점 맞춰져 간다!

집중도 1~5 (4.3)

'어제와 비슷했다. 이정도면 아쉽진 않다.'

5/28 토

기억할 것

이 부분 이벤트를 어떻게 코드로 써야하는지 그리고 뭔가를 만들 때에 대한 순서가 헷갈렸는데 이걸 보고 엄청 이해가 많이 됐다.
여기 2분 부분부터 꼭 다시 볼 것
( https://codingnoona.thinkific.com/courses/take/3/lessons/34164505-6-form )
!! 리덕스는 state 값이 공유가 필요할 때 필요로 한다!!!! 와.. 이거다! 6분 부분!!
( https://codingnoona.thinkific.com/courses/take/3/lessons/34164505-6-form )

2-1. !! payload 안의 키와 값의 이름이 동일하다면 더 줄여서 쓸 수 있다.

< 동일하지 않을 시는 다르게 써야하므로 기억해야함, 이건 최신 자바스크립트 내용임 최신 자바스크립트 통합 강의 같은 거 볼 것>

( https://codingnoona.thinkific.com/courses/take/3/lessons/34164917-7 )
!! type이 submit이면 onclick이 아닌 onsubmit 을 해야함!
!! onchange 이벤트는 인풋 태그 안에 주로 쓰이고 이건 인풋 안에 어떤 내용을 적으면 그 타입한 값을 읽어서 저장하는 것
!! 일단 판을 다 짜고 그 판에서 usedispatch를 추가한다. 그럼 dispatch는 action을 던진다.

5-1. !! action은 항상 파라미터를 갖고 (event라고 생각하면 됌) 파라미터를 type, payload 형태로 값을 갖는다

5-2. !! dipatch ({type:"여긴 내가 작동하고픈 액션 이름 지어내면 됌 주로 영어 대문자로 씀 SAVE", payload: })

5-3. !! type에는 내가 작동하고픈 액션 이름 넣어주고 , payload 뒤에는 내가 넘겨주고 값을 넣어주면 됌
위에 처럼 해서 action이 던져졌으면 reducer 페이지로 가서 이어서 작업 하믄 됌
던지는건 usedispatch, 읽어오는건 useseletor
?? 왜 박스 안의 props를 {item}으로 받는 거지? 이건 아마 앞쪽 가위, 바위, 보 프로젝트하면 알게 될 거라 예상됌

할 일

라우터 Restful Route 강의 먼저 보기 &&
display flex 개념 완전 익혀야함 &&
개인 과제 github 이용하면서 잘 몰랐던, 어차피 익숙해져야 하는 github과 친해져보자 &&
먼저 보이는 UI 작업을 한 후에 리덕스 세팅을 하는구나!!
dispatch로 action을 던져줌
!! map 함수 다시 공부할 것 redux 부분에서 데이터가 추가 됐을 때 박스 안에 map 함수로 자동으로 추가 되는 형식으로 그려야함 &&
!! props 영상 한 번 더 보기 ( 보면 또 이해되다가 또 까먹고 반복인데 한 번에 완전 내껄로 만들려는 건 욕심이다.

너무 붙잡지 말고 계속 듣자 &&
?? 스토어에 문제가 있는 걸까? 하... 어디가 문제인지를 모르겠다... 머리 터질 거 같다... 너무 답답하다.
?? 동기 처리 , 비동기 처리의 의미 정확히 알아야함. &&
?? onclick이 무슨 문제가 있어서 필요로 하는 값들이 submit이 안 됐는지 알아내기
onclick 작동시 어떤 행동이 먼저 자동으로 일어나는지 알아야함.
onclick을 통해서 어떻게 할 수 있을까? 더 고민해 볼 것. &&

해야할 것

redux 최신 버전 redux- toolkit으로 하는 방법 배우기 ( 이렇게 하는 게 훨씬 간단하니 어차피 저 방식으로 바꿔야함) &&
input 태그 안에 글자 수 제한 &&
?? form 태그 안의 버튼은 타입이 submit이므로 그 경우 최상위 form 태그 안에 onsubmit을 넣어 버튼의 저장 이벤트를 넣어줘야함
!!!!!!!!!!!!!$ 와 알아냈다 뭐가 문제였는지!!!!!! onclick이 버튼에 있을 때 저장하기 누르면 form에서 submit한 정보가 정보 전달이 안 됐다.
4-1. 이게 문제였다라는 걸 내가 필요로 하는 값이 나오는 곳에 console.log(값 )를 해두고 콘솔에 무슨 말이 찍히나 확인 해보았다!!
4-2. 콘솔에 커넥팅이 안 된다라는 오류를 보고 커넥팅에 문제가 있음을 알아냈고 onclick의 기본 기능에 새로고침? 인가 뭐가 있었다는 얘기가 기억 나서
onclick를 없애고 해보니까 바로 됐다...!! 하.................... 몇 시간을 이것저것 다 뒤적였는데..... 그래도 고생한 덕분에 오류가 생겼을 때
어떻게 어떤 것부터 확인을 해야할지 알게 됐다..... ㅠㅠㅠ 너무 기쁘다. &&
!!$$ onclick이 무슨 문제가 있어서 필요로 하는 값들이 submit이 안 됐는지 알아내기 < 태형님이 주신 팁!!! 정말 감사하다>
!!$$ 트랜스폼, 키프레임 애니메이션을 공부해보면 저 플러스 자체를 돌아가게 할 수 있을 것 < 태형님이 주신 팁!!! 정말 감사하다>