짧은코딩

Webstrome 기준 settings → eslint 검색 → Manual ESlint configuration 체크 → ESlint package: yarn:package.json:eslint 파일 수정하고 위 과정으로 설정하니까 에러 안 남 개발하다 빨간(노란)줄 나왔을 때 만약 개발하다가 빨간(노란)줄 생겼는데 없애고 싶으면 빨간줄에 마우스 올린다. 그러면 이런 에러 문구가 나오는데, 괄호 안에 있는 @typescript-eslint/no-unused-vars 이거를 .eslintrc.cjs 파일에 가서 검색하고 그 라인을 제거/주석 처리한다. .eslint.cjs module.exports = { env: { browser: true, es2021: true, }, extends: [ 'esli..

일단 tailwind css를 기준으로 설명하겠지만 결국 어느 css를 사용하든 원리는 같다! 헤더 고정 우선 헤더를 고정하기 위해서 위 코드처럼 h-28(7rem)으로 고정을 했다. 내용 "100% - (헤더 height)" 하는 법 여기서 noneHeader는 tailwind css를 custom한 style이다. -tailwind.config.js height: { noneHeader: 'calc(100vh - 7rem)', }, 이렇게 calc를 사용해서 100vh - (헤더 height)를 하면 아래 오는 내용을 손 쉽게 가운데 정렬할 수 있다. 완성 코드 이렇게 구성하면 어떤 해상도에서든 헤더의 길이가 고정되어 있다. 그렇기에 초반에 Layout을 제대로 잡아주었다. 이런 구성에 대해서 늘 생..

이번에 진행하는 프로젝트는 webpack, npm이 아닌 vite와 yarn berry를 사용하는 과제를 받았다. 이 글에서 설명하는 초기 세팅은 react, ts, vite, yarn berry, tailwind css + twin.macro(emotion js), recoil, react query, jest, cypress를 설치하는 과정이다!(뭔가 엄청 많다..) 먼저 짧은 후기를 적어보자면 vite에 대한 정보가 너무 없어서 좀 힘겨웠다..! Vite + React + yarn berry 적용 yarn create vite 먼저 이 명령어를 입력하고 react, typescript를 각각 선택해줬다. yarn berry 전환 yarn set version berry pnp 모드 적용 먼저 .ya..