- 리액트 프로젝트 생성. 초기설정.
- Apollo-boost 추가. uri 입력, index.tsx 에 Apolloprovider 로 App 감싸고 client 프로퍼티
- 모든 request는 JWT 토큰을 생성하고 주고받는다. Apollo.ts 에서 operation.setContext() 안에 header "X-JWT" 토큰 가저오는거 설정
- Apollo.ts에서 clientState 도 설장한다. typename을 정하고 로그인하면 jwt를 가져와서 cach에 넣고 로그아웃하면 cash에서 토큰을 제거 한다
- 복습. client 초기 설정을 한번 해주면 모든 곳에서 header 설정을 해주는건가봄.
- localstate에서 로그인 되는지 해보기. AppQuey.ts에서 gql auth 의 로그인상태를 @client 이런 모양으로 가져옴. AppContainer.tsx 에서 data 가져와서 json으로 찍어보기.
- prop types 디펜던시 추가. 컨포넌트 추가로 만들어서 isLoggedin 프로퍼티 넘겨주고 로그인 상태 보기.
- typescript 로 styled-component 만들기 위한 초기세팅 인터페이스는 대문자 I로 시작. theme 에 타입들이 생김.
- theme.ts에 앞으로 쓸 색 설정. styled-reset 디펜던시 추가. injectGlobal
${reset} 하는데 어디다 쓰는건지는 잘 모르겠음 reset을 헤더에 자동으로 추가한다는데 모르겠음.리액트에 자동으로 있는 css 없애주는건가보다.
- 글로벌 스타일 설정.
- 만들 기능 리스트 작성.
- routes 작성 맨끝에 route에 없는 주소를 치면 홈으로 가도록 redirect 만듬. 꼭 맨끝에.
- OutHome component 시작. 각 컴포넌트마다 container 와 presenter를 두개씩 만든다. 인터페이스 만들고 타입에 인터페이스 넣어주는데 컴포넌트 타입 잘 모르겠음.
- react helmet 추가 title을 동적으로 업데이트 컴포넌트 안에 넣고 타이틀 넣음.
- 아이콘 같은 경우는 폰트 어섬은 무겁기 때문에 아이콘 몬스터에서 svg로 가져와서 색깔만 변경해서 씀 국가번호는 타이스크립트로 오브젝트 만들어서 사용 jsoncounties 에서 가져옴. 알파벳 정렬이 되어 있지 않는데 tslint.json exclude에 파일 포함. classname을 프로퍼티로 넘겨주면서 재사용.
- 리액트 class형 낯설음. state 를 this.state로 하고 프로퍼티로 presenter에 넘겨줌. 인터페이스에서 계속 타입 설정해줌.
- 전화번호를 받는 onChange와 onSubmit 함수 만듬
- react-toastify 추가 onSubmit 에 들어온 국가번호랑 폰번호 정규식으로 체크 .test() 하고 콘솔 한다음에 toest에 에러 찍음
- query 사용하는거 처음 나옴. 폰번호로 로그인 할때 PhoneSigninMutation class 만들고 뮤테이션 컴포넌트로 감싼다. 입력받은 번호가 정규식에 맞으면 mutation() 함.
- apollo 추가. script에 precodegen : 스키마 불러옴 codegen 불러온 스키마로 타입 만들어줌 설정할때 프엔에 있는 Query 로만 타입을 만듬. 인터페이스가 만들어짐. 잘 모르겠음.
- 서버에서 폰번호가 있는지 확인하고 response를 받는데 그건 mution component에 update 프로퍼티로 받는다. 함수로 data를 받음.
- 업데이트 된 쿼리에서 ok 상태를 체크하고 false면 토스트로 알려줌. update 말고 onComplelte를 쓴다.
- react routes에 있는 history를 사용한다. history 안에 state에 폰 넘버를 넣어서 넘겨준다. url에 폰넘버를 노출시키지 않는 법. 폰인증 화면으로 넘어가서 새로고침을 했을 때도 state는 남아 있는다. state가 언디파인드 상태로 폰인증 화면으로 넘어가면 바로 홈으로 보내도록 한다.
- 인증번호 문자 보냈다는 토스트창 만들고 test
- 폰 인증 완료후 response 쿼리 만듬. form 컴포넌트에 e.preventDefault 넣음.
- 인증번호 입력후 test 리액트 컴포넌트 children 개념 다시 알아보기.
