포트폴리오 리뷰
주소창 readOnly시 변경 불가함 ㅎㅎ 직접 인풋으로는...
defaultValue 말고 value를 사용한 이유가 뭘까??
벨류>디폴트벨류
여서 벨류값이 있으면 디폴트벨류가 못나온다.
value{1||2||3}
1이 없으면 2를 보여주고 2없음ㄴ 3을 보여줌
수정에서
- 라이브러리 사용하기 //완료!
오늘부터는 레이아웃 사용하기!!
그다음은 페이지 처리가 예정되어있음~(무한스크롤(페이지네이션))
레이아웃
UI의 전체적인 구조를 잡아놓기!-->layout
시간단축을위한 방법
모든 페이지에 동일한 css를 주기-->global-Styles
프리캠프때는 폰트어썸, 지금은 이모션에서해보는걸로
porps.children
자동으로 children 이라는 이름이 붙어서 들어감.
컨포넌트또한 마찬가지임
레이아웃? =UI배치
고정된 부분을 레이아웃을 부른다.
->app.tsx화면과 연동함!
변경되는부분을 어떻게 넣을 것인가??
porps.children해서 넣을거다아!!!
레이아웃을 사용하면 유지보수 할때도 간단하고,
페이지가 많으면 많아질수록 효율적이다!
그렇다면 특정페이지에서만 헤더가 안보이게 하는방법은???
조건부렌더링!
const HIDDEN_HEADERS=[
"/12-05-madal-refactoring"
]
const isHIDDEN = HIDDEN_HEADERS.includes("현재주소")
<>{!isHIDDEN && }
글로벌 스타일
모든컴포넌트에 스타일을 한번에 주고싶을떄사용
약간 기본설정 느낌?(디폴트벨류취급) 이어서 안에서 폰트사이즈나 스타일 변경을하면(벨류취급) 그걸로 바뀜 !!
폰트 다운로드가 느렸던상황에서의 사고
FOIT/FOUT
폰트표현방식에는
포잇방식과 포웃방식이있는데
브라우저마다 사용방식이 다르다
포잇방식의 경우 폰트와 해당 텍스트를 함께 가져오는데, 포잇방식에서 위와같은 사고가 발생
포웃방식은 폰트다운이안되도 텍스트가 나오고 폰트다운후 텍스트를 예쁘게 바꾼다.
용량이 적은것으로 다운받아(압출률 높은) 다운로드시간을 줄임
또는 경량화폰트(서브셋폰트)를 다운받기(단,서류/문서 말고 게시글같은 일상에)
캐러셀==> 리액트슬릭
