중첩 라우팅 중첩 라우팅이란 라우팅 맵핑을 최상위 컴포넌트만이 아니라 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다. 웹 페이지의 헤더는 계속 고정해두면 되기 때문에 아래처럼 쉽게 구현할 수 있다. 하지만 다음과 같은 상황에서는 어떨까? 메인페이지와 마이페이지 마이페이지에서만 사이드 바를 띄우고 싶음 사이드 바에서 항목을 클릭하면 마이페이지 내부에서 또 다시 라우팅을 하고 싶음 사이드 바는 고정 react-router-dom에서 Outlet 기능을 제공하는데, 우리는 이를 사용해서 원하는 대로 구현할 수 있다. 공식문서에서 설명하는 것을 토대로 기본 예제를 만들면서 알아보자. 우선 Router를 아래와 같이 설정해준다. const AppRouter = () => { return ( ); }; ..
항상 MUI만 사용해왔던지라 tailwindcss는 처음 사용해보는데, 앞으로도 많이 사용할 것 같아 초기 설치단계부터 적용까지 정리해두면 좋을 것 같다. Tailwindcss 설치 tailwind와 필요한 의존성을 모두 설치한다. yarn add -D tailwindcss postcss autoprefixer Tailwindcss 설정 npx tailwindcss init -p 이를 실행하면 자동으로 postcss.config.js와 tailwind.config.js 파일이 생성된다. postcss.config.js는 그대로 두고, tailwind.config.js 파일을 아래와 같이 수정한다. /** @type {import('tailwindcss').Config} */ module.exports =..
React 개발 환경 구축은 아래 글을 참고하면 된다. [React] CRA 없이 React 개발 환경 구축하기CRA(Create React App) CRA로 리액트 개발 환경을 구축하는 방법은 여기서 볼 수 있다. 단번에 TypeScript 설정까지 끝낼 수 있는 아주 간편한 방법이다. 이번에는 CRA 없이 개발 환경을 구축해보려 한다. Rearinn-story.tistory.comCRA로 프로젝트를 생성하면 따로 설정할 것 없이 Typescript는 지원되고 eslint도 적용된 부분이 있는데, 나는 CRA를 사용하지 않았기 때문에 eslint, prettier 하나씩 설치 및 설정해보려 한다. Eslint?코딩 스타일 도구이다. tab 설정이나 세미콜론의 여부 등 작은 부분부터 JavaScript ..
CRA(Create React App) CRA로 리액트 개발 환경을 구축하는 방법은 여기서 볼 수 있다. 단번에 TypeScript 설정까지 끝낼 수 있는 아주 간편한 방법이다. 이번에는 CRA 없이 개발 환경을 구축해보려 한다. React 설정 yarn init yarn add react react-dom TypeScript 설정 타입스크립트가 전역으로 설치되어 있다면 tsc --init 을, 해당 프로젝트에만 설치되어 있다면 경로를 직접 명시한다. yarn add -D typescript @types/react @types/react-dom node_modules/.bin/tsc --init init을 하면 tsconfig.json 파일이 하나 생기는데, 여기서 자신이 원하는 대로 설정을 하면 된다...
[Study] TDD란 무엇일까? [Study] TDD란 무엇일까? TDD란? TDD는 Test-Driven Development의 약자로, 테스트 주도 개발이라 한다. 개발을 한 후에 테스트하는 방식이 아닌, 테스트를 한 후에 개발하는 방식을 말한다. 설계 -> 코드 개발 및 테스트 케이스 작 rinn-story.tistory.com TDD에 대해 알아보았으니, 이제 Jest를 사용해보자. Jest? 테스트 코드가 중요하다는 것은 이전 글에서 확인했으니 이제 JavaScript 테스트 프레임워크 중 하나인 Jest로 테스트를 진행해보려 한다. Jest는 React 이외에 typeScript, Angular, Vue, Node 등도 테스트가 가능하다. Zero config 테스트 전 설정할 것이 많은 다..
Homebrew로 node, npm 다운받기 brew install node Homebrew로 yarn 다운받기 brew install yarn --ignore-dependencies node를 이미 다운 받았으면 --ignore-dependencies로 node를 제외하고 yarn을 다운 받는다. 각각 -v로 버전이 확인되면 잘 다운 된 것이다. create-react-app 만들기 typescript 프로젝트를 만들거라, 뒤에 --template typescript를 붙여줬다. # create react-app use npm npx create-react-app my-app --template typescript # create react-app use yarn yarn create react-app..
