아무 생각이나 작성하는 카테고리입니다.
명확하게 하지 않으면 타입스크립트를 사용할 때 마다 해당 오류를 만나는 거 같아 근본적인 원인을 글로 정리했습니다. 오류의 코드 오류의 원인 TypeScript는 객체의 키를 엄격한 리터럴 타입으로 추론, 즉, MIME_TYPE_MAP의 키는 정확히 “image/png” | “image/jpg” | “image/jpeg”로 제한된다. 하지만, file.mimetype의 타입은 일반적으로 string이므로, TypeScript는 “image/png” | “image/jpg” | “image/jpeg” 이외의 값이 들어올 가능성이 있다고 판단 어떻게 … Read more
Git은 소스 코드 버전 관리를 위한 필수 도구로, 협업이나 개인 프로젝트에서 널리 사용됩니다.원격 저장소(GitHub, GitLab, Bitbucket 등)와 연동하려면 HTTPS 또는 SSH 인증 방식을 선택해야 합니다. 이 글에서는 Ubuntu에서 Git을 설치하는 방법과 HTTPS 및 SSH 방식으로 원격 저장소를 연동하는 과정을 정리 Git 설치 및 기본 설정 깃 설치 깃 사용자 정보 등록 사용자 등록 확인 사용자 … Read more
Ubuntu에서 웹 서버를 운영하려면 여러 가지 선택지가 있지만, 그중에서도 Nginx는 가볍고 빠른 성능 덕분에 많이 사용된다. 개인적으로도 필요할 때마다 설정 방법을 찾아보곤 하는데, 매번 검색하는 것보다 한 번 정리해 두면 두고두고 참고하기 좋을 것 같아 이 글을 작성하게 되었다. Nginx 설치 및 기본 실행 패키지 목록 업데이트 및 설치 nginx 설치확인 Nginx 서비스 실행 및 … Read more
아래 이미지처럼 인식이 안되서 방법을 찾아봄 Preferences 파일 열기 Edit -> Preferences Editor VSCODE 설정 및 프로젝트 인식시키기 External Tools 이동Extenral Script Editor Visual Studio Code 설정Regenerate project files 버튼 클릭 그러면 이렇게 에러가 뜨지 않습니다.
OPEN JDK (Java Development Kit) 설치 왼쪽에는 버전을 선택할 수 있고 선택했으면 해당 페이지에서 os에 맞게 선택해서 설치하면 된다. 환경변수 등록 윈도우 환경 변수 검색 -> 환경 변수 편집 환경 변수 버튼 클릭 설치한 jdk 파일 경로 복사(폴더 주소창 복사) 사용자 변수 추가 -> 새로 만들기 -> 파일 경로 붙여넣기 시스템 변수 추가 환경 변수 … Read more
NextJS 프로젝트에 NextAuth를 사용하면서 5버전에서는 분명 편하지만 몇가지 마음에 안드는 부분들 때문에 Lucia Auth를 사용해보기로 했다. Nextjs 강의와 Lucia Auth 공식 문서를 보면서 구현 한 것을 작성함. Nextjs 강의 링크 Lucia Auth 공식 문서 auth.ts 작성 lucia.d.ts 작성 로그인 로그아웃 서버로부터 세션 정보 받기 프리즈마
개발을 하다 보면 코드 스타일이 팀원마다 다르게 작성되는 경우가 많다. 이런 문제를 해결하기 위해 “코딩 스타일을 자동으로 맞춰주는 도구”를 사용하는데, 대표적인 것이 ESLint와 Prettier이다. 이 글에서는 ESLint와 Prettier를 설치하고, 충돌 없이 함께 사용할 수 있도록 설정하는 방법을 정리한다. ESLint란 ESLint는 JavaScript 코드에서 문법 오류나 잠재적인 버그를 찾아내고, 일관된 코드 스타일을 유지하도록 도와주는 역할을 한다. 특히, … Read more
Prettier를 사용하면 코드를 보기 좋게 정리해주기도 하지만, 협업시 팀원 간 스타일을 통일하게 하여 사소한 충돌을 줄여서 협업의 효율성을 높임 import 순서 일관성 유지하기 prettier config 파일 수정.prettierrc pacakge.json 파일 수정 사용방법은 똑같은데 해당 모듈이 더 깔끔한 거 같다.
React에서 달력을 직접 구현하는 것은 다양한 기술적 요소를 익히기에 좋은 연습이 될 수 있습니다. 달력은 단순한 UI 요소처럼 보일 수 있지만, 날짜 연산, 상태 관리, 사용자 입력 처리 등 여러 가지 개념이 포함됩니다. 본 글에서는 React를 활용하여 달력 컴포넌트를 직접 만들어보고, 구현 과정을 정리했습니다. See the Pen react-calendar by CodingCitron (@codingcitron) on CodePen. React 달력 … Read more
VSCode에서 Prettier를 사용할 때, 모든 프로젝트에서 자동으로 코드가 포맷되는 것을 원하지 않는 경우가 있습니다. 특정 프로젝트에서만 Prettier가 작동하도록 하려면 설정 파일이 존재할 때만 포맷을 적용하도록 구성해야 합니다. 본 글에서는 VSCode에서 Prettier 설정 파일이 있을 경우에만 자동 포맷이 실행되도록 설정하는 방법을 정리합니다. settings 열기 VSCode Settings – VSCode 왼쪽 하단의 톱니바퀴를 클릭하고 Settings를 클릭합니다. Require … Read more