220525 프론트엔드 부트캠프 17일차 : Layout, font

  freeboard 리뷰

onChangeYoutubeUrl

onChangeAddressDetail

onClickAddressSearch - setIsOpen이 true로 (모달 visible)

onCompleteAddressSearch

setAddress, setZipcode, setIsOpen

 

value를 지워보면,

state에는 들어가 있는데 화면엔 보이지 않음

직접 입력을 한 적이 없어.

입력을 하면 밸류값에서 꺼내서 가지고 오는 것

 

밸류라는 속성을 입력하게 되면, 밸류값이 거기로 들어가.

address,zipcode는 props로 넘겨줘야 한다.

그리고 value에 바인딩 시켜줘야 한다.

 

value = { props.zipcode }

value = { props.address }

defaultvalue는 수정할 때 필요

 

피그마는 지도 모양에 마우스 올리면 툴팁에 주소 나옴

BoardWrite에서 defaultvalue는 밸류가 없을 때 기본 밸류로 줘라~ 라는 뜻

근데 이미 밸류가 있어! 스테이트는 빈값이지만, 밸류는 있어. 그래서 디폴트 밸류가 무시됨

밸류가 비어있다면, 디폴트 밸류 보여주고 싶어!

value = {props.zipcode ? props.zipcode : props.data?.fetchBoard.boardAddress?.zipcode}

{props.zipcode || props.data?.fetchBoard.boardAddress?.zipcode}

or 연산자 : 이게 있으면 이거 보여주고, 없으면 뒤에꺼 보여줘!

onClickUpdate - 하나도 수정이 안되면 수정한 내용이 없습니다 라고 뜨게 하고 수정하면

updateBoardInput로 보내야지

주소 중 하나라도 바꼈으면 그걸 변경하기 위해 boardAddress key를 만들어서 그 키에 하나씩 추가해준다.

 

  레이아웃

 

수동으로 닫을 수도 있지만 자동으로 닫게 할 수 있습니다.

안에 있는 애한테도 props가 자동으로 넘어가게 된다.(우측의 div) - props.children 이란 이름으로 내려간다.

props.isEdit

 

 

app.tsx 레이아웃이란 컴포넌트를 만들고 그 안에 컴포넌트를 집어 넣겠어.

ex. 등록이면 등록, 상세면 상세로 props.children으로 가져올 수 있다!

 

헤더, 사이드바, 푸터가 고정

바디만 체인지됨

껍데기를 먼저 만들고 그 안에 페이지(컴포넌트)를 넣는 것

 

props.children은 어떤 주소에 접속하냐에 따라 달라지겠지~ 컴포넌트가 바뀌니까

props.children은 컴포넌트를 의미

 

aaa로 주면 레이아웃에서 props.aaa 로 받을 수 있다.

직접 쓰면 중괄호가 두 개인것처럼 보임 왜냐면, ,, 두 개니까..

_app.tsx → global.css에 적용되어 있어~~~~

 

  폰트

fallback font 앞에꺼 없으면 뒤에꺼 적용해줘

 

FOIT FOUT 포잇, 포웃

폰트 다운로드 안됐으면 아예 출력을 안 하는 것

폰트 다운로드 안됐으면 일단 폰트 적용 안 한 상태로 출력하는 것

압축률이 높은 폰트(ex. woff, woff2)

Subset-Font 경량화 폰트

잘 안 쓰이는 글자들 빼고 나머지만 폰트로 만들어 놓은 것

바나나 경량화 폰트, 바나나 폰트 경량화 버전

 

과제 -

npm에 들어가서 react-slick (캐러셀 라이브러리) 다운로드 74만인거

레이아웃 위치는 마음대로

{…settings}는 무시하고 하세요.

위에있는 옵션을 여기다가 넣어준다~ 라는 내용

 

왜 emotion을 쓰나요?

styled-component 많이 사용하다가 emotion으로 넘어옴. 거의 비슷하고 emotion이 최근에 나왔습니다~!

기존의 방식들, styled-component 간의 차이 : css 파일 따로 관리하고 HTML에 먹이냐? css in js 방식 사용

자바스크립트 변수에 넣어서 사용함 1. 태그에 의미를 부여할 수 있다. 2. 코드가 간결해진다.

 

  캐러셀 넣기

 

npm install react-slick —save // 또는 
yarn add react-slick

npm install slick-carousel —save

쓸 페이지에서

import "~slick-carousel/slick/slick.css"; // mac에선 맨 앞에 물결을 뺀다.
import "~slick-carousel/slick/slick-theme.css"; // 여기도

 

 

 

 공부는 9시간 30분

점심은 부대찌개 `u`짱 맛있어!!!!너무 오랜만이야... 그리고 PF분들과 밥 먹을 수 있어서 행복했고, 밥 먹고 스타벅스에서 음료 사주셔서 유자민트티 먹었다>ㅁ<~ 

 오늘은 친구가 태어난 날이자 누군가 하늘로 간 날 ! 캘린더에는 몇년째 더 행복해지신 날! 1827일째, 시간 빠르다. 엄마랑 맛있는 거 먹어야하는 날이니까 일찍 나왔지만 이 날을 핑계로 일을 미룰 정도로 슬프진 않았다. 기분이 좋진 않았지만 나 많이 좋아진 것 같아~~~비가 왔는데 다행히 맞고 갈 정도여서 그냥 맞고 갔다. 저녁 먹고 집 가는 길엔 폭풍급 비바람,,, 가뭄이었다던데 비와서 다행이다! 오늘 좋은 일만 있었던 건 아니지만... . 아! 그리고 알고리즘 테스트 봤다. 저번주와 급 달라진 난이도에 당황했는데 그냥 내가 공부를 덜해서 그런 것 같기도하네. 30분은 걸렸다,, 요즘따라 시간이 너무너무너무 부족해 주말에 안 해서 그런가봐 다 ㅠㅠㅠ 오늘 늦게까지 하고 싶은데 잠이 쏟아지고 이걸 참고 안 잔다해도 내일 후폭풍이 올 것을 알기 때문에 그냥 잔다..^^ㅎ