React !!!!!!!

scss : css 전처리기

Nesting

: Nesting 의 뜻은 '중첩' 이다.
css의 충돌을 방지하기 위해 Nesting 은 중요하다.
부모 스타일 요소 안에 자식 스타일 요소들이 품어지고, scss 만으로 html 구조도 파악할 수 있다. 그로 인해, 가독성과 유지보수가 쉬워진다!
(실제로 아이디명 중복으로 충돌되어 사진이 에러가 뜬 경험을 겪었다)

@mixin 은 스타일블록이다. 변수명으로 사용할 수 있다👇🏻

👇🏻 @mixin 적용한 모습

CRA 로 만든 리액트 내 폴더에서 이미지는 어떻게 관리하여야 하는가?

public 폴더

어느 컴포넌트에서나 사용될 수 있는 이미지들
서버에서 받아와서 써야하는 이미지들

src 폴더

해당 컴포넌트에서 사용되는 이미지들
컴포넌트마다 고정되어 있는 이미지들(화면 변동에 따라 바뀌지 않는)

* 폴더 내 정리방식은 회사 컨벤션 따라!

컴포넌트를 분리하는 기준?

1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들

+ 사용자가 잘못된 경로의 페이지를 들어갔을 경우, 잘못된 경로라는 것을 알려줄 페이지를 만드는 것도 프론트의 할 일!