최근 이직한 회사에서 php로 제작된 레거시 프로젝트를 담당하게 되었습니다. 프론트엔드 개발자 입장에서 백엔드 코드,DOM 조작 코드,HTML 코드 등이 뒤섞여있는 PHP 환경은 여간 불편한일이 아닙니다. 이를 개선하기 위해서 기존 프로젝트의 DOM 코드들을 web component로 적용하고 있습니다. 거의 매번 react로된 환경에서만 작업을 해오면서 생각할필요가 없어던 부분들을 고려해야 되다 보니 react의 장점이 느껴져서 둘을 비교하면서 정리해보겠습니다. 웹컴포넌트 web component const html = String.raw; class Modal extends HTMLElement { constructor() { super(); this.list = []; this.attachShado..
아래 버전에서 구현한 방법입니다. "next": "14.0.4", "next-auth": "^4.24.5" "typescript": "^5.3.2" Next.js 14에서 App Router를 사용하여 NextAuth로 OAuth 인증을 구현하는 과정은 몇 가지 핵심 단계를 포함합니다. 이 포스팅에서는 간단하게 이러한 단계들을 설명하겠습니다. 1. NextAuth 설치 및 설정 먼저, NextAuth를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행하세요: npm install next-auth # or yarn add next-auth 2. NextAuth 설정 파일 생성 nextauth 설정 파일을 app/api/auth/[...nextauth]/route.ts 디렉토리 내에 생성합니다. 이..
fetch 함수를 사용하여 POST,GET 요청을 보내고 응답 본문(response body)이 null인 경우, response.json()을 호출하면 오류가 발생할 수 있습니다. 이는 response.json() 메소드가 유효한 JSON을 기대하기 때문입니다. 서버가 내용 없는 응답(예: 204 No Content 상태 코드)을 반환하는 경우, 이 메소드를 사용하기 전에 응답에 실제로 JSON 본문이 있는지 확인해야 합니다. 응답 본문이 null일 가능성이 있는 상황을 처리하는 방법은 다음과 같습니다: async function requestAPI() { try { const response = await fetch({APIURL}, { method: 'POST', headers: { 'Content..
도커 컨테이너에서 실행되는 애플리케이션의 로그를 기록하고, 이 로그를 호스트 시스템에 보존하고 싶을 때, 도커의 볼륨 마운트 기능을 사용할 수 있습니다. -v 또는 --volume 옵션을 사용하여 호스트와 컨테이너 간의 경로를 연결(마운트)함으로써, 컨테이너 내부에서 생성되는 로그 파일을 호스트 시스템의 지정된 경로에 저장할 수 있습니다. 이 방법을 사용하면 컨테이너를 삭제하거나 재시작해도 로그 파일이 유실되지 않습니다. 도커 볼륨 마운트를 사용한 로그 기록 방법 볼륨 마운트 옵션 구조: -v 또는 --volume 옵션을 사용할 때의 기본 구조는 다음과 같습니다.이 구조에서 는 호스트 시스템의 경로를, 는 컨테이너 내부의 경로를 의미합니다. docker run -v : 로그 파일을 위한 볼륨 마운트 예제..
NextAuth.js 소개 Next.js 프로젝트에서 인증 시스템을 구축하는 것은 많은 개발자들에게 중요한 과제 중 하나입니다. 이 과제를 해결하기 위해 많은 개발자들이 Next-Auth 라이브러리를 선택하고 있습니다. 이 포스팅에서는 Next-Auth의 장단점, 사용 이유, 직접 구현과의 비교, 동작 원리, 그리고 간단한 사용법 예제를 소개하려 합니다. 1. Next-Auth의 장단점 장점 간편한 설정: Next-Auth를 사용하면 몇 줄의 코드만으로도 강력한 인증 시스템을 구축할 수 있습니다. 다양한 인증 공급자 지원: 소셜 로그인을 비롯한 다양한 인증 방식을 쉽게 통합할 수 있습니다. 보안: 자체적으로 세션 관리 및 JWT 토큰을 사용하여 보안성을 강화합니다. Next.js와의 완벽한 통합: 서버사..
next.js 프로젝트 next.js app을 jenkins + harbor + docker 조합으로 ubuntu 서버에 배포 하는 설정입니다. jenkins에 설정된 github branch에 머지 되면 jenkins에서 shell이 실행되도록 합니다. next.js 앱을 빌드하고 도커 이미지로 빌드합니다. 1. Dockerfile 작성 docker 이미지로 빌드될 명령어 # 기본 이미지 설정 FROM node:18 # 작업 디렉토리 설정 WORKDIR /app # 의존성 파일 복사 COPY package.json yarn.lock ./ # 의존성 설치 RUN yarn install --frozen-lockfile # 애플리케이션 파일 복사 COPY . . # Next.js 빌드 RUN yarn bui..
next.js 14 app router next.js 14에서는 기존 pages라는 폴더 기반의 라우팅에서 app router로 변경되었다. next.js 서버에서 custom api를 작성하는 방법에도 약간의 변화가 있기 때문에 이에 대해서 공유한다. export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} app/api/route.ts 위 예시를 보면 page.js나 layout.js처럼 파일 기반 route를 제공한다. app 폴더 내부에 동일한 방식으로 route.ts 파일을 작성하면된다. 동일하게 app폴더 내에서 파일 기반으로 동작하기 때문에 중첩을 피하기 위해서..
웹개발자로서 실무에서 도커, 컨테이너라는 용어를 자주 접하게 된다. 생소한 도커에 대해서 당장 써먹을 수 있도록 쉽게 핵심만 알아보도록 하자. 도커란? "도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다. 여기에는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 서버에 설치되는 무엇이든 아우른다. 이는 실행 중인 환경에 관계 없이 언제나 동일하게" ~블라 블라~ 들어도 모르겠다. 도커의 이미지와 컨테이너 개념을 이해하기 쉽게 비유하자면, "도커 이미지는 레시피나 설계도"에, "도커 컨테이너는 그 레시피로 만들어진 음식이나 설계도대로 지어진 집"에 비유할 수 있다. 그렇다면 도커 파일은 건축주의 발주서 정도! 도커 이미지 : 설계도 설계도..
