- 회의를 통해 기획안 자세하게 분석해서 프로젝트 흐름 파악
- 거주지 선택과 지원완료 후 뜨는 알림은 모달처리
개인정보 관련 내용은 페이지로 각각 분리해서 라우팅으로 연결 예정 - 크게 지원 폼에 포함되는 페이지와 컴포넌트 & 지원 현황 페이지 두 파트로 나눈 후 각각 태스크 분배함
- 전자의 난이도가 상대적으로 쉬운것으로 생각되어 1~2일 사이에 완료 후 나머지 기간동안 지원 현황 페이지 + 리팩토링, 코드 리뷰에 집중하기로 함
- 다함께 CRA, 디렉토리와 컴포넌트 구조 생성, db 구조 설계, 라우터를 연결한 상태로 각자 코드 작업 시작
- 이슈카드 작성 + 리드미 혹은 블로깅 집중하여 정리에도 포커스를 맞춤
(21일 노션 회의록 참고)
(이슈카드 및 회의록 daily meet up 참고)
<2022-07-21>
- Landing, Privacy, Agreement 페이지 완성
- 폼 레이아웃 + 스타일 80% 완성
snp lab 로고 연진님이 따주셨고 + color picker 확장자로 색상 가져옴
#1cc5f7 - snplab 메인 하늘색 컬러
#31393d - 활성화 색상(어두운 회색)으로 어떨지... snplab 웹사이트에서 뽑은 색상
#c4c4c4 - form 인풋 색상 , 비활성화 색상, placeholder 색상
#9a9a9a - 개인정보 윗부분 서브타이틀 글자색
#636363 - 개인정보 메인 내용 글자색
MdArrowForwardIos
MdArrowBackIos
트러블 1, styled-components 사용한 컴포넌트 export 했을 때 => children type을 어떻게 정할지 => 스택오버플로우
https://stackoverflow.com/questions/53688899/typescript-and-react-children-type
- 개인정보처리방침
- 제3자 정보제공 동의
보니까 두개가 같은 내용을 보여주고 잇어서 Privacy와 Agreement를 Privacy로 합침
https://www.privacy.go.kr/a3sc/per/inf/perInfStep01.do 개인정보보호포털에서 회사명과 사이트 주소를 입력하면 자동으로 만들기가 된다.
트러블 2. PrivacyPolicy에서 PrivacyTemplate 컴포넌트 분리할 때
children으로 넘겨줄때 바로 React.node가 아니라 조건문을 넘겨주었을 경우 조건문의 개수만큼 children에 각 조건문의 값이 배열로 넘어오게 됨. 그래서 children으로는 값을 읽어올 수 없고 props.children으로 읽어야만함. => ?
트러블 3. 폼 -> 개인정보 확인 라우팅 이동시 스크롤이 폼에 있던 스크롤 그대로 있다. -> 라우팅으로 새 페이지 이동 후에는 스크롤을 맨 위로 위치시키는게 왜 안되지? 수동으로 설정해야되나?
트러블 4. 이슈카드 넘버 추가 -> 애초에 커밋할때 메세지에 넘버를 수동입력하고 push 했어야했는데 그것을 안하고 push. -> git rebase HEAD~ -i 명령어로 이미 push한 커밋 메세지를 수정할 수 있긴 했지만, 대신 수정을 나타내기 위해 맨앞에 feat : 을 지우고 fix : 로 바꿔야했다. -> 이슈카드는 커밋메세지 맨처음 목적 바로 다음에 쓰기로결정.
트러블 5. input radio 타입 변경 하고 label을 줘서 스타일 변경까지 하는 방법 => label 안에 input및 아이콘, 텍스트를 포함시키면 됨. 대신에 input 태그의 display:none을 주기 때문에 스타일을 줄 때 label에 줘야하고 조금 까다롭다 = useState를 사용함.
styled props 주는방법 https://whales.tistory.com/105
<2021-07-22,24일(23일 쉼)>
- 22일 : Form 레이아웃 완성
- 24일 : checkbox도 완성, search 레이아웃만 구현
- 24일 : Form에서 db 부분 수정하기 female→여, male→남, bus→버스 … 등 한글화
트러블 6. - label과 input 태그 연결 => 각각의 label과 input 의 htmlFor과 id를 동일한 이름으로 다 다르게 연결해줘야했다. map에 key 값주듯이 고유하게
트러블 7. 체크박스 선택시 색상 변경... => https://egg-programmer.tistory.com/282 => 참고해서 수정했으나 오류 => 콘솔로 확인하니 이벤트 한번만 클릭했는데 두번씩 실행되는 현상 발생 = 이벤트 버블링 현상 => 구조 : 컨테이너(div) > 라벨(label) > 인풋(input checkbox) 처음에는 label에 onclick 이벤트를 달고 컨테이너에서 이벤트 버블링이 일어나는줄 알았으나, 라벨과 인풋 사이에 이벤트 버블링이 발생중이었음 => 인풋 onclick에 이벤트 버블링을 막아줌 -> 라벨에서 state 변경을 계속했으나 checkbox가 바로바로 변하는 것이 반영되지 못하고 다른 곳을 클릭해야만 변했다.... -> 코드 분석후 리팩토링 (삽질을 4시간을 했네)
=> (optional)이후 hooks로 뺄때 참고하기https://engineering.linecorp.com/ko/blog/line-securities-frontend-3/
delete는 array의 값 삭제후 undefined가 됨
const b= [1,2,3,4] //return undefined
delete b[2] //return true
b // Array (4) [1, 2, empty, 4]
<2022.07.25>
- 검색창 구현
- axios 인스턴스 생성 ⇒ create api ⇒ post get patch
- var(--color뭐시기)로 바꾸기
<2022.07.26>
- Search useRef로 렌더링 최적화
- Form onclick 핸들러 리팩토링 -> hook으로 빼기 -> optional 뒤로 미루기
- useState 동기/비동기(search 쿼리 처리?), 이벤트 버블링과 캡쳐링 공부하기
- Search 검색어를 input이라고 가정했을 때 includes로 한번 거르기 예) '여자'검색 => '여 자'.includes("여") === true => '여'로 검색 -> optional 뒤로 미루기
※ useState 객체 형태 상태 업데이트 하기 ※
https://jaddong.tistory.com/entry/useState-object-%ED%98%95%ED%83%9C-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%ED%95%98%EA%B8%B0
위 사이트 왈 : 보기엔 동일하지만 차이가 존재하고 아래가 나은 방식이다. = useState의 동작 매커니즘 때문인듯. useState 동기 비동기 차이 + 심화학습 내용이랑 같이 공부하기
const [radio, setRadio] =useState({
female: false,
male: false,
});
setRadio({...radio, female : true}) //not good
setRadio((prevState)=>{
return {...prevState, female: true}
}); //good
트러블 슈팅 1. useState의 비동기 동기 ? => 코스 중 계속 useState를 사용해보니 useState의 state에 상태가 업데이트 되는 것이 바로바로 진행되는 것이 아닌 것을 깨닫게 됨. (SNP Lab에서 Search 컴포넌트에서 search 쿼리 저장할 때에도 생긴 문제)=> 정확히 어느 타이밍에 state에 값이 업데이트 되는 것인지 짚고 넘어갈 필요가 있다고 생각하여 이에 대해 공부함
- 메모장에 공부해둔 내용 바탕으로 Search 해결하기 -> 우선 이렇게 공부해두고 Search input useRef로 최적화를 하려고 리팩토링을 하다보니 임시 query 값도 useRef에 저장하면 되겠다 싶어서 둘다 useRef 처리함. => 원하는대로 성공
트러블 슈팅 2. Link 페이지 이동시 스크롤 위치가 이전 페이지 위치 그대로 있는 문제 = react router 공식문서 참고 : scroll restoration 때문 => react router Link 사용해서 페이지 이동시 이전 페이지의 스크롤 위치를 기억해두는 것 같다 => 공식문서 참고해서 인위적으로 Link 이동시 스크롤을 맨위로 끌어올려주는 scrollTOTop 컴포넌트를 만들어서 BrowserRouter안에 넣어줌 = 이 안에 넣어줘야 useLocation이 pathname을 가질수 있어서 pathname이 변할 때마다 스크롤을 맨위로 올려준다
트러블슈팅 3.
Form -> 개인정보 페이지 이동했다 돌아오면 정보 그대로 있게,
Link -> 그냥 페이지 이동
useNavigate : ()=>navigate(-1) 으로하면 뒤로가기는 되지만 데이터 보존과는 무관함
-> 페이지를 이동하는 이상 localstorage에 저장해야되는데 폼 데이터가 너무 복잡하고많다고 생각함 + 개인정보인데 localstorage에 저장이옳은가?
-> 그냥 페이지 이동을 취소하고 모달 포탈로 하는게 어떤지
