실전프로젝트 2주차 일주일간의 정리📙
요즘은 정말 시간이 어떻게 가는지 모를 정도로 너무 빠르게 흘러간다. (날짜,요일개념이 사라지고잇다..)😂
오늘이 일요일인지 생각 못하고 습관적으로 게더로 9시30분에 들어갔더니 사람이 너무 없어 일요일인걸 알았다. 들어간김에 앉아서 궁금했던 배열내장함수(Map,filter), useEffect를 찾아보고 TIL로 정리했다.
실전프로젝트 2주차에 접어들면서 조금씩이나마 내가사용한 기술들에 대한 지식들이 쌓여가고는 있지만, 제대로 정리 정돈이 안되있는 것이 느껴져 틈틈히 정리와 개인공부도 같이 열심히! 병행 해야겠다고 느꼈다. (그래서 오늘 주말이지만 불태웠다..ㅎ)
이번주에 한일을 정리하러 돌아가자면 헤더, 푸터, 입양시주의사항, 입양신청페이지, 입양지식 교육자료, 입양지식 필수퀴즈 페이지를 완성하였다. (여기는 간략하게 쓰고 따로 페이지별로 아래에 자세하게 쓰려한다.)
- 헤더,푸터,입양시 주의사항 페이지를 진행하면서는 뷰를 디자이너분들이 원하는 위치에 놓기위해 flex나 position에 대해 조금 더 자세히 알아갈 수 있었다.
- 입양신청 페이지는 s3에 이미지를 업로드하는 과정에서 자식의 함수를 React Hooks forwardRef, useImperativeHandle를 사용하여 부모에서 사용하여보았다.
- 입양지식 교육자료페이지는 기본,심화,심화2페이지가 있는데 구조가 똑같고 데이터만 반복적으로 뿌려주기때문에 중간단위 컴포넌트를 분리하여 작업하였다.
- 필수퀴즈 부분에서는 객관식 ox 5문제의 사용자가 체크하는 답안을 세션스토리지에 저장하여 새로고침에서도 입력하였던 답안이 없어지지 않게 하였다.
다음주는 MVP(Minimum Viable Product)를 위해 우선순위로 회원가입시 문자인증 서비스, 사용자가 불편하지 않게 사용하기 위한 각 페이지의 추가적인 디테일부분 추가 및 오류처리, css등을 정비할 예정이다.
1. Header, Footer, 입양시 주의사항 페이지
이 페이지들을 진행하면서 Meterial UI에서 아이콘을 가져다 쓰는방법과 아이콘을 올바른 위치로 넣기위해 position, flex에 대해서 조금 더 알아간것 같다.
- position absolute는 부모요소나 조상요소 중 static이 아닌 요소를 기준으로 움직일 수 있다. 헤더푸터의 아이콘을 내가원하는 공간으로 넣기위해 부모요소에 position : relative를 주고 로고를 감싸고있는 div에 position : absolute를 줘서 위치를 조정하였다.
- flex는 로고를 일정한 간격으로 정리하기위해 사용하였는데 display:flex, justify-content : space-between을 사용하였다. flex는 처음에 뷰를 잡을 때 많이 사용하게 되어 조금 더 자세하게 공부 해보았다. 우선 flexDirection이 column(세로)인지 row(가로)인지의 따라서 justify-content가 세로축의 정렬일 수도 있고 가로축의 정렬 일 수도 있다. 기본값은 row(가로)로 정해져있다.
flexDirection이 기본값이row(가로)인 상태에서 justfiy-content를 flex-start, flext-end, center, space-between, space-around로 바꿔주어 모든 요소를 맨앞쪽으로, 맨뒤로, 중간으로, 양끝 빼고 간격 일정하게, 양끝까지 모든간격 일정하게 등으로 위치를 넣어줄 수 있다.(flex참고사이트)
2. 입양신청페이지
입양신청 페이지는 임보자에게 입양신청자가 유기견이 지낼 장소를 이미지로 전달 해주기 때문에 s3에 이미지를 저장해야했다. s3설정하는 방법은 참고사이트를 보고 적용했다. (aws s3설정 참고사이트)
페이지를 작업하던 중 자식 컴포넌트 Upload3에 있는 사진을 s3로 업로드시키는 함수를 부모컴포넌트로 넘겨서 입양신청 버튼이 클릭 될시에만 사진을 업로드되게 하고싶었다. 검색을 하던 중 React Hooks forwardRef, useImperativeHandle을 발견하였고 아래 이미지처럼 적용하여 입양신청버튼이 클릭시에만 사진이 업로드 되게 하였다.
- 부모컴포넌트에 imageRef를 만들어 준 뒤 ref를 Upload3의 props로 넘겨줌
- 자식컴포넌트에 forwardRef, useImperativeHandle 적용하여 upload함수를 사용할 수 있게 하였다.
3. 교육자료 페이지
입양 지식 교육자료 페이지는 번호하나당 지식이 텍스트와 이미지가 반복되기 때문에, 세부 컴포넌트 EssentialComponent로 만든뒤 교육자료 데이터를 세부컴포넌트 EssentialComponent에 map으로 넣어주었다. 그리고 EssentialComponent에서 해당 부분에 데이터를 배치시켜서 만들었다. 이렇게하면 나중에 심화지식자료를 만들때도 재사용 할 수 있게 된다. 그런데.. 디자이너 님들이 지식자료 텍스트에 시력이 안좋으신분들을 위해 중간중간에만 볼드가 들어가야한다며 일일이 span으로 써서 제작해 달라고 하셨다.. 재사용성이 있는 컴포넌트로 쪼개보아서 기분이 너무좋았지만 고객님들과 우리의 프로젝트의 완성도를 위해서 다시 span으로 돌릴 예정이다.
4. 필수퀴즈 페이지
필수퀴즈 페이지는 총 5문제의 ox 객관식 문제를 풀고 모두 맞으면 넘어가고 안맞다면 다시 풀게되는 방식이었다. 우선 새로고침시에 데이터가 날아가는 리덕스의 문제를 해결하기위해 리덕스 persistence를 사용하려 했으나 아직 나에겐 너무 어려워 다른방법을 선택하였다. (다음 프로젝트때는 사용할 수 있기를)
바로 sessionstorage에 각 문제의 답안을 저장한뒤 마지막 채점 버튼에서 꺼내오는 함수를 실행시키고 퀴즈의 정답과 채점 하는 방식을 이용하였다. 그리고 문제 진행을 나타내는 프로그래스바도 sessionstorage의 length를 이용하여 나타내었다.
- 세션에 저장된 정답과 퀴즈의 정답이 배열로 둘다 배열로 되어있어 JSON.stringify에 각 배열을 넣고 비교하였다.
- 진행한 퀴즈 사진
- 참고 사이트
flex참고사이트
aws s3설정 참고사이트
