<07.26> TIL

전일 과제 리뷰

• 모달을 작동시키는 코드는 상단으로 올리는 경우도 많다.
  -> 전체적인 페이지 작동의 흐름을 파악하기 쉽기 때문이다.

• 등록하기 버트을 눌렀을때 주소가 추가되게 한 모습

• 마우스를 올렸을 때 작성한 주소가 보이게 설정한 모습.(툴팁 활용)
  -> 옵셔널체이닝 사용시 ? 의 위치가 굉장히 중요하다.

레이아웃 구조

: 레이아웃 = UI의 구조

• 기본적인 레이아웃의 구조는 이러하다.

• 이런식으로 레이아웃 컴포넌트를 이용하여 레이아웃을 만들어 나간다.

props.children?

• 위 처럼 자식 Tag에는 자동으로 children이라는 명칭이 붙는다.

Layout 실습

• 모든페이지에 공통적으로 레이아웃이 그려진 모습.

• 이런식으로 각 영역에 들어갈 레이아웃을 컴포넌트로 만들어 폴더로 정리한 모습.

• 이런식으로 만들어 놓은 각 컴포넌트를 이용하여 레이아웃을 사용한 모습.

• emotion을 이용하여 바디 부분에 적용한 모습
  -> 이런식으로 일괄적으로 모든 자식태그 (children) 에 emotion을 적용할 수도 있다.

Globalstyle : 글로벌스타일

• app.tsx파일에 global을 추가해주고 공통 소스 폴더에 글로벌 스타일 파일을 만들어 Import시켜주었다.

• 공통 소스 폴더에 만든 글로벌스타일 파일 모습.

Font 사용법

: 사용하고자 하는 font파일을 public폴더에 넣어주고 @font-face 라는 코드로 폰트명을 선언해준 후 원하는 곳에서 사용하면 된다.

• 글로벌스타일 파일에 다운받은 폰트 파일의 경로를 설정해주고 선언해준모습.
  -> 선언해준 폰트를 원하는곳에 가져다 쓰면 된다.

• *태그에 폰트를 적용하면 모든 화면에 폰트를 적용시킬 수 있다.
  -> 이 경우 폰트가 한글과 영어를 모두 지원하는지 확인 할 필요가 있다.

캐러셀 라이브러리

• react-slick이라는 파일을 다운받아 주었고 설명서에 맞게 css까지 설정해주었다.

• 설치한 파일 (슬라이더)을 설정해준 모습 -> 사용 설명서에 나와있는 설정 부분까지 복사해서 넣어주어야 한다.