IT

[Recoil] Duplicate atom key 에러 메시지 없애기 (Next.js, Vite)

Expectation Violation: Duplicate atom key "{아톰 키}". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement. 개발 환경에서 Recoil을 사용할 때 HMR 때문에 Recoil 관련 파일이 변경될 때마다 이러한 에러가 뜨곤 한다. 주로 Next.js나 Vite를 사용하면 이러한 에러를 볼 수 있는 것 같다. 이와 관련한 이슈가 계속되자 0.7.6 버전에서 이 에러를 띄우지 않게 하는 RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED라는 설정이 새로 추가되었다. 환경 변수에서 ..

[CSS] position: fixed가 깨지는 현상 (feat. transform)

position: fixed는 뷰포트를 기준으로 요소를 배치하는 속성이다. 따라서, 상대적이지 않고 항상 동일한 위치에 배치된다. 그런데 position: fixed를 사용했음에도 불구하고 지정한 위치에 배치되지 않는 경우가 있다. 부모 또는 조상 요소의 transform 속성에 translate, translateX, translateY, translate3d 등을 사용하면 영향을 받아 position: fixed 된 자손 요소도 위치가 바뀌게 된다. 따라서 올바르게 position: fixed 요소를 배치하려면 transform 속성을 사용하지 않은 조상 요소의 하위 요소로 옮겨야 한다. 참고자료 https://blog.pumpkin-raccoon.com/120 position fixed 깨지는 이슈..

[Vite/React] Vite HMR 에러 (feat. ContextAPI)

에러 메시지 [hmr] Failed to reload {파일 경로}. This could be due to syntax errors or importing non-existent modules. (see errors above) 모든 파일이 아닌 일부 파일에서 변경 사항이 발생할 때마다 이런 에러가 발생했다. 단순히 HMR 문제라서 새로고침하면 되긴 하지만 너무 불편했다. 원인을 찾아보니 Vite에서 ContextAPI 관련한 이슈가 있는 것 같다. React에서 Context와 Context의 Provider를 같은 파일 내에서 작성하면 해당 에러가 발생한다. 따라서, Context를 별도의 파일에서 작성 후, import해서 Provider를 사용하면 해결된다. 해당 이슈는 비교적 최근에 해결이 된 ..

[VSCode/ESLint] ESLint 자동 수정이 적용되지 않을 때

vscode에서 eslintrc 설정 후 저장을 하면 eslint fix가 가능한 부분은 자동으로 수정이 된다. 만약 되지 않는 다면 아래의 경우 중 하나일 수도 있기 때문에 하나씩 시도해보고 해결되는지 확인해보면 된다. 1. Format On Save VSCode 설정에서 Format On Save를 검색하여 해당 설정을 체크한다. 2. editor.codeActionsOnSave settings.json 설정에서 editor.codeActionsOnSave에 "source.fixAll.eslint"를 true로 설정한다. { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } 3. eslint.codeActionsOnSave.rules se..

[ESLint] import/order 규칙으로 import 순서 미세 조정하기

eslint-plugin-import를 활용하면 아래와 같은 import문들의 순서를 직접 조정할 수 있다. 먼저 eslintrc 파일의 plugins 배열에 "import"를 추가하거나 또는 extends 배열에 "plugin:import/recommended"를 추가해야 한다. (plugins와 extends 모두 위 문자열을 추가하면 rules에서 규칙을 직접 수정할 수 있게 되며, extends의 경우에는 권장되는 기본 설정이 추가된다. extends에 추가하고 rules를 수정하면 기본 설정 위에 덮어씌우게 된다.) { "plugins": ["import"] } { "extends": ["plugin:import/recommended"] } 이제 rules에서 "import/order" 규칙을 ..

[Github Actions/AWS] Github Actions에서 SSH로 EC2 인스턴스에 접근하기

※ 이 방법은 EC2 인스턴스에 SSH로 직접 접근하는 방식으로, 빌드를 EC2 인스턴스 상에서 진행하기 때문에 EC2 메모리 등의 자원을 사용하여 서비스에 영향을 줄 수 있습니다. 빌드를 Github Actions에서 진행하여 S3에 업로드하고, S3에 업로드된 파일을 바탕으로 EC2에 배포하는 방식을 사용한다면 AWS CodeDeploy를 사용하시는 것을 추천합니다. name: Deploy on: workflow_dispatch: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - name: Get Github Actions IP id: ip uses: haythem/public-ip@v1.2 - name: Configure AW..

[TS] Node.js 환경에서 TypeScript 사용하기

타입스크립트로 작성된 파일을 Node.js에서 실행시키려면 ts-node를 통해 파일을 실행시켜야 한다. $ npm i ts-node $ ts-node index.ts 여기에 tsconfig에서 paths를 통해 절대경로를 설정한다면 tsconfig-paths를 추가로 설치해서 ts-node를 실행할 때 옵션을 추가해줘야 한다. $ npm i -D tsconfig-paths $ ts-node -r tsconfig-paths/register index.ts nodemon으로 타입스크립트 파일이 변경될 때마다 재시작하려면 실행 명령어를 아래와 같이 하면 된다. $ nodemon --exec ts-node -r tsconfig-paths/register index.ts 여기에 import, export를 사용..

[Next.js] React Query로 SSR 구현하기

Next.js에서 getServerSideProps를 활용하여 서버에서 API호출을 한 결과값을 HTML 파일에 포함시켜서 받아올 수 있다. type Todo = { title: string; completed: boolean; }; type Props = { todos: Todo[]; }; export default function Home({ todos }: Props) { return ( {todos.map(({ title, completed }) => ( {title} {completed && 완료} ))} ); } export const getServerSideProps: GetServerSideProps = async () => { const res = await fetch('https://j..

[JS] 자바스크립트로 엑셀 파일(xlsx) 만들어서 다운받기

엑셀 파일을 만들어주는 라이브러리에는 SheetJS, ExcelJS 등이 있는데, 그 중에서 비교적 엑셀 파일의 커스텀이 자유로운 ExcelJS에 대해서 다루도록 하겠다. 기본 형식 import ExcelJS from 'exceljs'; // workbook(엑셀 파일 하나를 구성하는 여러 시트로 이루어진 단위) 생성 const workbook = new ExcelJS.Workbook(); // sheet 생성 const worksheet = workbook.addWorksheet('시트 이름'); workbook은 하나의 파일을 나타내고, 하나의 workbook은 여러 개의 worksheet를 가질 수 있다. 데이터 입력 방식 ExcelJS에서는 다양한 방법으로 데이터를 입력할 수 있다. workshe..

[TS] const assertion (as const)

타입스크립트에서 변수를 const로 선언할 때와 let으로 선언할 때 타입 추론이 다르게 일어난다. let a = 'hi'; // let a: string const b = 'hi'; // const b: "hi" 타입스크립트는 string literal type을 지원하여 특정 문자열 자체를 타입으로 다룰 수 있다. const로 선언한 변수는 위와 같이 string이라는 넓은 범위의 타입 대신 구체적으로 딱 하나의 문자열인 'hi'를 가리키게 된다. 이는 다른 number 타입에서도 마찬가지이다. let a = 1; // let a: number const b = 1; // const b: 1 그런데 배열이나 객체의 경우에는 const로 선언하여도 문자열이나 숫자일 때처럼 구체적으로 범위를 좁히지 않..