leo-xee.io

Written by@Leo-Xee
안녕하세요. 꾸준함과 함께를 추구하는 프론트엔드 개발자 이장민입니다.

GitHub

Error: Sourcetree Permission denied (public key)

⚠️ 에러 내용 로컬에서 SSH Public Key를 생성하고 GitHub에 등록시켜줬음에도 불구하고 Sourcetree에서는 SSH 인증이 동작하지 않고 계속 Password를 요구하거나 다음과 같은 에러를 발생시키는 문제가 있었다. 📌 에러 원인 터미널 상에서는 정상적으로 동작하는데 Sourcetree에서만 동작하지 않는 걸로 봐서 SSH 생성까지는 …

M1 Macbook 초기 세팅하기

이 글에서는 최근에 회사에서 지급 받은 M1 Macbook Pro를 초기 세팅하면서 겪었던 병목을 다시 겪지 않고자 세팅 내용을 간단히 정리합니다. MacOS 설정 : Dark로 변경 : Pink로 변경 : 1시간으로 변경 : 25%로 변경 : Max로 변경 : 해제 - : 100% 변경 - : 모두 해제 (Alfred 사용) …

[백준/JS] 16968번 - 차량 번호판 1

🔗 문제 링크 16968 - 차량 번호판 1 📝 문제 설명 상도시의 차량 번호판 형식이 주어졌을 때, 가능한 차량 번호판의 개수를 구해보자. 번호판에 사용할 수 있는 숫자는 0, 1, 2, …, 8, 9이다. 사용할 수 있는 문자는 a, b, c, d, …, y, z이다. 차량 번호판의 형식은 최대 4글자이고, c와 d로 이루어진 문자열로 나타낼 수 있다…

GraphQL Code Generator로 타입선언 자동화하기

이 글에서는 GitHub-Graph 프로젝트를 진행하면서 사용했었던 GraphQL Code Generator를 , , 환경을 기준으로 정리합니다. 해당되지 않는다면 공식문서가 상당히 잘 정리되어있으니 공식문서를 참고하시길 바랍니다. GraphQL Code Generator란? GraphQL Code Generator는 GraphQL을 사용하는 프로젝트에…

GraphQL

이 글은 GitHub-Graph 프로젝트를 진행하면서 처음 사용해본 GraphQL의 개념을 정리합니다. GraphQL이란? GraphQL은 Graph Query Language의 약자로써 페이스북에서 내부적으로 사용하다가 2015년에 공개된 쿼리 언어이다. 이는 REST의 대안이 되며 REST가 하나의 구현체가 아닌 명세이듯이 GraphQL도 구현체가 …

Error: process is not defined

⚠️ 에러 내용 Webpack으로 번들링된 프로젝트에서 환경변수의 사용을 위해서 를 사용할 때 다음과 같은 에러가 발생했다. 📌 에러 원인 여기에 따르면 Webpack v5부터 node.js polyfill이 자동적으로 적용되는 기능이 제거된 것이 원인이라고 한다. 그래서 클라이언트 단에서 process 모듈을 직접 추가해줘야한다. ✅ 해결 방법 먼저 …

[프로그래머스/JS] 42587번 - 프린터

🔗 문제 링크 42587 - 프린터 📝 문제 설명 이 프린터는 배열의 맨 앞에 있는 문서의 중요도가 나머지 문서들보다 가장 높으면 인쇄를 하고 그렇지 않으면 배열의 가장 마지막에 넣는다. 문서의 중요도가 순서대로 담긴 배열 priorities와 인쇄를 요청한 문서가 현재 대기목록의 어떤 위치에 있는지를 알려주는 location이 매개변수로 주어질 때, 내…

Error: Hydration failed because the initial UI does not match what was rendered on the server.

⚠️ 에러 내용 첫 번째 에러 Next.js에서 로 SnackBar 컴포넌트를 구현하던 중에 객체를 이용할 때 다음과 같은 에러가 발생했다. 두 번째 에러 첫 번째 문제를 해결하기 위해서 구글링을 하다가 이 글을 보고 객체가 존재할 때만 동작하도록 코드를 다음과 같이 수정했지만 또 다른 에러 메시지를 받았다. 📌 에러 원인 먼저 Next.js는 SS…

React-Query

React Query란? React-Query는 데이터 패칭, 캐싱, 업데이트, 동기화와 같은 서버 상태를 관리해주는 React 라이브러리이다. 기존에는 Redux와 같은 전역 상태 관리 라이브러리에서 클라이언트 상태뿐만 아니라 서버 상태까지 관리하고 있어서 로직이 복잡해지는 문제가 있었다. 이를 해결하기 위해 등장한 것이 서버 상태 관리 라이브러리이며…

Error: A form label must be associated with a control.

⚠️ 에러 내용 키워드 검색 기능을 구현하는 중에 Input과 label을 과 로 연결시켜줬음에도 불구하고 다음과 같이 ESLint 에러가 발생했다. 📌 에러 원인 ESLint의 은 접근성을 위해서 label과 input이 연관됨을 강요하는 규칙이다. 하지만 과 로 연결시켜줘도 에러가 발생하는 이유는 여기를 참고하고 이해한 바로는 확실하지는 않지만 R…