서론저번 글에서는 프로젝트를 소개하고 로그인 기능을 만들었다. 이번 글에서는 Supabase 데이터베이스를 이용해서 게시글을 구현한 과정을 보여주려고 한다. (*이번 글에서는 많은 오류를 겪은 관계로 구현하기로 했던 기능을 전부 구현하지 못했다. 😢) 저번 글에서 데이터 요청을 하기 위해서 route handler를 설정한다고 했었는데, 오해할 수 있게 설명을 해서 다시 설명해 보려고 한다. 저번에 설정한 route handler는 Auth.js의 OAuth 인증 흐름만을 관리한다. 따라서 Supabase와 관련된 작업을 할 수 없으므로 Supabase를 이용하려면 추가적인 설정이 필요하다.import { handlers } from "@/auth";export const { GET, POST } = ..

서론진행하던 팀 프로젝트 개발이 끝나고 공백 기간을 의미 있게 보내기 위해서 친구들과 함께 간단한 토이 프로젝트를 하나 만들기로 했다. 그런데, 팀원들이 HG 준비로 인해 바빠져서 이번 기회에 Next.js로 풀스택 개발을 해보고 적극적으로 신기술과 다양한 라이브러리를 도입해보기로 했다. 프로젝트 주제는 친구들 끼리 일상을 공유하는 블로그로 정했다. 이번 글에서는 블로그 로그인 기능을 구현한 과정을 보여주려고 한다. 로그인 구현로그인 구현을 위해서 Next.js에서 자체 로그인을 구현할까도 하였지만 빠른 개발을 위해서 Github OAuth를 사용하기로 하였고, 구현 라이브러리로 Auth.js를 채택했다. Auth.js는 다양한 자바스크립트 프레임워크에서 간편하게 인증 기능을 구현할 수 있는 라이브러리이..

SIPE 멘토링 과정의 모의 면접 중 자바스크립트 동작 과정에 대한 질문이 나왔는데 제대로 답하지 못한 이유로 복습 겸 후일의 실제 면접 대비를 위해서 공부하게 되었다. 우선, 대표적인 자바스크립트 런타임의 종류에는 Chrome, Safari, FireFox와 같은 브라우저와 Node.js, Electron, React Native등의 환경이 있다. 런타임이란?프로그램의 실행환경을 뜻한다. 자바스크립트 런타임 구조 자바스크립트 런타임 요소1. JavaScript Engine 자바스크립트 엔진은 자바스크립트 코드를 인터프리터를 통해 해석하고 실행하는 역할을 한다.이렇게 해석된 코드는 콜스택과 힙메모리에 쌓이게 된다. 콜 스택(Call Stack)은 자바스크립트 코드가 실행되며 생성되는 실행 콘텍스트(E..

나는 이 책을 읽기 전에 항상 "자바스크립트를 너무 빠르게 공부하고 넘어간 것이 아닐까?"하는 고민이 있었다.그렇게 시간이 흐르던 와중 Frontend 스터디의 선배분께서 다음 스터디 활동으로 이 책을 추천해주셨는데 목차만 훓어 봐도 굉장히 좋은 책일 것같은 느낌이 들었고 새롭게 합류하게 될 후배와 같이 활동하기에도 좋을 것 같은 생각이 들어서 이 책을 읽게 되었다. 책을 읽으며 저자의 생각을 내 주관으로 해석하고 책을 읽으면서 서평을 적어보았다.부족하다고 생각한 지식들은 나중에 공부한 뒤 블로그에 따로 작성할 예정이다. 책 소개자바 스크립트 코딩의 기술은 존 모건의 가독성, 표현력, 예측 가능성이 높은 코드를 작성하는 방법이 담긴 책이다. 내용 요약이번 스터디 활동에서 나는 9장 외부 데이터에 접근하라..

오늘은 좋은 개발자가 되기 위한 저만의 4가지 원칙을 알려드리려고 합니다.1. 항상 의문을 가지자스스로 어떤 일이든 '왜?'라고 질문하는 습관을 들여보세요.그냥 무턱대고 하는 일보다, 왜 하는지 알고 하는 일이 더 기억에 남고 많은 경험을 얻을 수 있습니다.그리고 왜 하는지 알았다면, 꾸준히 노력하는 습관을 들여보세요.안되는 일이 있었다면 시간을 두고 꾸준히 노력하는 습관을 통해 점점 성장하는 나를 느끼며 일을 해결할 수 있을 거예요.제가 하고 있는 꾸준한 노력들은 크게 3가지가 있어요. 일주일마다 하나씩 블로그 작성하기, 날마다 행동했던 일이나 기억에 남은 일을 꼭 정리하고 적은 글들을 보면서 회고하기, 기존 코드, 글보다 더 나은 방향이 없는지 고민하는등의 노력을 하고 있어요.하지만, 이런 습관들을 ..

목적최근 Next.js 15 버전을 프로젝트에 도입하면서,새로운 렌더링 방식인 PPR (Partial Pre-Rendering) 을 알게 되었습니다.이번 글에서는 PPR이 무엇인지, 그리고 왜 중요한지 간단하게 알아보겠습니다!PPR을 알아보기 전에 웹 렌더링과 Next.js 측에서는 어떤 방식으로 렌더링을 해왔는지 간단히 짚고 넘어갑시다. 웹 렌더링이란?HTML, CSS, JavaScript 등을 브라우저가 받아서 사용자에게 화면으로 보여주는 과정을 말합니다.즉, 이러한 리소스들을 사용자의 브라우저에 시각화하는 과정을 말합니다!Next.js의 렌더링Next.js의 렌더링은 크게 두 가지 구분 방식에 따라 나눌 수 있어요.첫 째, 사용자의 요청이 들어왔는지에 따라 Static / Dynamic Render..

로딩 전까지 대체 UI(Fallback)을 보여주는 컴포넌트.Fallback어떤 기능이 제대로 동작하지 않을 때 작동하는 기능}> Suspense를 사용하는 이유는 뭘까?Suspense를 사용하기 이전 Data Fetching을 하던 방법은 크게 2가지가 있다.Fetch-on-render컴포넌트가 처음 렌더링 될 때 데이터 요청이 발생한다데이터 흐름렌더링 → 데이터 요청 → 응답 → 리렌더링단점WaterFall 문제가 발생할 수 있다. WaterFall순차적으로 데이터가 요청되는 문제를 뜻한다.병렬적으로 실행되는 방식에 비해 성능 이슈가 있으므로 반드시 해결해야한다. Fetch-then-render컴포넌트가 처음 렌더링 되기 이전 , 업데이트 되기 이전 데이터 요청이 발생한다.데이터 흐름데..

JavaScript, TypeScript, JSX, TSX, JSON을 위한 포매터-> CI 및 개발자 시간을 절약해 준다. JavaScript, TypeScript, JSX를 위한 린터-> TypeScript ESLint, 써드파티 라이브러리에서 가져온 266개의 규칙으로 구성되어 있다. 즉, JS, TS를 개발할 때 사용되는 포매터 겸 린터이다.Biome 왜 사용해야 할까?Rust로 구축되어 속도가 빠르다.초기 설정이 필요하지 않아 간단하다.크기에 상관없이 모든 코드베이스를 처리할 수 있어서 확장성이 높다.내부 통합이 잘 되어 있어서 이전 작업을 재사용할 수 있다.모호한 오류 메시지를 피하고, 문제가 있을 때 문제 발생원인, 해결책을 제시해 준다.외부 지원 없이 표준 라이브러리만으로 지원한다.최적의 ..

오늘은 개발 공부가 아닌 저만의 지식 관리법을 공유해보려고 합니다.개발자가 되기 위해 1년 반동안 지식을 습득하며 관리했던 경험을 토대로 자료를 조사하여 작성하였습니다.정보의 홍수오늘날의 우리는 정보의 과잉으로 인해 판단에 어려움을 겪는 현상인 정보의 홍수 상황에 처해 있습니다.구글 CEO 에릭 슈미트의 말에 따르면 "인류 문명 탄생 이후 2003년까지 만들어낸 정보는 5 엑사 바이트 수준이지만 이제는 단 이틀 만에 그에 해당하는 양의 데이터를 만든다"라고 합니다. 이 말이 나왔던 시기가 2010년이니 지금은 하루에 훨씬 많은 정보가 생겨나고 있겠죠? 정보의 홍수가 끼치는 안좋은 영향이런 정보의 홍수 속에서 우리는 어떤 영향을 받고 있을까요? 첫 번째는 인지 과부하입니다.정보가 넘쳐나는 상황에서 새로운 ..

TypeScript 우선 스키마 검증 라이브러리문자열부터 중첩 객체에 이르기까지 다양한 데이터의 유효성을 검증하는데 사용하는 스키마를 정의할 수 있다.목적프로젝트 진행 중 Zod를 사용해보자는 의견이 나와서 공부하게 되었다. Zod를 사용해야 하는 이유?TypeScript는 컴파일 과정에서만 동작하기 때문에 실제 프로그램이 실행 될 때 유효성을 보장할 수 없다.따라서 유효성 검증 로직을 직접 구현하게 되는데 이처럼 기존의 방식은 굉장히 번거롭다. 따라서 런타임에서 동작하는 유효성 검증인 Zod를 사용해야 한다. 특징런타임 검증: 컴파일 타임에만 타입을 검사하는 TypeScript의 타입 시스템을 런타임으로 확장-> ex) API 응답, 사용자 입력은 런타임에 따라 결정되기 때문에 런타임 시 검증해야 안전..