코드캠프 Day 13

잠과의 싸움이다.
월요일 화요일은 버틸만한데, 수요일부턴... 힘들다...
알고리즘 테스트가 있었다. 문제를 풀다가 약간 위기를 느끼긴 했지만? 무사히 해냈다.

오늘 배운 것

레이아웃과 글로벌 스타일, 폰트, 배너(캐러셀)을 배웠다. 페이지 전역적으로 쓰이는 레이아웃을 만들어서 app.tsx에 지정해놓으면 어느 페이지에 들어가도 같은 레이아웃을 볼 수 있었다. 만약 특정 페이지에서는 보이지 않기를 원하면

    // 배열의 형태로 숨길 곳의 주소를 넣어준다.
    const HIDDEN_HEADERS = [
        "/12-05-modal-refactoring",
        // . . .
        // . . 
    ]
    
    const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath)

이렇게 설정하면 된다.

글로벌 스타일은 페이지에 쓰일 스타일 default값을 정하는 것이었다. 폰트도 넣었는데, 웹페이지가 폰트를 가져오는 방식 - FOIT(Flash Of Invisible Text : 폰트를 다 받지 않았어도 그려주는 방식), FOUT(Flash Of Unstyled Text : 폰트를 다 받을때까지 기다리는 방식)이 이렇게 나뉘었다. 폰트가 용량이 크기때문! 경량화된 폰트를 이용하도록..

배너부분에 Carousel을 넣는 것은 숙제였는데,
react-slick이라는 것을 이용했다. 그걸 만들려면 엄청 복잡할텐데... 이렇게 쉽게 쓸 수 있다.

게시판 프로젝트 진행상황

레이아웃을 대충 꾸몄다. 하지만 아직 잘 안되는 기능들이 있다.
댓글삭제, 수정, 주소기능 불안정...
경고창 모두 모달로 바꾸기.
내일의 나에게 토스....