styled-component와 AntDesign 함께 사용하기
styled-component와 AntDesign 함께 사용하기 AntDesign 설치 npm install antd 기본 셋팅 전역으로 쓰일 AntDesign의 css(antd/dist/antd.css)는 styled-component로 만든 global-style.ts에 넣어줬다. styled-component 셋팅하기 import { createGlobalStyle } from 'styled-components'; import { reset...
react에 다국어 기능 적용하기(i18next)
react에 다국어 기능 적용하기 react 프로젝트에 i18next를 사용하여 다국어 기능을 구현해보자. 일단 패키지 설치 i18next와 react-i18next 두가지를 설치해준다. npm install react-i18next i18next 타입스크립트에 적용할때 설치 npm i i18next @types/i18next react-i18next...
Next.js에 styled-components 사용하기
Next.js에 styled-components 사용하기 next.js에 styled-components를 사용하기에 앞서 두가지 모듈을 설치해줘야 한다. 설치 npm i styled-components npm i styled-reset 내가 원하는 스타일로 화면을 그리고 싶다면 일단 브라우저가 기본적으로 가지고 있는 스타일을...
Next.js + TypeScript + ESLint + Prettier 프로젝트 설정하기
Next.js와 TypeScript로 프로젝트 구성하기 nextjs 프로젝트를 설치 일단 nextjs 프로젝트를 설치한다. npx create-next-app '프로젝트명' 따로 폴더를 생성하지 않고 현재 위치에 프로젝트를 만들고 싶을 경우 npx create-next-app . nextjs 에 typescript...
react 합성(Composition)
react에서 합성(Composition)이란? 아주 간단히 말하면 component안에서 컴포넌트를 모아서 출력하는 것. 컴포넌트를 설계할때 고려해야할 부분들이 있다. === 컴포넌트에 다른 컴포넌트를 담기 합성 (Composition) vs 상속 (Inheritance) react composition 공식문서 살펴보기 담는...