12일차 포트폴리오 리뷰
댓글 삭제
클릭하면 Modal이 실행되는 함수, 비밀번호를 받아오는 State 필요
삭제버튼에 id를 만들어서 id값 저장 필요
댓글 목록 refetch필요
주소 등록
게시글 등록 컨테이너
onClickAddressSearch를 작동하면 SetIsIOpen이 true로 바뀌며 주소검색창이 열린다. -> SetIsOpen을 State로 선언, 기본값은 false
주소를 클릭하면 onCompleteAddressSearch가 실행 -> data를 받아오고 State에 주소랑 우편번호를 저장하고 data를 받아오고 SetIsOpen이 false로 바뀐다.
createBoardInput 안에 boardAddress: { zipcode, address, addressDetail } 을 추가
updateBoardInput 안에 boardAdress를 넣어줘야하는데 boardAdress안에 zipcode, address, addressDetail가 있으므로 updateBoardInput.boardAddress으로 감싸준다.
if (zipcode || address || addressDetail) {
updateBoardInput.boardAddress = {};
if (zipcode) updateBoardInput.boardAddress.zipcode = zipcode;
if (address) updateBoardInput.boardAddress.address = address;
if (addressDetail)
updateBoardInput.boardAddress.addressDetail = addressDetail;
}게시글 등록 프리젠터
우편번호(readOnly), 상세주소(readOnly), 상세주소(입력)
props로 isOpen을 넘겨오고 DaumPostcode를 Modal로 감싸주기
상세주소(입력)는 onChange로 입력값 받아와야함
수정하기 할 때 필요한 fetchBoard에서 넘어온 상세주소(readOnly) data의 defaltValue는 value 안에 넣어서 같이 합쳐놓았는데,
defaultValue는 작동하는 게 맞지만 value가 있을 경우에는 value가 먼저 작동하기 때문에 덮어씌워지기 때문이다.
Layout
UI의 배치
고정된 부분을 Layout이라고 부른다.
다양한 레이아웃
헤더 , 배너, 네비게이션, 바디
바디만 바뀔것이기 때문에 페이지 컴포넌트 안에 얘만 넣으면 좋을거같은데 어떻게 넣을것인가
props.children를 사용!
글로벌 css를 사용하면 전체 css를 줄 수 있음.
a href 태그는 새로고침하면서 페이지 이동이 되므로 좋지 않다.
Cascade Style-Sheet
가장 최상위 부모에 스타일을 정의해놓고 자식들이 덮어쓰게 되는 구조
우측처럼 부모에 스타일을 정해놓고 좌측처럼 스타일을 받아올 수 있다.
Font 다운로드
import를 다운받아오는데 속도가 오래걸려서 첫 화면이 좌측처럼 나오는데, 다운을 받아오고 리렌더를 하면 보이게 된다.
이런 일이 생기면 문제가 생김!
보이는 것만 먼저 보여주는 FOIT 방식
폰트가 아직 안받아졌으면 일단 default로 보여주고, 다 받아오면 보여주는 FOUT방식
압축률 높은 폰트 다운받기
동일한 폰트지만 압축률이 높은 폰트 받기
경량화 폰트 다운받기
Subset-Font
'폰트이름 + 경량화 다운로드' 검색해서 다운받아서 사용하기
react-slick
docs들 참고하고 배너부분에 react-slick 사용해서 적용시키기
