전체 글63 한입 코딩 문예제 참여 후기 : 커피에 진심이었던 나 이정환 선생님 네이버 카페에서 '한입 코딩 문예제'가 열렸다 !!사실 특별한 계획이 있었던 건 아니고, 심심하기도 했고 커피가 탐나기도 해서 가벼운 마음으로 참여하게 됐다.소소한 이벤트라고 생각했는데, 막상 키보드에 손을 얹으니 괜히 욕심이 생겼다.조금 더 재미있게, 조금 더 잘 써보고 싶다는 마음에 생각보다 시간을 많이 들이게 됐다.처음엔 몇 줄 쓰다 말까 했는데, 단어 하나하나를 고르면서 나름대로 진심을 담게 됐다. Liked아무 계획 없이 가볍게 참여했는데, 글을 쓰는 과정 자체가 재미있었다.키보드에 손을 얹고 글을 고민하는 시간이 오랜만에 몰입감을 줬다.결과적으로 상위 5인에 들어서 수상하게 된 것도 뿌듯했다.Learned작은 이벤트라도 진심을 담으면 좋은 결과로 이어질 수 있다는 걸 느꼈다.'심.. 2025. 4. 27. [Next.js] Data Fetching Data fetching은 말 그대로 어딘가에서 데이터를 '가져오는' 작업을 의미하며보통은 서버나 API로부터 데이터를 요청에서 받아오는 것을 말한다. Client-side fetching (fetch는 클라이언트에서 일어난다.)브라우저(클라이언트)가 서버(API)에 요청을 보내는 방식.fetch()는 브라우저 내장 함수이기 때문에 클라이언트 환경에서만 작동한다.React에서는 보통 useEffect와 useState를 같이 사용해서 fetch를 처리한다. 클라이언트 컴포넌트에서의 fetch 예시 "use client";import { useState, useEffect } from "react";export default function Page() { const [isLoading, setIsLoa.. 2025. 4. 14. [Next.js] Loading UI Next.js는 어떤 순서로 화면을 보여줄까?Next.js 앱 라우팅 구조에서는 사용자가 페이지를 방문할 때 가장 먼저 보여주는 UI 요소들이 있다.사용자가 특정 페이지로 이동했을 때 전체 페이지를 기다릴 필요 없이,부분적으로 먼저 보여줄 수 있는 UI를 Next.js가 자동으로 렌더링해준다.layout.tsxpage.tsx에 도달하기 전에 보여주는 일부 UI (ex. Navigation)loading.tsx loading.tsx란?Next.js가 React의 Suspense 기능을 활용하여 콘텐츠가 로드되는 동안 보여줄 UI를 만드는 데 사용된다.app/ └── movies/ ├── page.tsx // 실제 페이지 └── loading.tsx // 페이지가 준.. 2025. 4. 14. useEffect useEffect리액트에서 컴포넌트가 렌더링된 이후에 특정 작업을 실행하고 싶을 때 사용하는 훅(Hook)대표적으로 API 호출, 타이머 설정, 이벤트 리스너 등록, 콘솔 출력 등과 같은 "부수 효과(side effect)"를 처리할 때 쓰인다. useEffect(() => { // 실행하고 싶은 코드}, [의존성]); 첫 번째 인자: 실행할 함수두 번째 인자: 의존성 배열 (dependency array)→ 배열 안에 있는 값이 바뀔 때마다 이 코드가 다시 실행된다. 두 번째 인자가 빈배열일 경우, 컴포넌트가 처음 나타날 때 한 번만 실행된다. ( API 호출 / 초기데이터 불러오기 )상황useEffect 쓰는 이유데이터 요청렌더링 후 fetch/axios로 API 호출이벤트 등록브라우저 이벤트 추가.. 2025. 4. 14. [Next.js] Route Groups, Dynamic Routes, Metadata Route Groups routes들을 논리적으로 그룹화할 수 있게 해주는 기능URL 경로에는 영향을 주지 않는다. -> 파일 구조를 더 명확하게 정리할 수 있다.사용방법 : 폴더 이름을 괄호 ( ) 로 감싼다.파일구조생성 URLapp / about / page.tsx/aboutapp / (about) / page.tsx/app / (home) / about.tsx/about Dynamic route (동적 라우팅)폴더 이름에 대괄호 [ ] 를 사용하면 동적 라우팅(Dynamic Routing) 을 만들 수 있다.app/ └── product/ └── [id]/ └── page.tsx 위 구조는 /product/123, /product/abc, /product/42 등 다양한 U.. 2025. 4. 13. [Next.js] layout.tsx Next.js에서는 layout.tsx 파일을 이용해 페이지의 레이아웃을 구성할 수 있다.이 레이아웃 시스템은 중복 없이 구조적인 UI를 만들 수 있게 해주고, 페이지 간 전환 시에도 공통 UI를 유지하게 해준다. 레이아웃 파일의 기본 개념 layout.tsx는 Next.js가 페이지를 렌더링하기 전에 먼저 확인하는 파일.각 디렉토리에 존재할 수 있으며, 중첩 레이아웃을 구성할 수 있다.즉, 상위 디렉토리의 레이아웃 안에 하위 디렉토리의 레이아웃이 포함되어 렌더링됩니다. 레이아웃의 렌더링 과정 Next.js는 먼저 최상위(root) 레이아웃부터 렌더링을 준비한다. /app/layout.tsx그 후 현재 URL을 기준으로 해당 경로의 디렉토리로 이동하여,해당 디렉토리에 layout.tsx가 있는지 확.. 2025. 4. 13. [Next.js] 하이드레이션(Hydration) 웹 렌더링 방식: CSR과 SSR💡렌더링 (Rendering)우리가 만든 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정 즉, 사용자가 볼 수 있는 웹페이지를 만드는 과정인데, HTML을 "어디서" 만들 것인지에 따라 방식이zing829.tistory.com Next.js는 어떻게 렌더링할까?💡렌더링(Rendering) React와 같은 라이브러리에서 우리가 작성한 컴포넌트(JSX)는 브라우저가 직접 이해할 수 없다. 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환해주는 과정이 바로 렌더링이다. Next.js는 기본적으로 SSR(Server Side Rendering)을 사용한다.SSR: 서버에서 HTML을 미리 만들어서 브라우저에 전달하는 방식사용자가 페이지.. 2025. 4. 12. [리액트 7기] 6주차 주간회고 💡핵심 3줄 요약프레임워크 첫 사용천천히 꾸준히 킵고잉💡이번 주 목표[✅] 포기하지말자[✅] 남들과 속도는 달라도 천천히 계속 해보자💡칭찬하고 싶은 점-💡고치거나 버려야 할 점- 오늘 할 일을 뒤로 미루기 ! 뒤로 미루기 ! 뒤로 미루기 ! (이제그만 ㅜ ㅜ)💡일일 스프린트더보기04월 05일 (토)04월 06일 (일)[❌] 졸업과제 제출04월 07일 (월)[✅] Next.js #1.1 -#2.1[✅] 퀴즈제출04월 08일 (화)[✅] Next.js #2.1 -#2.10[❌] 퀴즈제출 - 잠들어버렸다.04월 09일 (수)[✅] Next.js #3.0-#3.8[✅] 퀴즈 제출04월 10일 (목)[✅] Next.js [ SSR CSR ] 렌더링 개념 이해하기04월 11일 (금)[✅] 주간회고 작성[✅.. 2025. 4. 11. 웹 렌더링 방식: CSR과 SSR 💡렌더링 (Rendering)우리가 만든 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정 즉, 사용자가 볼 수 있는 웹페이지를 만드는 과정인데, HTML을 "어디서" 만들 것인지에 따라 방식이 달라진다.💡CSR (Client Side Rendering)렌더링 위치: 브라우저(클라이언트) CSR은 클라이언트 사이드 렌더링의 줄임말로, 브라우저에서 렌더링을 수행한다는 뜻이다. 대표적인 기술로는 React(CRA,Vite) , Vue, SPA구조가 있다. 동작 방식사용자가 웹사이트에 접속하면 HTML 파일이 로딩된다.HTML 안에는 실제 콘텐츠가 거의 없고, 대부분 자바스크립트 파일을 불러오는 스크립트만 존재한다.브라우저는 JS를 다운로드하고 실행한다.React 등의 라이브러리가 작.. 2025. 4. 11. 이전 1 2 3 4 ··· 7 다음
