개발자 오디세이아라는 책을 읽었다. "오디세이아"는 트로이 전쟁 영웅 오디세우스(Odysseus)의 10년간에 걸친 귀향 모험담이다. 오디세우스는 트로이 전쟁에서 승리했기 때문이 아니라 10년이 걸린 귀향길 그 과정 속에서 겪는 일들을 통해서 영웅으로 거듭난다. 책 "개발자 오디세이아"는 개발자들을 위한 개발자의 경력을 오디세우스가 갖은 고초를 겪는 귀향길에 빗대서 이야기한다. 훌륭 한 개발자란 어떤 사람인가? 이 질문에 대한 정답은 없다. 이 질문에 대한 대답은 기술이라는 사소한(정말 기술은 사소한 부분이다) 분야로부터 시작하여 훌륭한 팀원, 조직원은 어떠해야 하는가로 이어질 수 있으며 결국 훌륭한 인간은 어떠해야 하는가?라는 인문학적 근본 질문으로 귀착되게 된다. 위 인용문처럼 "개발자 오디세..
javascript에서 html code를 string으로 제어하는 경우가 종종 있다. 이 경우에는 vscode가 일반적인 string으로 인식하기 때문에 code syntax highlight를 지원하지 않는다. 그래서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/raw 를 이용해서 const html = String.rawhtml`` 이런식으로 사용했었는데 찾아보니 vscod에 해당 기능을 지원해주는 플러그인이 있더라 https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html es6-string-html - V..
최근 이직한 회사에서 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..
