TIL 13

👊 과제가 끝난 후 첫날은 언제나 평안하다.

집중도 1~5 (4.3)

' 중간에 조금 피곤하긴 했으나 집중력이 괜찮았다. 공부 끝나고 일기 쓰다가 일기만 쓰기는 뭔가 아쉬워서 가볍게 책 읽었는데 역시는 역시. 책 읽기 + 일기는 역시나 한 세트. 서점에서 저 둘을 무조건 묶어서 팔아야 하는 법이 생겨야 한다. 둘 중 하나라도 없다면 각각이 가진 기능마저도 모두 상실한다. '

6/3 금

기억할 것

1. 함수 안에서 네이게이트를 사용해야한다면 useNavigate 사용하고 그게 아니고 그냥 클릭해서 화면 바뀌면 된다하면 Link 사용할것! &&

2. Route로 바뀌는 페이지 정했으면 디테일에서 각각 id를 가질 때 각 id에 해당되는 것들의 디테일만 보이게 하는 법은 ( useparams로 url 따온다 ) &&

3. GET은 자료 가져오기 ( 읽기 ) , POST는 자료 보내기 ( 추가하기 ) , PUT (PATCH)은 자료수정, DELETE는 삭제

4. 여기 3분 20초 부분 useparams 에서 바뀌는 id값을 어떻게 처리할지 알려줌 &&
   ( https://codingnoona.thinkific.com/courses/take/3/lessons/33808143-4-useparams-url )

5. redirect로 로그인 안 한 사람들 볼 수 없는 페이지 만들기 !! &&
   ( https://codingnoona.thinkific.com/courses/take/3/lessons/33808252-6-redirect )

6. useEffect는 API 호출할 때 쓰는 훅. ( 코딩누나 리액트 라이프사이클 부분에 그 내용 나오는 듯 싶다. ) &&

7. 자주 쓰는 명령어 간단하게 등록하는 법 리액트 심화 3-4 ( 4분)

8. 콘솔에서 오류 뜨면 내용이 뭔지 한 번 자세히 읽어보기. &&& !!! 중요

   ( 방금 오류는 아이디는 항상 abc@naver.com / 비번은 6자리 이상을 써야했다. 파이어베이스에서 설정해둔 것들이었음
   그게 콘솔 오류창에 친절하게 나왔었는데 콘솔 오류를 그냥 뭐야 하고 넘겨버리니 이 사단까지 왔던 것임 . )
   

오늘 할 일

0. 오늘은 유일하게 자율 공부하는 시간

1. 일단 어떻게 어떤 것부터 공부할지 전략부터 짜기 ( 개인과제 샘플을 토대로 ) %%%%해결루~ &&
   < 누나 코딩 강의의 어떤 부분이 이번 강의의 어느 부분이겠구나 파악하기

2. 라우터로 웹페이지 ID 주고 이동하는 거 먼저 보기 ( useparams 부분 다시 공부 ) %%%%해결루~ &&

3. ? useref에 대한 정확한 이해 %%%%해결루~ &&

4. ? useEffect의 정체 ( API 요청시 사용함) &&

5. !! join 페이지에 input 값을 useref 써서 넘겨줌 ( ref 사용법 알기 !!!!!) %%%%해결루~

6. !!#### 오늘 어떻게든 회원가입 끝내기!!!!!!!! %%%%해결루~

7. 팀과제 < TDZ(Temporal Dead Zone/일시적 사각지대)란? > & 키워드 &&

8. ?? try( ) , catch ( ) 가 무슨 문법인지 &&

해야할 것

1. !! 현업에서는 리덕스 툴킷 쓴다고 한다. 시간 나면 리덕스 툴킷 쓰는 법 공부하자!!!!!!!! &&

2. !! 내일부터 리액트 쿼리 공부해야 한다고 함... 근데 엄청 어렵다고 한다.

   이번엔 어떻게 헤쳐나갈지~ 알지??

3. ?? App.js에 보이는 function 기본 틀과 다른 페이지의 기본 틀이 다른데 어떻게 이해하면 좋을까?? &&

4. ?? 회원가입 스파르타 강의 따라하면 에러가 나왔다고 한다 < 이윤님>

5. ?? 배열 [ ] 과 { }의 정확한 의미 &&

6. ?? setItem() , getItem() 문법!! ( 자바스크립트 문법은 프론트의 근간이니 시간 날 때 계속 공부! 뭐하나 잡고 하자) &&

7. ?? 쿼리 뭔지 정확히 &&

오늘 배운 것

1. 리액트 라우터는 라이브러리임 ( 즉 패키치 설치 필요하다~)

2. Moking API 는 가짜 서버를 만들어서 내가 프론트에서 구현한 것들이 서버로 연결이 되서 CRUD 등이 되는지 확인하는 것

   ( 백엔드가 다 만들어지고 그때 확인했는데 만약에 안 되면 망... 이니까!!! 아주 중요 )

   < json 서버 설치해서 파일 만들고 그걸 포스트맨 프로그램으로 CRUD 되는지 확인한다 !! 스파르타 리액트 심화 3-2 강의!>

3. rest api 는 프로그래밍 서버, 클라이언트 요청,응답 부분에서의 형식! 잘 만든 걸 보고 RESTFUL 하다라고 함.

4. HTTP는 단발성. HTTPS 는 더 보안적이고 동일키가 아닌 반대키를 클라이언트한테 줌 (그래서 단발성이 아님?)
   ( HTTP는 한 번 연결했어도 서버가 내가 누군지 모름 그래서 또 다른 걸 하면 계속 서로 요청, 응답해야함

5. Polling 과 long Polling // Polling은 값을 달라고 요청하면 서버가 바로주는 형식, long polling은 저런 형식이면 데이터가 바뀌지 않는데도 계속 줘야하니
   만약에 채팅중이라 했을 때 새로운 채팅이 올라왔을 때만 데이터를 전달해주는 형식 ( 몇초 있다가라든지 ) 근데 채팅이 많은 채팅방에서
   long polling을 쓴다? 매우 비효율적
   < 예시가 그런거지 정확히 말하자면, 채팅은 soket이라는 형식으로 데이터를 주고 받음 >

6. REST API는 HTTP를 기반으로 함

7. 토큰 내가 나인 것을 인증하기 위한 것. ( 처음 로그인할 때 서버로부터 받아옴, 클라이언트가 어딘가에 저장해둠 ) --> 토큰 기반 인증.
   < OAuth2.0 사용함 에 대한 동작방식은 리액트 심화 3-7 강의자료 볼 것 >

8. JWT는 토큰의 한 형식 ( 데이터가 JSON 형태로 이루어진 토큰! ) < 서버가 JSON 형태로 토큰을 만든 후 클라이언트에게 보내줌

9. !! JWT vs OAuth ( jwt는 토큰의 한 형식, oauth는 프레임워크 < 여기서 토큰으로 jwt 가능 > 두개 다 로그인에 쓰이는 인증 방식임 )
   ( 두 개 함께 쓸 수도 있음 ) ( 로그인시 어떤 방식으로 할지 고민해야함 )

10. 로컬스토리지(내 컴), 세션스토리지에 토큰을 어디에 저장할건지 정해야함!!! ( 세션에 했다면 페이지 끄면 로그아웃 됌) < 웹저장소>

과제 전략

/////////// ( 이런 과제를 처음 맞닥뜨린다면 어떤 것부터 다 처리하고 디테일로 넘어가는지 STEP에 대한 틀을 잡을 수 있게 알아보자 )

0. 파이어베이스, 스토어 CRUD를 통한

1. 위에 어디서도 보이는 navbar ( 이 안에 맨 왼쪽에 홈 마크로 홈으로 돌아가기 기능, / 오른쪽은 회원가입, 로그인 버튼 넣는다 )

2. 홈 화면 위의 navbar 그리고 들어오는 컨텐츠들이 로우로 하나씩 그리고 모두 중앙에 배치 되있음

3. 중앙에 배치 되는 컨텐츠들은 기본적으로 3 div로 이루어져 있으며

   최상단- 개인 아이디, 프로필 / 오른쪽 올린 시간

   중간- 로그인한 개인이 올린 내용 ( 글, 사진 등)

   최하단- 왼쪽 좋아요 갯수, 댓글 갯수 // 오른쪽 끝 눌러줄 수 있는 기능

4. 위 회원가입 기능 , 로그인 기능 ( 회원가입 해야 정보 등록 가능 )

5. 마지막으로 올린 데이터를 누르면 그 데이터 상세보기로 들어가짐 ( 각 주소 id 값을 갖는다 )

광민님한테 묻기

1. ?? 페이지가 https가 더 보안 때문에 좋아서 요즘 거의 다 https인데 그럼 페이지가 만들어졌을 때 어떻게 그 페이지가 http가 아닌 https로 인정 받아 사용할 수 있는 건가? 그 과정이 궁금