Typescript

들어가며, react-responsive 라이브러리를 사용해 반응형 웹을 만들며 여러가지 테스트를 해봤다. 타입스크립트를 사용했기 때문에 타입 지정을 해줘야 했다. 타입을 지정하는 방법 중에 interface와 type이 있는데 두 가지의 정확한 차이점을 알고 정리해놓으려고 한다. 본론 function Pc({ children }) { const isPc = useMediaQuery({ query: '(min-width: 768px)', }); return {isPc && children}; } react-responsive 라이브러리 내 useMediaQuery를 사용했다. PC 버전과 Mobile 버전일 때를 나눠 만드려고 했으며, children을 통해 값을 받아오도록 코드를 짰다. return {..

들어가며, 리액트로 반응형 웹을 만들기 위해 프로젝트 초기설정을 하고 있던 와중, 정보가 너무나 많아서 한 번에 정리하고 나중에 다시 보기 위해 글을 써서 정리해두려고 한다. 예전에 Vite로 스캐폴딩하는 법은 써놨으니 Vite로 설정하는 방법은 맨 아래 추가하겠다. 본론 일단 난 CRA를 통해 프로젝트를 만들었고 여기에 typescript 와 eslint, prettier를 설치할 것이다. 1. CRA + typescript 설치하기 npx create-react-app --template typescript 이렇게 프로젝트를 만들어주면 루트에 tsconfig.json 파일이 생긴다. 이때, "baseUrl" : "./src" 코드를 추가해준다. 추가해주는 이유는 기본 절대 경로를 사전에 설정해 추후 ..

프로젝트를 하면서 폴더 구조를 전부 변경했다. 이런식으로 그냥 src안에 있었던 폴더들을 components 폴더를 만든 후 넣어줬다. 그리고 각 컴포넌트 폴더 안에 컴포넌트.tsx 파일과 index.ts 파일을 만들어 내보내주도록 만들었다. 이 과정을 하면서 원래 상대경로로 잡혀있던걸 절대경로로 바꿔주는 작업을 시도했다. 나는 webpack과 typescript를 사용했기 때문에 webpack.config.js 파일과 tsconfig.json 파일을 변경해야했다. webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "src"), }, extensions: [".ts", ".tsx", ".js", ".j..

디자인시스템을 만드는 팀 프로젝트를 진행 중 우리가 만든 컴포넌트들을 npm 패키지로 배포해야 했다. 처음에는 Rollup으로 시도했다가 이건 뭔가 아닌 것 같다는 판단이 들었다. 왜냐하면 Next.js는 Vite와 달리 Rollup 번들러가 아니라 Webpack 번들러를 사용하기 때문이다. 팀원과 함께 Webpack으로 번들링하는데는 성공했지만 tailwind 스타일링이 적용되지 않는 문제가 발생했다. 배포한 npm 패키지를 설치하고 Toast 컴포넌트를 적용시켰을 때 div에는 tailwindcss가 잘 적용된 것 처럼 나온다. 하지만 결과는 제대로 나오지 않고 폰트 크기만 적용되어서 나오는 문제가 발생했다. 구글링을 해도 검색이 잘 되지 않아 영문으로 검색하니 동일한 문제를 겪은 사람들이 있었다. ..