전체 글

로그인과 회원가입을 구현할 때 알아야 할 중요한 개념 중 하나가 인증과 인가이다. 하지만 둘의 개념은 혼동하기 쉽기 때문에 간단한 예시와 함께 이해해 보려고 한다.  1. 인증(Authentication) vs 인가(Authorization)인증과 인가 서비스를 제공하는 authO에 둘의 개념이 잘 나와 있다. 1. 인증(Authentication)인증은 사용자의 신원을 확인하는 것이다. 두 가지 예시를 보자. 은행 창구에 가서 돈을 인출하려고 하면 직원은 신원을 확인하기 위해 신분증을 요구한다. 비행기에 탑승하기 전에도 여권을 통해 신원을 확인해야만 비행기에 탑승할 수 있다. 위 예시 모두 우리의 신원을 확인하기 위해 어떤 절차를 걸치며 이를 인증이라고 한다. 2. 인가(Authorization) 인가..

try catch 문으로 에러를 처리할 때 아래와 같이 작성했더니 err에 타입에러가 뜨는 것을 보게되었다.const getSth = async (pararms) => { try { // ... actinos } catch (err) { setError(err.message) } }; err에 커서를 대보면 다음과 같은 메세지가 뜬다. 사진에서 알 수 있듯이 error는 unknown 타입이다. unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없기 때문에 타입 좁히기를 해주어야 한다. 따라서 instanceof를 이용해서 타입을 좁혀주었더니 에러가 말끔히 사라졌다. 이렇게 타입을 좁혀주는 매커니즘을 타입 가드라고 한다.if (err instanceof Error) { setError(er..

CORS 정의CORS 는 웹 브라우저를 통해 서로 웹 서버에서 다른 도메인간 리소스 접근을 허용하도록 하는 웹 브라우저 기술 표준을 말한다. (출처: 정보통신용어사전) 로그인, 회원가입 시 만나게 되는 CORS! 어떤 건지 정의를 정보통신용어 사전에 검색해봤는데, 개념이 난해하고 이해하기 쉽지 않다..! 아래의 일상적인(?) 상황을 통해 CORS에 대해 알아보자. 1. A라는 사람이 있다고 가정해보자. A는 아주 바쁜 사업가다. 그래서 자신의 연락을 대신 관리해주는 사람인 B를 고용하게 된다. 2. A는 B에게 누군가 A의 사무실에 전화를 하면 통화를 바탕으로 발신자에 대한 정보(누구, 왜 등)를 수집하고 대기하라고 말해둔다. 3. B는 이후에 A에게 전화를 걸어 발신자에 대한 정보를 공유하고 A가 발신..

작업을 마치고 원격 저장소에 push를 했는데 Compare & Pull Request 버튼이 안보였다. 이 버튼이 떠야 PR을 날릴 수 있는데 당황스러웠다. 버튼이 뜨지 않은 이유는 간단했다. 예전에 A 브랜치에서 작업하고 이 작업물을 main에 merge 했었다. 이후 A 브랜치에서 작업물을 이어서 해야하는 경우가 있어서 새로 브랜치를 생성하지 않고 이어서 진행했다.  이런 경우 (A 브랜치가 이미 main에 병합된 상태에서 A 브랜치에서 작업을 계속하는 경우), GitHub은 해당 브랜치와 main 브랜치 간의 차이가 없다고 판단할 수 있다. 따라서 Pull Request를 생성할 필요가 없다고 인식하게 되어 Compare & Pull Request 버튼이 나타나지 않을 수 있다. 이런 경우 New..

A 브랜치에서 B 브랜치로 넘어갔는데 A 브랜치의 내역이 B 브랜치에 적용되고 A 브랜치의 내역이 삭제되는 문제가 발생했다. 이러한 문제는 가끔 VSCode에서 브랜치 토글이 제대로 되지 않을 때 발생하는데, 해결방법은 아래와 같다. 1. VSCode 강제 종료 및 재실행VSCode 강제 종료: 현재 열려 있는 VSCode를 강제 종료한다.VSCode 재실행: VSCode를 다시 실행한다.대부분의 경우 VSCode를 종료하고 재실행하면 문제가 해결된다. 2. . git/HEAD.lock 파일 삭제 강제 종료 후 VSCode를 다시 열었음에도 불구하고 문제가 지속된다면 아래의 방법을 사용하면 된다. 1.Git Clean 커맨드 실행 우선 작업중인 디렉터리의 불필요한 폴더와 파일을 제거한다.git clean..

Next.js를 배우면서 간단한 백엔드 서버를 만들게 됐는데, Mongoose라는 라이브러리로 MongoDB를 연동했다. 조약하지만 백엔드 서버는 처음 만들어봐서 재밌다ㅎㅎ MongoDB와 Mongoose에 대한 공부는 차차 할 예정이고, 오늘은 실습을 하면서 마주쳤던 에러에 대해 다룰 것이다.  Mongoose 스키마와 모델우선 스키마와 모델은 무엇일까? 스키마는 MongoDB 컬렉션에 저장되는 document에 어떤 종류의 값이 들어가는지를 정의한다.모델은 스키마를 기반으로 만들어지는 인스턴스이며, MongoDB 컬렉션에서 도큐먼트를 생성, 읽기, 업데이트, 삭제(CRUD)하는 데 사용된다. 나는 URL 단축 기능을 구현하기 위해 아래와 같이 스키마와 모델을 정의했다. 아래의 스키마는 title, u..

MongoDB를 이용해서 PATCH 요청을 보냈는데 결과값이 제대로 안뜨고 Invalid JSON이 뜬다.PATCH http://localhost:3000/api/short-links/665eb7c2ef6c89ac004f5e89Content-Type: application/json{ "title": "title",}HTTP/1.1 400 Invalid JSONDate: Tue, 04 Jun 2024 07:08:29 GMTConnection: closeTransfer-Encoding: chunkedInvalid JSON   이유를 찾아보니 JSON의 마지막 항목에는 쉼표가 오면 안된다고 한다. 따라서 아래와 같이 쉼표를 제거해주어야 한다.PATCH http://localhost:3000/api/short..

매번 검색하는 스크롤바 숨기기.. 이참에 정리해보자! 가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다. 스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.  아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다..no-scroll { -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */}.no-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */}   참고http..

외부 이미지를 불러오는 경우, 정확한 width와 height 값을 알 수 없을 때, Image의 fill 속성을 이용하면 된다.fill={true} // {true} | {false}   해당 이미지의 사이즈는 부모 사이즈로 결정되며, 아래와 같이 사용할 수 있다.import Image from "next/image";export default function Home() { return ( Hello world! example image );}   추가로 외부링크를 소스로 넣을 때 외부 링크를 사용할 수 없다는 에러메세지를 볼 수 있다.이것은 보안을 위해 허용된 도메인만 접근할 수 있게 막아둔 것 이며 next.config.js..

npm run dev, npm run start를 작성했더니 'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 와 같은 오류 메세지가 떴다.  npm install 또는 npm i를 작성한 뒤 실행하면 잘 동작한다. npm install을 해야하는 이유는 다음과 같다. 1. 의존성 설치프로젝트를 처음 clone 받았을 때, node_modules 폴더는 존재하지 않는다. 이 폴더는 프로젝트가 의존하는 모든 npm 패키지를 포함하며, package.json 파일에 정의된 의존성 목록에 따라 생성된다. npm install 명령어를 실행하면 package.json 파일에 정의된 모든 의존성을 다운로드하고 설치하여 node_modules 폴더를 생성한다.2. pa..