이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.
made in 중국, 뷰, 리액트에서 다 사용가능하다. 단점은? 느낌이 너무 확일화. 개성이 없어진다. 디자이너가 있거나 체계가 있는 곳은 거의 쓰진 않는다. Ant Design of React - Ant Design
여러가지 방법이 있다. 순수 css 사용하기, sass 등의 전처리기 등등 . 하지만 보통 리액트와 같이 컴포넌트 형식으로 개발하는 곳에서는 스타일드 컴포넌트 styled-components 를 주로 사용한다. (컴포넌트 자체에 css를 미리 입혀서 사용함)
어떤 걸 사용하는 건 많이 중요하진 않다. 하지만 요즘엔 스타일드 컴포넌트도 한물 가서 emotion emotion이라는 것을 많이 사용하기도 한다.
→ 서버사이드에서 사용할 때 이모션이 더 쉬울 수도 있다.
emotion vs styled-components | npm trends
npm i antd styled-components @ant-design/icon
icon 추가 설치한 이유 : 보통 이미지 파일들이 앱의 용량을 결정한다. 아이콘은 따로 최적화해서 라이버리를 분리한 경우도 많다. 따라서 추가로 설치해야 함.
_app.js
와 Head공통된 내용을 처리할 수 있다.
import Head from 'next/head'
next에서 head 를 수정하고 싶을 때 Head 컴포넌트를 사용하면 된다.
반응형으로 할 때는 무조건 모바일 디자인을 먼저 해야 한다. 점점 늘려서 테블릿 → 데스크탑 으로 해야 한다. 데스크탑부터 하면 브레이크포인트 설정이 복잡해진다. 무조건 모바일부터 디자인 하는게 효율적으로 좋다.
컬럼 사이에 간격을 주는 것이다. 이 용어는 프론트엔드 개발할 때는 알아놓는게 좋다. 컬럼끼리 따닥따닥 넣는 것을 방지한다.
서버가 없는데 어떻게 로그인을 할 수 있을까? 못한다. 그럼 더미데이터를 사용하면 된다. state 상태 사용해보자. hooks가 나오면서 리액트 공식 페이지에서 컴포넌트랑 컨테이너 구분하는 것을 추천하지 않는다고 한다. 컴포넌트에 프롭스로 넘겨주는 함수는 유즈콜백을 꼭 사용해야 한다. 그래야 최적화가 된다.
트랜드 비교하는 사이트 유용하다..👍