일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- D반8조
- 사전준비
- 웹개발종합반
- TS
- TDD
- 맥린이
- 실전프로젝트
- 멍친구
- 7기
- 리액트
- 챗GPT
- typeScript
- rn
- ReactNative
- REACT
- 알고리즘기초주차
- 프로그래머스
- 코린이
- Programmers
- 항해99
- 필수강의
- 프론트엔드
- 팀워크최고
- 알pdf #파일탐색기미리보기안될때
- Expo
- 달리기반
- ChatGPT
- 스파르타코딩클럽
- Ai
- NotionAI
- Today
- Total
FrontEnd :-)
WIL 9 본문
항해99 57일차 | 2022. 7. 4.(월) | 실전프로젝트 (프론트2+백3+디자이너1 협업) | D반 - 실전프로젝트 8조(6명), 메인 페이지 애니매이션, 상세페이지 계속 JS 스터디 |
항해99 58일차 | 2022. 7. 5.(화) | 실전프로젝트 (프론트2+백3+디자이너1 협업) | D반 - 실전프로젝트 8조(6명), 상세페이지 계속, 프론트 회의 JS 스터디 |
항해99 59일차 | 2022. 7. 6.(수) | 실전프로젝트 (프론트2+백3+디자이너1 협업) | D반 - 실전프로젝트 8조(6명), 메인페이지(1440px기준) 뷰 완성, 푸터, 프론트-백 통합 테스트(상세페이지 apply C까지 테스트 성공) JS 스터디(회의때문에 불참) |
항해99 60일차 | 2022. 7. 7.(목) | 실전프로젝트 (프론트2+백3+디자이너1 협업) | D반 - 실전프로젝트 8조(6명), 기술 멘토링 사전 노트 작성, 기술매니저 1:1 면담, 상세페이지 매칭완료/매칭취소 JS 스터디 |
항해99 61일차 | 2022. 7. 8.(금) | 실전프로젝트 (프론트2+백3+디자이너1 협업) | D반 - 실전프로젝트 8조(6명), 2차 기술멘토링, 상세페이지 후기 모달창 사진추가/미리보기 기능 구현 계속 JS 스터디 |
항해99 62일차 | 2022. 7. 9.(토) | 실전프로젝트 (프론트2+백3+디자이너1 협업) | D반 - 실전프로젝트 8조(6명), 다음주 스케쥴 논의, 상세페이지 유저 정보 모달 생성, 리액트 트러블슈팅 특강 JS 스터디 |
항해99 63일차 | 2022. 7. 10.(일) | Weekly I Learned 작성, 산책, 과제 | D반 - 실전프로젝트 8조(6명), 디자이너 서면 피드백! |
실전 프로젝트를 진행하며 기술적으로 막혔던 부분은? 해결했다면 어떻게 해결했나?
한 주 회고
1. 헤더 CSS, 메인페이지만 다르게
App.js에 공통으로 Header 컴포넌트를 적용시켜 놨는데, 메인페이지에서만 헤더에 배경색이 달라야 했다. 페이지별로 헤더를 불러와도 됐지만, 그건 너무 비효율적인 일인 것 같아서 방법을 계속 찾았다. 또, 메인 페이지에 헤더를 불러오니 모달창 규격이 달라지는 문제도 있었다.
고민하다가 배경에다가 CSS를 이리저리 다뤄봤는데, 해결하고보니,.. 별 거 아니었다.
이미지를 헤더부분까지 덮히도록 헤더의 height 만큼 -값으로 조정했고(물론 배경이미지가 헤더 부분까지 고려된 사이즈여서 가능)
z-index로 이미지를 뒤로 보냈다. z-index에 -값 주지 않으면.. 모달창이 배경이미지보다 뒤로 가서 보이지 않는다.
(포지션은 relative)
top: "-4.5em", : 이미지 올림..
zIndex: "-1", : 모달창도 해결: 배경 뒤로 보내기…
헤더 컴포넌트를 옮기네 마네 했던 생각은 정말이지.. 어리석은 일이었다 ㅎ
2. 자주 만나는 오류
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
이렇게 작성하면 위와 같은 오류가 발생한다. 버튼 안에 버튼이 있으면 안되는데.... WriteModal 컴포넌트에 버튼 요소가 있었다.
<div>
<button onClick={openApplyModal}>
후기작성
<WriteModal
children="후기작성"
open={applyModal}
close={closeApplyModal}
/>
</button>
</div>
해결 =>
<div>
<button onClick={openApplyModal}>후기작성</button>
<WriteModal
children="후기작성"
open={applyModal}
close={closeApplyModal}
/>
</div>
3. map - 옵셔널 체이닝
파일을 수정하면 정상적으로 나왔다가, 새로고침하면 map을 읽을 수 없다는 오류가 뜸!!
data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문.....!
옵셔널 체이닝으로 문제 해결!
https://writingcode.tistory.com/83
4. formdata를 이용해 이미지를 서버에 올리는 부분
(코드를 짜긴 했는데, MockAPI로는 테스트가 불가하고.. 코드가 마음에 들지 않아서 다시 볼 생각이고, 블로그 다른 글에 따로 정리할 예정)
'항해99_7기 > WIL' 카테고리의 다른 글
WIL 11, 12 (0) | 2022.07.25 |
---|---|
WIL 10 (1) | 2022.07.17 |
WIL8 (0) | 2022.07.04 |
WIL7 (1) | 2022.06.26 |
[TIL] CI/CD (0) | 2022.06.24 |