이 글에서는 필자가 프로젝트에서 개발한 뉴스 분석 AI 서비스를 크롬 웹 스토어에 배포한 경험을 공유해보고자 한다!무슨 프로젝트?필자는 NEWSEE란 서비스를 개발했다. NEWSEE는 뉴스 기사를 AI가 분석하여 핵심 내용을 쉽게 이해할 수 있도록 도와주는 크롬 익스텐션이다.사용자가 뉴스 URL을 입력하면 -> AI가 자동으로 제목을 재구성하고 -> 요약을 생성하며 -> 키워드를 추출하고 -> 난이도를 분석하는 등 다양한 분석 결과를 제공한다.이 프로젝트에서 필자는 Next.js의 App Router, LangChain을 활용한 AI 파이프라인, 크롬익스텐션 개발, 그리고 Chrome Web Store 배포까지 전체 과정을 경험할 수 있었다!!!이 글은 크롬 익스텐션을 스토어 배포한 경험에 목적을 두고 ..

Next.js Metadata란?Next.js 13버전부터 도입된 App Router에서는 metadata API를 통해 웹 페이지의 메타데이터를 쉽게 관리할 수 있게 되었다.메타데이터란 HTML 문서의 태그 내에 존재하는 정보들로, 웹 페이지의 제목, 설명, 키워드, Open Graph 태그 등을 포함.이러한 메타데이터는 검색 엔진 최적화(SEO)에 중요한 역할을 하며, 소셜 미디어에서 공유될 때 웹 페이지가 어떻게 표시될지 결정한다. Next.js의 metadata API는 개발자가 각 페이지 또는 레이아웃 컴포넌트에서 메타데이터를 직접 정의할 수 있게 해주어, 페이지별로 맞춤화된 메타데이터 설정이 가능하다.특히 TypeScript와 함께 사용하면 타입 안정성을 보장받으면서 메타데이터를 관리할 수 ..

App Router가 도입되면서 Next.js 커뮤니티에서는 src 디렉토리 사용에 관한 논의가 활발해졌다.학부생으로서 이러한 프로젝트 구조의 개념과 장단점을 이해하는 것은 웹 개발 역량을 한 단계 높이는 데 중요하다고 생각했다.이에 App Router 환경에서 src 디렉토리를 사용할지 말지에 대한 분석을 해봤다.src 디렉토리 사용의 장점src 디렉토리를 사용하면 여러 가지 이점이 있다.우선 애플리케이션 코드와 설정 파일을 명확하게 분리할 수 있다 => 이는 프로젝트가 커질수록 더 중요해진다.루트 디렉토리에는 package.json, next.config.js, .eslintrc.js, tsconfig.json 등의 설정 파일만 두고, 실제 개발 코드는 모두 src 안에 넣어 관리할 수 있다.App ..

Next.js 라우팅 시 데이터 전달 방법 개요Next.js에서 페이지 간 이동 시 데이터를 전달하는 방법은 여러 가지가 있다.이전 글에서 Link 컴포넌트와 useRouter 훅을 사용한 페이지 이동 방법에 대해 알아보았다면, 이번에는 그 과정에서 데이터를 어떻게 전달할 수 있는지 알아보려고 한다.(보시지 못한 분들은 아래 글을 참고 바란다.) [Next.js] Next.js + TypeScript에서의 페이지 이동 방법 총정리Next.js에서의 페이지 이동 방법 개요Next.js에서 페이지 간 이동을 구현하는 방법은 크게 두 가지가 있다.Link 컴포넌트 사용하기useRouter 훅을 사용하여 프로그래매틱하게 라우팅하는 방법일반 Reactbbin-guuuu.tistory.com 페이지 간 데이터를 전..

Next.js에서의 페이지 이동 방법 개요Next.js에서 페이지 간 이동을 구현하는 방법은 크게 두 가지가 있다.Link 컴포넌트 사용하기useRouter 훅을 사용하여 프로그래매틱하게 라우팅하는 방법일반 React에서 사용하는 useNavigate나 React Router의 Link와 비슷한 역할을 한다고 생각하면 이해하기 쉽다. 두 방법 모두 클라이언트 사이드 라우팅을 지원하여 전체 페이지를 다시 로드하지 않고 페이지 간 빠른 전환이 가능하다.이는 사용자 경험을 향상시키고 애플리케이션의 반응성을 높여준다.Link 컴포넌트를 사용한 클라이언트 사이드 라우팅Link 컴포넌트는 Next.js에서 가장 기본적인 페이지 이동 방법이다.이 컴포넌트는 HTML의 태그를 확장한 것으로, 클릭 시 JavaScri..

최근에 Next.js를 계속 공부하고 있는데 그 중 가장 헷갈렸던 부분 중 하나가 'use client' 지시어와 React Hooks의 관계였다.Next.js 13 버전부터 도입된 App Router와 함께 서버 컴포넌트가 기본값이 되면서, React의 useState, useEffect와 같은 훅을 사용하기 위해서는 'use client' 지시어가 필요하게 되었다.이것이 정확히 무엇을 의미하는지, 그리고 이로 인해 SSR(Server-Side Rendering)과 어떤 관계가 있는지 깊이 이해하고 싶어 공부를 시작했고, 이 글에서는 Next.js에서 React Hooks를 사용할 때 'use client' 지시어가 필요한 이유와 이것이 렌더링 방식에 미치는 영향에 대해 자세히 살펴보려 한다.먼저 Ne..

Next.js와 TypeScript로 웹개발 공부를 하면서 정말 간단하게 로그인 기능을 구현하여 main페이지로 라우팅하는 부분을 연습해보았다.이번 글에서는 로그인 페이지부터 인증 후 메인 페이지로 넘어가는 과정까지, 전체 흐름을 코드와 함께 상세하게 설명하려고 한다.특히 각 기술과 개념에 대한 설명을 충분히 제공하여 나와 같이 웹 개발을 배우는 학생들이 이해하기 쉽도록 작성했다.프로젝트 구조 살펴보기Next.js 프로젝트의 구조를 보면 다음과 같다.├── app│ ├── globals.css # 전역 스타일│ ├── layout.tsx # 앱 레이아웃│ ├── page.tsx # 로그인 페이지 (/)│ └── main│ └── pag..

Next.js는 리액트 기반의 프레임워크로서 서버 사이드 렌더링(SSR)을 기본적으로 지원한다.프론트엔드 개발자로서 스타일링 방식을 선택할 때 많은 옵션이 있지만, 그중에서도 스타일드 컴포넌트(styled-components)는 리액트 생태계에서 인기 있는 CSS-in-JS 라이브러리이다.하지만 Next.js의 SSR 환경에서 스타일드 컴포넌트를 사용할 때 예상치 못한 문제가 발생할 수 있다. 특히 TypeScript를 함께 사용하는 환경에서는 추가적인 타입 관련 설정도 고려해야 한다이 글에서는 이러한 문제가 왜 발생하는지, 그리고 어떤 영향을 미치는지 직접 실험을 통해 정리해보고자 한다!!!(styled-components에 대한 기본적인 이해가 있다고 가정하며 진행하겠다.)Next.js에서의 SSR ..

Next.js 라우팅의 기본 개념Next.js의 가장 큰 특징 중 하나는 파일 시스템 기반 라우팅(File-system based routing)이다.이 방식은 React의 SPA(Single Page Application)에서 흔히 사용되는 React Router와 같은 별도의 라우팅 라이브러리가 필요 없다는 큰 장점이 있다.Next.js는 프로젝트의 디렉토리 구조와 파일명을 기반으로 자동으로 라우팅을 구성한다. 파일 시스템 기반 라우팅이란 간단히 말해 폴더와 파일의 구조가 곧 웹 애플리케이션의 URL 경로(path)가 되는 방식이다.예를 들어, /pages/about.tsx 파일은 example.com/about URL로 접근할 수 있다.이렇게 직관적인 구조는 프로젝트의 구조를 이해하기 쉽게 만들고,..

개발 환경 준비하기Next.js와 TypeScript 프로젝트를 시작하기 전에 먼저 필요한 개발 환경을 준비해야 한다.가장 기본적으로 필요한 것은 Node.js와 패키지 매니저(npm, yarn, pnpm 중 하나)이다! 1. Node.js 설치Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치하면 된다.(Node.js를 설치하면 npm(Node Package Manager)도 함께 설치된다!) Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org2. 코드 에디터 준비필자는 VS Code를 주로 사용하고 있어서 TypeScript 관련 확장 ..