1개월 인턴 기간 중 디자인에 나와있는 font를 Typography로 모듈화 하고 사용하라는 피드백을 받았다.  1. MUI 설치// with npmnpm install @mui/material @emotion/react @emotion/styled// with yarnyarn add @mui/material @emotion/react @emotion/styled 2. src/thme.ts 생성createTheme을 사용해 커스텀 가능 디자인에 나와있는 스타일 적용 예시) postercomponenets로 HTML 태그도 지정 가능// src/thme.ts"use client";import { createTheme } from "@mui/material";export const theme = creat..

1개월 인턴 진행 중 백엔드에서 배포를 진행하기로 했는데 프론트에서 도커 이미지 파일을 생성해서 주어야 한다는 답변을 받았다. 그래서 그 과정을 기록하려고 한다. 1. 도커 설치 (Windows 기준)https://www.docker.com/products/docker-desktop/ Docker Desktop: The #1 Containerization Tool for Developers | DockerDocker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows, or Linux.www.docker.com링크 접속 후 다운..

NextImge를 사용하는 이유? 이미지를 Next자체에서 최적화시켜 준다. 장점 Loder를 통해 url을 커스터마이징 할 수 있다. next.config.js를 통해 지정한 경로로만 이미지를 받아올 수 있어 악의적인 접근을 예방한다. 이미지 캐싱을 자동으로 해주며, expiration time(만료 시간) 설정이 가능하다. 자동 스켈레톤 UI (placeholder를 통해) , CLS 방지 가능 !! CLS? => 사이트가 loading 될 동안 height가 0이었다가 UI가 그려지면서 레이아웃이 흔들리는 현상. 자동으로 Lazy Loading(늦은 로딩)을 통해 이미지 최적화를 지원해 준다, pre-loading을 원하는 경우 취소 가능 필수 Props 1.src 정적 import 하는 이미지 파..

리액트 프로젝트와 TS 설치하기 npx create-react-app "이름" --template typescript #or yarn create react-app "이름" --template typescript 기존 프로젝트에 TS 설치하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest #or yarn add typescript @types/node @types/react @types/react-dom @types/jest 컴포넌트 함수의 타입 타입스크립트로 함수를 작성할 땐 함수의 매개변수와 return값의 type을 지정한다. 함수 컴포넌트의 타입 지정 ( React.FC ) //app.tsx c..

TanstackQuery? 기존 ReactQuery에서 v5부터 출시된 새로운 버전이다. React에 국한되지 않고 다른 프레임워크(Vue, Svelt 등)에서도 사용 가능하게 나왔기 때문에 TanstackQuery로 이름이 바뀌었다. 기존 ReactQuery에서 많이 달라진 점은 없기 때문에 핵심 개념은 동일하다. 기본 세팅 1. install $ npm i @tanstack/react-query # or $ yarn add @tanstack/react-query 2.Provider import { QueryClient, QueryClientProvider} from '@tanstack/react-query' // Create a client const queryClient = new QueryClie..

장점 ClassName을 고민하지 않아도 된다. 쉽게 반응형 페이지 구현을 도와준다. (기본제공하는 BreakPoint 때문) 직관적이며 빠르고 수월하게 스타일 작업이 가능하다. 반복되는 스타일은 추상화가 가능하다. 단점 스타일이 많이 들어가면 가독성이 굉장히 떨어진다. 미리정의 된 스타일 시트 (CSS 파일)의 용량이 굉장히 커진다. Class가 출현한 빈도/순서에 상관없이 정의한 순서에 따라 스타일을 구성한다. 동적 스타일링을 위한 자바스크립트 변수의 활용이 불가능하다. 예시 코드 w-96 테일윈드를 써서 개발할 때는 정해진 단위가 있기 때문에 공식사이트에서 quickSerch를 제공하니 검색해 보면서 적용하면 금방 능숙하게 쓸 수 있을 것 같다.