FrontEnd :-)

WIL 9 본문

항해99_7기/WIL

WIL 9

code10 2022. 7. 10. 22:24
항해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
Comments