FE32

jae·2022년 6월 22일

https://www.choonsikdiary.com/

이래저래 찾아보다가 본 사이트..
웹으로요..? 이렇게요...?

이거 뭔데...이거 어떻게 하는건데...

그리고 요즘 계속 잔디 심는걸 까먹는다
머리에 힘좀 주고 다니자

memoization

뭔가 다른 파일명으로 해놓고 접속할 때 주소설정 방법!
index는 별도 파일명을 안적지만
다른 파일명은 그걸 주소창에 넣어준다

render 시 변수가 새로 만들어지는 상황
함수가 새로 만들어지는 상황
부모 리렌더 시 자식도 리렌더 되는 상황

이렇게 변수와 스테이트로 각각 카운터를 만들었는데
변수로 만든 함수는 올려도 콘솔에서는 카운터가 올라가는 것을 확인 할수 있으나 jsx에서는 확인 할 수가 없다...!
그리곤 스테이트 함수를 실행할경우 변수의 카운터는 초기화되고 컴포넌트를 리렌더 시킨다.

React Developer Tools

설치하고나서 render를 체크하면
리렌더가 될때 렌더가 되는 곳은 페이지에서 표시가 된다

녹화를 누르고 페이지를 다루면
렌더가 된 부분은 개발자도구에서도 저렇게 색상이 변경된다.

프리젠터는 임폴트해서 컨테이너에 넣고 컨테이너를 렌더링해도
프리젠터는 렌더링이 되지않는다

메모이제이션(Memoization

불필요한 렌더링을 줄이기 위해 memo라는 것을 이용

메모의 종류

컴포넌트 메모 : 리액트 메모
변수 메모 : useMemo
함수 메모 : useCallback

반응형 웹 만들기 (미디어 쿼리)

최근 대세가 된 반응형이지만
사이트의 모든 페이지를 반응형으로 만들진 않는다.
많은 정보를 보여줘하는 메인(네이버나 다음등등)은 적응형을 쓰는 곳이 많고

적응형의 경우 중요하게 보여주려는 블록옆에 여백을 두어
적응형이여도 작은 노트북이나 화면에서도 보일 수 있게 해두는 경우가 많다.

반응형의 기획

아이콘이나 이미지 등등 페이지의 크기에 따라 커지거나 작아지게 할것인지
아님 위치를 변경 할 것인지를 기획에서 정해야한다.
정아니면 이미지크기를 작게하다가 어느정도가 넘어가면 위치가 변경된다든지

이부분을 정해야하는데 기획에서 놓치는 경우가 많으니 그 부분은 정해놓고 가야한다

반응형 구분,단위

반응형 구분 : 모바일 태블릿 pc

width 를 지정할 때

vw: 브라우저 폭에 비례한 %단위
em: 내 폰트 사이즈에 n배
rem : html의 기본 폰트 사이즈(16px)에 곱하기 된 단위 10rem=160px 옛날 브라우저에서 글자 크기를 키우면 레이아웃이 깨졌는데
rem을 사용하면 기본 단위가 폰트사이즈가 되기에 레이아웃이 깨지지는 것이 적어서 사용했음
typography 디자인 시 px을 외우기 어렵다면 사용

height를 지정할 때

vh - 브라우저 폭에 비례한 % 단위

Midia query 문법

@media screen and (max-width: 1200px){ .main-title {width :50%~ font-size 30px;}}

자주 쓰는 폭(breakpoint)
1200px 태블릿
992px 태블릿,모바일
768px 모바일
576px 모바일

폭은 큰것부터 작은 것으로 작성해야하며 3개를 넘기지 않는 것이 좋음
4개 다 사용시 스타일을 관리 하기가 힘들기에
1200px, 768px 이렇게 두개만 골라서 1200px 이하는 태블릿, 768이하는 모바일으로
디자인하는 것이 가장 간편하기에 min과 max를 설정할때 폭을 보고 지정하는 것이 좋음

css 맨 밑에 위의 코드를 입력.
현재 브라우저 폭이 1200px이하에서는 width를 50%폰트 사이즈를 30px로 만드는 코드
하나의 문법에 클래스를 여러개 추가하는 것이 가능하며
폭을 변경하여 문법을 여러개 사용하는 것 또한 가능함.
screen 대신 print를 사용 시 화면 프린트 할때의 사이즈를 지정 가능