React & typescript

1. INTRO CRA를 이용 하지 않고 웹팩으로 리액트 프로젝트 세팅을 한다. velog의 시리즈중 react(with CRA) & react(without CRA) 는 자바스크립트 기반본 시리즈는 React & typescript를 이용한 프로젝트에 대해 기록 한다

협업 프로젝트시에 코딩룰이 적용된 소스는 인체에 유익 하다는 전제 하에 강제하는 방법을 알아 본다.확실히 쌩 리액트 프로젝트를 구성을 위해서는 webpack을 만저볼수 밖에 없는데 이점이 상당히 도움이 된다는 것을 몸소 체험한다.CAR-ESLint & prettier

파일 경로 설정방법에 대해..../src/home/app.js => @/home/app.jsex) ./src/home/app.jsb => @/home/app.js기호에 맞게 @home, @hooks 등을 추가 하면 되지만 구지 구차쿠로

typescript로 컴포넌트를 작성하는 법에 대해 기록한다.@ = ./srcmkdir ./src/components && touch ./src/components/ExplictComponent.tsx && touch ./src/components/ImplictComp

Webpack에서 style code loader 세팅에 대하여...yarn add -D style-loader css-loader본시리즈 public/index.html body태그 안에 랜더링용 div tag id root의 속성을 정의 해본다.import main

Tailwind CSS는 오픈 소스 CSS 인기 프레임워크이다.yarn add --dev tailwindcss postcss autoprefixer postcss-loadertailwindcss : 오픈 소스 CSS 프레임워크이다. 인기짱postcss : JavaScr

아래 화면처럼 사용하지 않는 import 변수를 자동으로 삭제 하는 기능을 vscode에서 제공 하고있다. mkdir .vscode && touch settings.json

React Router Library v6를 이용 하여 라우팅 하는 방법을 소개한다.react-router: This package implements common core logic for react-router-dom and react-router-native pa

중첩 라우팅 하는 법에 대해 소개한다.이전 문서에서 App.jsx 있는 컴포넌트들을 .jsx로 분리한다.src/App.jsxNavigation => src/navigation/index.jsxHome => src/pages/Home/index.jsxCategory1 =

Accessing URL parameters and dynamic parameters of a routepath="/category1/page2" 와 같이 정적 경로 구현외에 ":slug" 와 같이 동적 파라미터 경로를 설정 하는 방법에 대해 알아 보자.touch ./

react 프로젝트에 필요한 필수 router hook에 대해 알아 본다.App.tsx Routes 경로 설정부분을 useRoutes를 이용한 Routes.tsx파일로 분리 해준다.mkdir ./src/config && touch ./src/config/Routes.t

tailwind를 이용 하여 디자인을 적용 해보자./src/components/Navigations/SideNavBar.tsx./src/pages/Category4/index.tsx./src/styles/tailwind.css

laze 함수 사용법

로그인정보등 특정 정보로를 스토리지 또는 캐쉬에 저장하는 방식에 대해 정리한다.yarn add redux react-redux redux-persist @reduxjs/toolkitmkdir ./src/storetouch ./src/store/index.tstouch

react개발에 필요한 거의 필수 package를 소개 한다. 이후 log에서 다루는 package의 경우 제외함yarn add lodash ajv axios cripto-js dayjs

VSCode debug 설정 하는 법

중복 코드는 죽어도 쓰기 싫다.모바일과 pc 화면 구성을 따로 해줘야 하는 경우 핵심 코어 부분은 공유 할수 있도록 개발 하기 위한 방법을 연구하다가결국 아래 2가지 방안이 최종 결론으로 남았다.inner meta component codeouter meta compo

전 로그에서 lazy를 이용 하여 빌드시 js파일을 분할 하는 법에 연장으로 이번에는 페이지 별로 필요한 소스만 로드하는 방법을 기재 한다.