Emotion 라이브러리 설치
📌 Emotion: 대표적인 CSS in JS 라이브러리 JS 안에서 CSS를 만들기 때문에 State에 맞게 동적으로 CSS를 변경할 수 있다.
emotion/styled?
The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.
styled.div사용을 선호하는 경우에 style API를 사용하면 된다. 나같은 경우도 div 태그를 자주 사용하게 될 것 같아서 emotion/styled 설치를 바로 진행했다. $npm i --save @emotion/react @emotion/styled
Reset CSS란?
📌 Reset CSS란 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것
:focus[data-focus-method='mouse']:not(input):not(textarea):not(select),
:focus[data-focus-method='touch']:not(input):not(textarea):not(select) {
outline: none;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
어디에 import 해주면 될까?
가장 상위의 index.ts 파일에 import해서 사용해주면 된다.styles/index.ts
import './reset.css';
import './font.css';
export * as vars from './variants';
별도의 ts 파일로 변수 관리하고 꺼내쓰기
📌 styles/variant/index.ts
- 반응형 웹을 위한 breakpoint
export const breakpoints = {
initial: '0',
xs: '520px',
sm: '768px',
md: '1024px',
lg: '1280px',
};
- 색상 변수 colors
export const colors = {
lightGray: 'rgb(250, 250, 252)',
};
- 폰트 사이즈 fontsizes
export const fontsizes = {
initial: '16px',
sm: '12px',
df: '16px',
lg: '20px',
};
🌿CSR과 SSR
❓ 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR)?
- SSR: 서버 쪽에서 렌더링을 하여 화면을 보여주는 방식이다. 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면이 렌더링 되는 속도가 빠르다.
- 서버가 렌더링된 HTML 파일을 보내면 브라우저가 받음 ⇒ 브라우저가 페이지를 화면에 띄워주고 JS 파일을 다운 ⇒ 브라우저가 React 프레임워크 실행
- CSR: 클라이언트가 렌더링을 하는 방식, 여기서 클라이언트는 브라우저를 뜻한다. SSR과 달리 HTML 파싱부터 JS 읽기까지 브라우저에서 하기 때문에 첫 화면 띄우는 시간이 좀 걸린다.**SPA(Single Page Application)**도 이와 밀접한 연관이 있는데, SPA는 처음 한번 페이지 전체를 로딩한 후에 필요할 때만 데이터를 바꿔서 화면에 렌더링하는 방식이다. 이 또한 CSR에 해당된다.
❓ CSR의 장점은 무엇일까? 첫 페이지 로딩은 SSR에 비해 다소 느리지만, 추후 페이지 로드 시간(구동 속도)이 더 빠르다. 매끄러운 사용자 경험을 할 수 있다는 점이 장점이다.
✔️라우팅
❓ SPA에서 라우팅을 사용하는 경우, 어플리케이션에 진입할 때 받은 리소스들에 라우팅 작업을 처리해줄 수 있는 클라이언트 라우터가 포함되어 있다. 이후에 사용자가 경로를 이동하는 등 작업을 하게 되면 서버로 요청을 보내는 것이 아니라, 클라이언트 라우터에서 처리를 대신 해주는 것이다.
❓ react-router 구현체
경로별로 route들을 세팅해둔다. (BroweRouter 기준)
<BrowserRouter basename="/app">
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/login" element={<Login />} />
...
</Routes>
</BrowserRouter>
BrowserRouter는 HTML5의 History API(pushState, replaceState, popstate event)를 사용하여 URL과 UI를 동기해주는 <Router>이다. 이는 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해주고, 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 한다.
❓ React-router와 React-router-dom의 차이
React router는 특정 플랫폼(웹이나 네이티브 앱 등)에서 라우팅 기능을 지원하기 위해 설계되었다. 이 React router를 사용하여 웹앱을 개발할 때 일반적으로 웹 브라우저와 상호작용하고 웹에서의 라우팅을 처리하기 위한 도구가 필요했다.
그래서 등장한 것이 React Router DOM! React Router DOM은 리액트의 컴포넌트와 함께 사용되며, HTML5 History API를 사용하여 브라우저 주소 표시줄을 관리하고 URL 경로에 따라 컴포넌트를 렌더링한다. 링크를 생성하고 활성 상태를 관리하는 등 웹 브라우저에서의 라우팅에 필요한 기능을 제공한다.
정리하자면, React Router DOM은 React Router를 기반으로 하여 웹 개발을 위한 여러 추가 기능들을 제공한다. React Router만 사용하는 경우는 보통 SSR과 같은 환경에서 라우팅 처리 시 사용된다.
'FE > 코딩일기' 카테고리의 다른 글
🌳7월5일 TIL🎶 (1) | 2024.07.05 |
---|---|
🌳7월4일 TIL🎶 (0) | 2024.07.05 |
🌳7월3일 TIL🎶 (0) | 2024.07.03 |
🌳7월1일 TIL🎶 (0) | 2024.07.01 |