오늘의 결론

• React 주특기 심화 2주차

오늘 배운 것

2-1강, 2-2강

• package.json파일 받아와서 yarn install 해주면 한번에 설치가능

• 자바스크립트 = 싱글쓰레드(메인 쓰레드 + 콜스택) 비동기작업 동시가능
  

• 콜백함수 : 어떤 함수에 인수로 넘겨주는 함수

• Promise : 비동기 연산이 종료된 이후 결과를 알기위해 사용하는 객체
  https://www.notion.so/2-3977ef0b3c0742389d076dc4ca022418#a046536d825744c3aa86f4468c01fb43** (학습자료 참고 다시 공부필요)

2-3강, 2-4강, 2-5강

• JWT 토큰 , 세션 기반 인증

• OAuth2.0 오어쓰 : 인증하고 권한 둘다 관리한다. (Open Authentication, Open Authorization)
  

• 웹 저장소 (feat.토큰)

1. 쿠키 Key:value형태의 저장소, 4KB정도 저장가능
   document.cookie = "MY_COOKIE=here;" 만들고
   let date = new Date('2022-10-5') 날짜설정
   let date_str = date.toUTCstring();로 string으로 바꿔준다. 쿠키에 넣으려고(위에date뒤에 toUTCstring바로 써줘도된다.)
   document.cookie = "MY_COOKIE=here; expires="+date_str 주고 새로고침해서 보자.
   삭제는 let exp = new Date('2020-01-01').toUTCstring() 날짜 새로만들어주고
   document.cookie = "MY_COOKIE=here; expires="+exp; 업데이트해주면 삭제된다.
   document.cookie로 깡으로 다긁어옴
2. 세션스토리지
   Key:value형태의 저장소, 브라우저를 닫으면 제거된다.
   sessionStorage.setItem("key", "value")
   sessionStorage.getItem("key")
   sessionStorage.removeItem("key")
   sessionStorage.cleare()
   
3. 로컬스토리지
   Key:value형태의 저장소, 5MB정도 저장가능
   세션 스토리지를 LocalStorage 바꿔주고 사용법은 똑같다.

• 퀴즈
  쿠키 생성, 불러오기 , 삭제는 어떤 인수를 넣는지와 순서를 잘 파악해한다. 코드 보고 생각해보자.

2-6강

• 퀴즈
  로그인 된 페이지로 넘어가려면 헤더 컴포넌트를 분기해야한다.
  뭘해야될까?

1. 헤더를 로그인 됐을 때의 버튼 내정보,알림,로그아웃 생기도록 분기한다.
2. useState를 사용하여 islogin 값을 만든다.
3. useEffect와 getCookie를 사용하여 쿠키 값이 있는 지 없는지를 판단 후 is_login 값을 변경해준다.
4. if(is_login) 으로 로그인 됐을때의 페이지를 return해준다.
5. logout은 버튼에 쿠키삭제 deleteCookie를 넣어주면 된다.

• redux패키지 설치
  https://www.notion.so/2-3977ef0b3c0742389d076dc4ca022418#a046536d825744c3aa86f4468c01fb43

2-7강

redux를 만들꺼다.
첫번째로 src에 폴더 redux와 redux안에 modules를 만든다.
그리고 modules폴더 안에 user.js 모듈을 만든다. redux폴더안에는 configureStore를 만든다. 이제 modules폴더안에 module을 먼저 만들어야되는데 그 이유는
configureStore를 만들기 위해서는 리듀서+미들웨어가 필요한대 module안에 reducer가 있기 때문이다. 이제 아래보면서 만들어보자.

새로운 패키지를 이용하여 기존 module 만드는 방식보다 훨씬 더 쉽게 만들 수 있다.

• ★ redux-actions (액션관리), immer (불변성) ★

1. 새로운 패키지에서 기능들 import
2. action creators에서 createAction 사용
3. reducer에서 handleActions사용, immer에서 가져온 produce를 사용해서 원본값을 유지
   state는 원본값, 뒤에 draft는 원본값을 복사한 값

2-8강

• createStore 만들기 (강의자료 참고)
  https://www.notion.so/2-3977ef0b3c0742389d076dc4ca022418#a046536d825744c3aa86f4468c01fb43

2-9강 (8분까지 봤고 뒤에는 정리못함)

• 스토어 주입

1. index.js에서 Provider사용 app묶어주기
2. import store해서 Provider에 넣어주기
3. app.js로가서 아래 2개 import해주고, BrowserRouter부분을 ConnectedRouter로 바꾸기
   
4. 이제 브라우저가서 console확인해보면 logger이 잘들어온걸 확인할 수 있다.
   

강의자료보고 순서를 잘보자 !

2-10강 (Firebase)

• Firebase (v8로 변경해야함)

2-11강 (Firebase)

• Firebase 회원가입 구현

1. user.js(리덕스 모듈)에 auth import
2. login action 삭제, action creator도 삭제, 아래 미들웨어에 히스토리로 login dispatch한것도 삭제, action set_User 만들기, 리듀서쪽에 login action을 set_User로 바꾸기, 로그인 정보만을 위한 const initial 만들기
3. auth에 정보를 넘겨주기 위해서 auth의 함수를 사용해야한다. 이것은 어디서? 미들웨어에서 하기때문에 singnupFB 미들웨어를 만든다. 중간 빨간네모는 사이트의 함수를 복사해다가 사용했다.
   auth라고 파란색 글씨는 firebase에서 auth는 firebase.auth()를 선언해준걸import했기 때문에 auth로 바꿔줬다.
   .createUserWithEmailandPassword는 우리 형식에 맞게 id, pwd를 써주고,
   정보 넘기는게 완료되면 .then user가 넘어오고 오류나면 .catch할꺼야란 내용이다.
   콘솔로 찍어봤다. 그리고 export해줬다.
   
   
4. export해줬으니 sign up에 가서 사용하기 위해 뭘 해줘야하나?
   action을 사용할 것이니 dispatch와 actionCreators를 import해준다. 그리고
   회원가입 버튼을 클릭했을때 불러와져야하니 _onclick={()} 에 넣을 함수를 만들어주자
5. 만들고 나니 signupFB에 id,pw,name을 받아야한다. 어떻게? 입력값을 받아서.
   state를 만들어서 가져온다.
   
6. 인풋 _onchage에 e와 콘솔 e.target.value를 넣고 페이지에 가서 입력값이 잘들어오나 확인한다.
   
7. 콘솔에 잘찍히면 아래와 같이 모든 버튼을 해당 set으로 바꿔준다. 회원가입하기 버튼에 만들어놓은 singup 연결
   
   
8. 오류뜨는데 빈칸 넘겨서 string은 안된다고뜨는거다.
   25분부터 보기 (새로고침시 헤더 변경 되는 것 확인하기,로그인 유지가 안되서그렇다.)

2-12강 (Firebase)

• Firebase 로그인 구현

이제는 강사님이 어떤식으로 찾아가는지 방향만 적을 생각이다. 참고자료 보면서 할때 참고할 수 있도록

1. 로그인 구현할꺼니 user.js , Login.js 파일 켜라

2. 로그인 할꺼면 user.js에 auth불러오는게 먼저다.

3. 실제로 firebase에서 로그인할꺼니까 얘는 삭제, 아래 export했던것도 삭제
   

4. 함수 작성 후 아래 이메일 주소와 비밀번호로 사용자 로그인 처리 가져와서 사용.

5. 그리고 로그인 페이지가서 뭐한다? 로그인 버튼 클릭했을때 함수 dispatch(loginFB())로 변경해주고, loginFB에 입력값 줘야하니까 아이디,비밀번호 const id, setId = React.useState("") 이런식으로 입력값 받아와서 넘겨주기
6. 그러면 console.log(user)찍은것 때문에 아래 같이뜸. displayname 가입할때 프로필 변경 함수 써서 변경했던것.

7. user.user.displayName으로 setUser에 user_name:에 넣어준다.

2-13강 (Firebase)

• 로그인 유지하기
  로그인유지하기위해 application쪽 indexedDB에 API키 사용해도되는데,

문서보면 세션이용하는 방법이있다.

세션을 이용하기위해 아래 꺼 복사

그리고 user.js에 필요한것만 남기고 그안에 로그인 로직을 넣어준다.

그리고 브라우저가서 로그인된 페이지에서 새로고침하면 헤더가 바뀌는데 매번 바꾸기 귀찮으니까
헤더 컴포넌트가서 리덕스에 history준거 import해서 버튼에 history.push걸어준다.

그 다음 다시 로그인 페이지가서 로그인해보고 콘솔에 application드가서 세션 잘 있는지 확인해보면 잘있다.

이제 firebase api인증키를 export해줘야한다. 왜? api인증키로 로그인 상태 체크할꺼니까

firebase 파일에서 api키 export해주고

헤더 페이지가서 아래 부분 쳐주소 is_session확인하면

새로고침하면 true나온다 근데 헤더가 바꼇다. 왜? 새로고침하면 리덕스 날아가니까

• 로그인 체크함수 다시보기필요

2-14강 (Firebase)

• 로그아웃 구현하기 (간다하니 참고파일만 보면됨)
• 공용으로 사용할 로그인 체크여부 컴포넌트를 만들어주기. (Permit)
• Permit 만들고 header.js에서 로그인 세션 체크부분 주석처리하고
  permit으로 감싼 데이터 넣어주면 된다. (얘만안됨..)

2-15강 (Firebase)

• App.js에 +버튼 만들기 (position :fixed사용)

• 정규식

느낀 것

오늘은 생략

내일 배울 것

react 주특기 강의 심화주차 3주차