컴퓨터 그래픽스 수업을 들으며 3D 오브젝트가 어떻게 2D 화면에 표현되는지 궁금했다.3D 렌더링 과정에는 많은 단계가 있는데, 그 중에서도 렌더링 파이프라인은 가장 핵심적인 개념이다.이번 글에서는 렌더링 파이프라인의 각 단계를 깊이 있게 살펴보고자 한다. 들어가기 전에 알아야할 것이 있다.우리가 게임에서 보는 캐릭터들, 사물들은 전부 다 삼각형/다각형으로 이루어져있다.삼각형이 많으면 많을 수록 사물들은 더 정교해진다.렌더링 파이프라인이란?렌더링 파이프라인은 3D 오브젝트를 2D 이미지로 변환하는 일련의 과정이다.이 과정은 컴퓨터 그래픽스에서 가장 중요한 개념 중 하나로, 모니터에 실제로 우리가 볼 수 있는 이미지를 만들어내는 단계들의 집합이다. 3D 오브젝트를 2D 이미지로 만들기 위해서는 세 가지 핵..

오늘 제56회 SQLD 시험 합격 결과가 나왔다.사실 3일 공부하고 시험에 임했기 때문에 이렇게까지 결과가 좋을지는 예상하지 못했다. (도둑놈 심보랄까?)🦹‍♂️그래도 기분 좋게 합격은 했으니 글도 기분좋게 써보려고 한다.2025 SQLD 시험일정시험일정은 위와 같았다.이중에서 필자는 제 56회 시험을 응시했다!!!아직 학교에서 Database 과목을 듣기 전이라 결제하면서도 (이게 맞나?)라는 생각이 들기는 했다.하지만 필자는 웹앱 분야에서 프론트엔드 개발로 많은 프로젝트를 해와서 어느정도 디비구조와 SQL에 대한 이해를 가지고 있었다!(사실 이 이해조차없었으면 못했을 수도?!!)SQLD 시험 구성시험을 준비하면서 시험 구성을 명확히 이해하는 것이 중요하다고 느꼈다.SQLD 시험은 총 50문항(모두 ..

최근에 비슷한 성격의 두 개의 레포지토리를 합치는 작업을 진행했다.사실 첫 레포지토리를 잘못 생성하여 삭제하고 두 번쨰 레포지토리를 생성하였는데 삭제 후에 git commit 내용이 해당 날짜들에서 사라지게 되어 다시 복구하고 두 개의 레포지토리를 병합하기로 했다.(커밋 히스토리 유지하면서)Git에서는 이러한 작업을 위한 다양한 명령어와 옵션을 제공하고 있어 이를 활용해 병합을 진행했다.Git 레포지토리 병합의 기본 개념Git 레포지토리 병합은 서로 다른 두 개 이상의 Git 프로젝트를 하나로 합치는 과정을 말한다.이때 가장 중요한 것은 각 레포지토리의 커밋 히스토리를 유지하는 것이다. Git에서는 히스토리가 없는 병합(git merge)과히스토리를 유지하는 병합(git merge --allow-unre..

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

Turbopack이란?Next.js 프로젝트를 시작하기 위해 npx create-next-app@latest를 실행하면 "터보팩을 사용하시겠습니까?"라는 질문을 받게 된다.처음에는 이것이 무엇인지 잘 몰랐지만, 알아보니 Turbopack은 JavaScript와 TypeScript에 최적화된 점진적 번들러였다. Turbopack은 Rust 언어로 작성되었으며 Next.js에 내장되어 있다.번들러란 웹 애플리케이션을 구성하는 여러 파일들(JavaScript, CSS, 이미지 등)을 브라우저에서 실행 가능한 최적화된 파일로 변환하는 도구다.(기존의 웹팩(Webpack)이 이러한 역할을 해왔지만, Turbopack은 성능에 중점을 두어 개발됨) Turbopack은 Pages 디렉토리와 App Router(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..

Pages Router 개념Pages Router는 Next.js의 전통적인 라우팅 시스템이다./pages 디렉토리 내의 파일 구조를 기반으로 라우트가 자동으로 생성되는 방식으로 동작한다.(직관적이고 간단하게 라우팅을 구현할 수 있다는 장점) 예를 들어, /pages/about.js 파일을 생성하면 자동으로 /about 경로로 접근할 수 있게 된다.또한 /pages/blog/[id].js와 같은 동적 라우팅도 지원하여 블로그 포스트와 같은 동적 콘텐츠를 쉽게 구현할 수 있다.기본적인 Pages Router 구조의 예시 코드는 다음과 같다!// pages/index.jsexport default function Home() { return ( 홈페이지 Next.js Pages R..