코멘토 React 실무 PT 3주차 - React 스타일링

LIVE로 배우는 실무 PT ㅣ 코멘토

 

<3주차 요약 >

 

1.디자인 시스템 세팅

 

styles/colors

styles/fonts

styles/GlobalStyle

styles/mixin

styles/theme

 

2.Atomic 디자인

뷰를 Atoms(원자) -> Molecules(분자) -> Organisms(유기체) -> Templates -> Pages 순으로

작은 것들을 만들고, 결합해 좀 더 큰 단위의 뷰를 만들어 나가는 디자인 시스템.

 

3.반응형 웹

 

 

4.프로젝트를 진행하면서 알게 된 점

CSS

1. reset.css를 적용해야 html페이지에서 기본적으로 생기는 양 쪽 끝의 공백이 사라진다.

2. absolute를 쓸기 위해서는 부모의 position을 relative로 지정해야 한다.

그래야 절대적인 기준이 있기 때문에 다른 위치로 튀지 않는다.

3.margin: 0 auto 을 통해 자동으로 가운데정렬을 하자.

4.컴포넌트 간의 사이 간격은 gap을 통해 띄우자.

5.margin: 0 auto 을 통해 자동으로 가운데정렬을 하자.

6.컴포넌트 간의 사이 간격은 gap을 통해 띄우자.

7.스켈레톤을 만들때는 transition 0.5 정도 추가하면 스르륵하면서 바뀌는 효과가 있기 때문에 완성도가 올라간다.

flex-basis

Flex 아이템의 기본 크기를 설정

width를 따로 설정하지 않으면 컨텐츠의 크기

flex-grow

flex-basis의 값보다 커질 수 있는지를 결정

0: 원래 크기

1: 빈 공간도 메움

(1:2:1 등의 비율 설정 시 해당 비율로 빈 공간 메움)

flex-shrink

flex-basis의 값보다 작아질 수 있는지를 결정

0:원래 크기 (flex-basis보다 작아지지 X)

1: flex-basis보다 작아질 수 있음

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성

flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */

 

라이브러리

1.Dayjs가 날짜관련해서 가장 쉬운 라이브러리이니 잘 활용하자.

2.Swiperjs 사용

스와이프 사용시 버튼의 위치를 옮겨야 했는데 이 과정에서 많이 헤맸다.

https://github.com/nolimits4web/swiper/discussions/4219

결과적으로 위의 방법으로 해결.

 

기타

1. 폴더 중 util폴더는 로직과 관련없는 부분을 넣는다.

2. 이미지 불러오는 방법

• public에 asset폴더 추가해서 그 안에 이미지 넣어서 절대경로로.
• src의 경우 이미지가 압축이 된다고해서 많이 선호하는 편.
• require 문법을 통해 import없이 바로 불러오면 코드가 깔끔해진다.

 

Swiper Demos