TypeScript의 Type은 어떻게 나누어지는가? 1. Static 정적 유형은 "컴파일 타임" 또는 "프로그램을 실행하지 않고" 이미 알고있는 유형을 의미 user-defined type(function, tuple, array, object ...), primitive type(string, number, boolean ...) 으로 세부 분류. 2. Generic Generic은 단일 데이터 형식이 아닌 다양한 데이터 형식으로 작업할 수 있는 구성 요소를 만드는 데 사용 3. Decorators 클래스 선언, 메서드, 속성, 접근자 및 매개변수에 첨부할 수 있는 특수한 데이터 유형 let any: any let number: number = 5 let never: never = any // ❌ ..

프로그램 언어의 다형성(多形性, polymorphism; 폴리모피즘)은 그 프로그래밍 언어의 자료형 체계의 성질을 나타내는 것으로, 프로그램 언어의 각 요소들(상수, 변수, 식, 오브젝트, 함수, 메서드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질을 가리킨다. 출처 - 위키백과 다형성(컴퓨터 과학) 다형성(Polymorphism)은 프로그래밍 언어 이론에 깊이 뿌리를 둔 개념이며 다양한 종류가 있습니다. 이 글에서는 타입스크립트의 함수를 두 종류의 다형성으로 바라보고 생각합니다. 즉, 인수 타입에 따라 다르게 동작하는 함수(i.e. ad-hoc polymorphisms)와 다양한 수의 인수를 취하는 함수(i.e. parametric polymorphisms)입니다. Union type 만..

올해 서른, 내년도 서른이겠지만 지금까지의 신년 계획은 실패로 끝날게 뻔할 금연뿐이었지만 올해의 시작은 새로운 다짐과 마음가짐으로 시작하고 싶었다. 하지만 많은 시간을 고민해보아도 미래의 모습이 잘 상상이 되지 않았고, 그렇게 제대로 그려지지 않은 미래에 대한 실현 의지도 생기지 생기지 않을 것 같았고, 한편으로는 나이를 들어감에 어떤 책임감과 압박감에 염려가 되기도 했다. "풀을 베는 사람은 들판의 끝을 보지 않는다" 프랑스 속담에 있는 말으로, 농부가 풀을 벨 때 들판의 끝을 보면 '이 넓은 들의 풀을 언제 다 베지?'라는 푸념과 함께 의욕을 잃는다는 것이다. 이번 계획을 통해 의욕을 잃지 않고 즐거운 마음으로 풀을 베는데 집중하며, 앞으로 다가올 낯선 시간을 보다 현명하게 이용할 수 있는 밑바탕이 ..

올해 6월 중순 새로이 시작한 사이드 프로젝트 팀원들과 서비스 오픈을 앞두고 1박 2일간의 나들이를 다녀왔다. (처음 계획을 전달받았을 때 서비스 오픈을 앞두고 1박 2일간의 해커톤인 줄 알고 굉장한 기대를 했다...) 결론부터 말하자면 오랜만에 MT와 같은 느낌으로 바람도 쐬고, 맛있는것도 먹으며, 좋은 시간을 보내며 리프레시할 수 있었다. 그리고 같은 프론트엔드 개발자 분과의 대화를 통해 다시 무언가를 깨닫게 된 의미 있는 시간이었다. 팀원분은 나와 마찬가지로 디자이너에서 전직한 1년차 프론트엔드 개발자이며, 현시점에서 각 분야의 일한 기간이 나와는 정확히 반대인 케이스다. 지난밤, 프로젝트 진행 간 어려운 부분이 있으시다며 다음날 카페에서 라이브 코딩으로 알려주실 수 있는지 물어보셨다. 거절할 이유..

Next.js의 개발 서버는 기본적으로 3000 포트에서 실행되도록 설정되어 있습니다. 개발 환경에 따라 다른 포트에서 개발 서버를 실행해야 경우가 종종 생기는데 이를 변경할 수 있는 방법을 알아봅시다. 1. 직접 변경하기 // package.json { ... "scripts": { "dev": "next dev -p 3005", "build": "next build", "start": "next start" } ... } -p 옵션을 통해 뒤에 입력된 포트로 개발 서버가 실행됩니다. 2. 환경변수 사용하기 // package.json { ... "scripts": { "dev": "next dev -p ${PORT-3000}", "build": "next build", "start": "next st..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. 지난 글(TypeGuards와 Narrowing)에서 언급했던 Opaque 타입에 대해 알아보겠습니다. 소개 우선 타입스크립트의 타입은 기본적으로 유형의 구조가 동일하다면 호환 가능합니다. 코드와 함께 살펴보겠습니다. type Username = string; type Password = string; Username 타입과 Password 타입은 모두 string이기 때문에 타입스크립트에서는 호환 가능합니다. 개발자는 다른 개념으로 각각의 타입을 생성했지만 타입스크립트는 그..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. Narrowing과 type guards Narrowing은 type guards를 사용해 type을 좁혀 더 정확하게 만드는 과정입니다. type guards는 type의 범위를 좁히는 데 도움을 주는 특별한 검사 방식을 말합니다. 이해가 쉽도록 예제로 풀어보겠습니다. 여기, 천 단위 구분 기호를 추가해주는 함수가 있습니다. export function withCommas(value: number) { const formatter = new Intl.NumberFormat(..

개발자로서 Git은 매우 중요한 부분입니다. Git과 상호작용 하지 않고 하루를 보낼 수는 없습니다. 일반적으로 터미널에서 Git을 실행하거나 Sourcetree와 같은 GUI도구를 사용합니다. 우리는 Git의 명령어를 기억하고, 작성하는 것이 어렵고 소모적인 것을 알고 있습니다. GUI툴을 사용한다면 Git 명령어를 외울 필요가 없어 정말 쉽게 사용할 수 있습니다. 직관적으로 보이고 또 강력한 부가기능들도 포함되어 있습니다. 하지만 터미널에서만 Git을 실행하는 것을 좋아하는 fan이 분명 존재합니다. 터미널 fan을 위한 효율적인 어떤 방법이 없을까요? 우리는 Git Alias를 설정해 Git 명령어를 별칭으로 저장해 Git을 좀 더 쉽고 빠르게 사용할 수 있습니다. 그럼 Git Alias는 어떻게 ..

개발자로서 업무를 진행하다 보면 자연스럽게 markdown을 접하고 사용하게 됩니다. 마크다운은 텍스트 기반의 경량 마크업 언어로 쉽고 간단하게 서식이 있는 문서들을 작성하는데 용이합니다. README.md는 물론 issue template, pull request template를 만들어 사용하기도 하고 어떤 분들은 TIL과 스터디 자료를 정리해 개인 리포지토리에 저장하기도 합니다. 저 또한 마찬가지로 클린코드 스터디를 진행하며 md파일로 정리했던 섹션이 있었습니다. 저는 마크다운으로 작성하며 내용이 많아지니 미리 보기에 대한 니즈가 있었습니다. VS Code 내에서 관련 Extension이 있는지 찾아보고 사용해보니 그 외의 기능들도 경험이 좋아 추천하고자 글을 작성합니다. Markdown All i..

github의 pull request는 draft 상태로 올릴 수 있는 기능이 존재합니다. * private 리포지토리는 유료 플랜이 필요 Draft 상태의 PR은 작업중인 상태로 Merge를 막을 수 있습니다. 언제, 어떻게 사용할 수 있을까요? 현재 회사에서는 Draft PR을 다음과 같은 규칙을 만들어 활용하고 있습니다. 1. topic으로 다른 개발자와의 의견 조율 및 소통이 필요할 때 2. 변경사항이 많아 리뷰가 힘들어짐을 방지하기 위해 PR을 나누어 올릴 때 순차적으로 Merge하기 위해 즉, PR을 올리는 행위는 테스크가 완료되어 코드리뷰를 하고 Merge하기 위한 것으로 정리할 수 있었기에 git-action은 그 시점에서 필요한 것이고, Draft PR에서도 git-action이 동작하는..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. 2022.07.02 - [개발/type-challenges] - 타입스크립트 타입 정복: 내장 유틸리티 타입을 만들어보자 지난 글에서는 타입스크립트에 내장되어 자주 사용하게 되는 유틸리티 타입들을 직접 구현해보는 문제들을 소개해 드렸습니다. 어떠셨나요? 이 문제들은 type-challenges의 쉬움~보통 난이도에 해당하는 유형이었습니다. 지난 글에서 살펴본 기본적인 keyof, in, Indexed Access Types와 더불어 설명하지 못했던 Conditional Typ..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org keyof operator keyof operator는 객체 유형의 키의 문자열 또는 숫자 리터럴 조합을 생성합니다. type Point = { x: number; y: number }; type P = keyof Point; // 'x' | 'y' in operator JavaScript에서 in..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. type-challenges는 TypeScript의 공식 사이트의 playground를 통해 이루어집니다. 그리고 타입을 통해 정확하게 요구사항을 타입을 구현해 냈는지 테스트도 진행합니다. 아래는 가장 첫 문제, 몸풀기에 해당하는 hello-world 문제입니다. TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or Ja..

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 잠재적인 버그를 피할 수 있는 장점이 있습니다. 또, 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 기술할 수 있어 코드의 가독성을 높이고, 예측 가능하게 합니다. 이는 곧 프로젝트의 유지보수성의 향상에도 도움이 될 수 있습니다. 게다가 IDE는 이를 분석해 자동완성 기능까지 제공하니 생산성의 향상에도 도움을 줍니다. TypeScript를 처음 접한다면, 타입을 선언하는 데에 어려움이 다소 존재할 수 있습니다. 컴파일 에러를 피하기 위해 any로 지정하는 경우도 종종 생깁니다. any는 앞서 말한 TypeScript의 장점을 모두 상쇄합니다. 최대한 쓰지 않으려고 하는 게 중요하겠죠. 타입을 선언하는데에 어려움이 있는 것은 타입 시스템에 ..

프로젝트 진행 간 아래와 같은 문제가 발생한 경험이 있나요? 1. 같은 커밋에 위치했는데 A 개발자는 프로그램이 문제없이 동작하고, B 개발자는 프로그램이 에러가 발생한다. 2. 변경사항을 pull 받고 install 했더니 코드의 변경사항은 없는데 package-lock.json파일의 변경사항이 있다. 너무나 익숙하지만 어떤일을 하는 녀석인지 대부분 모르고 지나가는 package-lock.json에 대해서 내용을 정리해 글을 작성합니다. package.json 그리고 package-lock.json 기본적으로 package.json은 npm에 패키지를 배포하기 위해 반드시 필요한 "문서"입니다. 또한 프로젝트의 의존성 관리를 위한 명세라 할 수 있습니다. npm 버전 5 이상에서 npm install을..

여느날처럼 프로젝트를 둘러보며 둘러보며 코드를 구석구석 청소하고 있었다. 그러던 중 약 10개월 전 작성 된 코드중 정상적으로 동작하지 않는 코드를 발견했다. 해당 코드의 commit history가 남아있어 PR을 살피며 이부분은 명백히 프로그램이 개발자의 의도에 따라 동작하지 않는 버그로 판단을 내릴 수 있었다. 나는 당연하게도 본래 의도한 대로 동작할 수 있도록 코드를 정리하며 해당 버그를 수정했다. 오랜시간 보고되지 않고 숨어있던 버그를 해결한 것에 안도감과 뿌듯한 마음이 들었다. 그런데 버그를 수정한지 며칠 후 해당 부분이 제대로 동작하지 않는다는 리포트가 들어왔다. 여지껏 그렇게 동작하던 것이 프로그램의 버그였고 지금에서야 정상적으로 동작하는것이 맞다. 하지만 사용자 입장에서는 그간 사용해왔던..

개발직군에 대한 관심도가 날이 갈수록 증가하며 사내에서도 다른 분야의 직원들이 생기기 시작했다. 누군가는 취미로, 만들고 싶은 아이템을 실현하기 위한 도구로 또는 커리어의 전환을 위해 각자의 목적을 가지고 있었다. 개발팀 내에서는 이들을 위해 사내 개발 스터디 그룹을 만들고 지원하고자 하는 계획을 세웠다. 그 첫걸음으로, 회의를 통해 '개발자가 되고싶은 히치하이커를 위한 안내서'라는 큰 주제 아래에서 각자 준비해 발표하도록 했다. 나는 디자이너에서 전환한 비전공자 출신 프론트엔드 개발자다. 그 과정에서 힘든점도 있었고 누구보다 그 상황을 이해할 수 있을 거라 생각했다. 그렇기에 나와 같은 상황의 동료를 이끌어 줄 수도 있다는 생각에 기대와 설렘이 있었고 한편으로는 걱정이 되기도 했다. 발표를 준비하며 출..

진행 중인 프로젝트 내 비슷한 로직을 처리하는 Modal UI가 10개가량 존재하는 것을 발견했다. 자연스럽게 컴포넌트로 추출되었을 법 한데 무엇 때문인지 각각 존재하고 있었다. // 초기 컴포넌트의 형태 type Payload = { foo: string; bar: string; baz: string; }; type WithRequestComponentProps = {}; const WithRequestComponent = ({}: WithRequestComponentProps) => { const { register, handleSubmit } = useForm(); const onSubmit: SubmitHandler = (payload) => { // 서버로의 요청 }; return ( ); };..

JavaScript의 변수를 선언할 수 있는 방법으로 var, let, const가 있습니다. 각 키워드로 선언한 변수들은 어떤 차이가 있는지 알아보겠습니다. var ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었습니다. var 키워드로 선언된 변수에는 어떤 특징이 있을까요? 중복 선언이 가능하다 var 키워드로 선언한 변수는 중복 선언이 가능합니다. 어떤 말인지 코드로 살펴보겠습니다. 예제와 같이 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 가능합니다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작합니다. 반면, 초기화문이 없는 변수 선언문은 무시됩니다. 따라서 만약 동일한 이름의 변수가 이미 선언된 것을 모르..

이직 후 새로운 회사에서는 이전까지 프로젝트 일정을 핑계 삼아 제대로 하지 못한 Pull Request(PR)와 코드 리뷰 문화에 익숙해지기 시작할 때쯤 느꼈던 불편한 부분들과 이를 어떻게 개선하고자 하였는지에 대해 경험을 공유합니다. 어떤 문제가 발생했나? 제목에만 의존적인 PR 거의 대부분이 제목에만 의존적인 PR로 제목과 함께 변경된 코드들로만 내용을 Reviewer가 추측하고 있었고, 간혹 리뷰를 직접 말로 주고받고 하다보니 중복되는 Comment가 발생하기도 했다. 개발자는 코드로 말한다지만... 코드가 자신을 설명할 수 있다면 정말 좋겠지만, 문제영역과 깊숙하게 연관되어 있는 내용에 대해서는 코드만으로 설명이 어려울 때가 많았다. 오랜 기간 진행되어온 프로젝트로 각자 담당하고 있는 파트가 존재..

지난 포스트에서 잠깐 다루었던 콜 스택(call stack)에 대해 알아보고, 조금 더 나아가 자바스크립트는 한 순간 하나의 작업만 처리할 수 있는 단일 스레드 기반의 언어임에도 불구하고 동시에 많은 작업을 수행할 수 있는지 알아보겠습니다. 스택과 큐 콜 스택에 알아보기 전 스택과 큐 자료구조에 대해 간단히 알아보고 넘어가겠습니다. 스택은 출입구가 하나인 데이터 구조입니다. 순서대로 a, b, c 데이터를 넣었다면 꺼낼때는 반대로 c, b, a순서로 꺼내게 됩니다. (FILO, First In Last Out) 큐는 양쪽이 열려있는 파이프를 떠올리면 됩니다. 종류에 따라 양쪽 모두 입/출력이 가능한 큐도 있으나 일반적으로 큐에 순서대로 a, b, c 데이터를 넣었다면 꺼낼때는 a, b, c 순서대로 꺼내..

this와 execution context 자바스크립트의 혼란스러운 개념 중 하나로 this키워드에 대해 알아보도록 하겠습니다. 더불어 실행 컨텍스트(execution context)도 간단히 알아보겠습니다. 실행 컨텍스트 또한 중요한 개념이기에, 다른 글에서 더욱 자세히 알아보겠습니다. this와 실행 컨텍스트, 이 두가지 개념을 함께 이해하면 더이상 this가 혼란스럽지 않을 것 입니다! 들어가기 앞서 실행 컨텍스트에 대해 먼저 간단히 알아보겠습니다. 실행 컨텍스트(execution context)란? 자바스크립트 엔진은 코드를 실행하기 위해서 실행에 필요한 여러가지 정보(변수, 함수, 스코프, this)들을 알고 있어야 합니다. 실행에 필요한 정보를 형상화하고, 구분하기 위해 자바스크립트 엔진은 이..

strict mode란? ECMAScript5(ES5)에서 소개된 strict mode(엄격 모드)에 대해 알아보겠습니다. 자바스크립트의 엄격 모드는 일반 코드와는 다른 시멘틱을 가지고 있기 때문에, 이를 지원하지 않는 브라우저에서는 엄격모드와 비-엄격 모드의 코드가 다른 방식으로 동작할 것입니다. 엄격 모드와 비-엄격 모드의 코드는 공존할 수 있습니다. 따라서 선택적으로 사용하는 것이 가능합니다. 엄격 모드에서는 평범한 자바스크립트의 시멘틱에 몇 가지 변경을 일으킵니다. 1. 기존에 조용히 무시되던 에러들을 throwing 합니다. 2. Javascript 엔진의 최적화 작업을 어렵게 하는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일 코드보다 더 빨리 작동할 수 있습니다. 3..

스코프(Scope, 유효 범위)란, 간단히 말하면 특정 장소에 변수를 저장하고 나중에 그 변수를 찾기 위해 정의된 규칙입니다. var foo = 0; function myFunction() { var foo = 100; console.log(foo); } myFunction(); // (1) console.log(foo); // (2) (1)의 결과와 (2)의 결과는 각각 어떻게 될까요? 결과는 (1)은 100이 되고, (2)는 0이 됩니다. 예시에서 전역에 선언된 변수 foo는 어디에서든 참조할 수 있는 반면에 함수 myFunction 내에서 선언된 변수 foo는 함수 내부에서만 참조할 수 있고 외부에서는 참조할 수 없습니다. 이러한 규칙을 스코프라고 합니다. 만약 스코프가 없다면 같은 식별자로 쓰인 ..

함수란 어떤 작업을 수행하기 위한 로직을 정의 한 코드블록 입니다. 일반적으로 반복 되는 작업을 함수로 정의하고 재사용하여 효율적인 프로그래밍을 가능하게 합니다. 이외에 객체의 메소드, 정보 은닉, 클로저 등의 기능을 수행 할 수 있습니다. 1. 함수 정의 자바스크립트에서 함수를 정의하는 방법은 3가지가 있습니다. 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 1-1 함수 선언문 함수 선언문은 일반적으로 함수를 정의 할 때 사용되는 방법입니다. function 키워드와 함께 함수명, 매개변수(parameter), 함수 몸체로 이루어져 있습니다. // 함수 선언문 // // 함수명은 해당 함수를 구분할 수 있는 식별자(Identifier)로 // 함수 선언문에서 함수명은 반드시 필요..

자바스크립트의 모든 값은 타입이 존재합니다. 그리고 값의 타입은 개발자에 의해 변환(명시적 강제변환, Type Casting)되거나, 자바스크립트 엔진에 의해 암묵적으로 변환(암시적 강제변환, Type Coercion) 될 수 있습니다. 차이는 명확하게 구분되어집니다. 명시적 강제변환은 의도적으로 타입변환을 하였기에 코드만 봐도 알 수 있으며, 암시적 강제변환은 다른 작업 도중 부수효과(Side Effect)로부터 발생하는 변환 입니다. 아래 코드에서 명시적 강제변환과 암시적 강제변환의 차이를 볼 수 있습니다. var x = 10; var str = x + ''; var str2 = String(x); console.log(typeof str, str); // 'string', '10' console.l..

데이터 타입의 종류 자바스크립트의 데이터 타입은 크게 기본형과 참조형으로 나눌 수 있습니다. 기본형 데이터 타입(원시형, primitive type) 숫자(Number), 문자(String), 불리언(Boolean), null, undefined, Symbol 참조형 데이터 타입(reference type) 객체(Object), 배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp), Map, WeekMap, Set, WeekSet 기본형 데이터 타입 1. Number 자바스크립트는 다른 언어와 달리 하나의 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다. var integer = 10; // 정수 var f = 7.716; // 실수 var negative = -5..

Javascript 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 언어이며, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)입니다. 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화하는데, 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점을 해결했습니다. 이를 통해 컴파일 단계의 추가적인 시간이 필요함에도 빠른 코드의 실행이 가능케 합니다. ECMAScript는 자바스크립트의 표준 명세를 말하며, 언어의 타입, 값, 함수 등 핵심 문법을 규정한 것입니다. 각 브라우저 제조사는 ECMAScri..

개발자가 해야 할 일은 문제를 해결하기 위한 방안을 고민하고, 문법에 맞게 코드로 구현해내는 일이다. 다시 말해 구현된 코드는 개발자가 의도한 대로 정확히 동작하여 문제를 해결해야 한다. 자신이 구현 한 코드가 어떻게 동작하고, 예측 가능하며 이것을 동료에게 설명할 수 있어야 한다. 이를 위해서는 기본 개념과 동작 원리에 대한 이해가 바탕이 되어야한다. 기본 개념과 동작 원리를 이해하지 못한 상태에서 구현하는 것은 신뢰할 수 없고 유지 보수하기 까다로운 코드가 될 것이다. 그리고, 어느 순간 성장을 멈추고 말 것이다. 기본 개념을 알고 있다는 것은, 정확한 용어를 사용할 수 있도록 한다. 정확한 용어의 사용은 명확한 의사소통을 가능케하며, 이는 협업의 기본이며 필수 요소이다. 동작 원리를 알고 있다는 것..

최근 가벼운 Next.js를 활용 한 프로젝트를 진행하며 사용자 인증 관리를 NextAuth.js를 통해 구현해보았다. Next.js 프로젝트에서 간편하게 인증관리를 할 방법이 없을까 고민을 하고 있던 차 NextAuth.js를 알게 되었고, 가벼운 프로젝트기에 부담 없이 적용해보았다. NextAuth에서 제공하는 많은 Provider 중에 Credentials를 이용하여 사용자 인증을 구현, 관리하도록 세팅했다. 실 적용하는데에는 크게 문제가 없었고, 배포 이후 클라이언트 측의 IE 환경에서의 문제가 발견되었다. 로그인 진행이 안 되어 관리자 페이지는 확인 못 하였으나... (생략) Problem 1. NextAuth는 수시로 /api/auth/session을 요청하며 수시로 로그인 상태인지를 확인하도..