sharet 님의 블로그 sharet 님의 블로그

1. 개요React 프로젝트를 Vite 기반으로 개발한 뒤, FileZilla를 통해 웹서버에 직접 업로드해서 배포하는 과정을 정리합니다."로컬에서는 잘 되는데, 서버에 올리면 화면이 하얗게 나온다?"그런 상황에서 제가 겪은 삽질과 해결 방법도 공유합니다.2. 사전 준비2.1 Vite 프로젝트 준비이미 React + Vite 환경에서 개발이 완료된 상태기본 명령어로 빌드:결과물은 dist 폴더에 생성됨pnpm build2.2 FileZilla 설치 및 FTP 정보 준비FileZilla를 설치하고, 호스팅 업체로부터 받은 FTP 정보(호스트, 포트, 사용자, 비밀번호)를 입력FTP 접속 성공 시, 좌측은 로컬 파일, 우측은 서버 파일 시스템3. 문제 발생: 하얀 화면증상로컬에서 pnpm run dev로는 ..

프론트엔드 개발자로 일하다 보면 한 번은 반드시 마주치는 개념, **인증(Authentication)**과 인가(Authorization). 단순히 "로그인 잘 되면 된 거 아냐?" 싶겠지만, 실제 서비스에서는 그 이후가 더 중요하다.오늘은 인증/인가의 개념부터 HTTP 특성, 그리고 쿠키, 세션, JWT가 각각 어떤 역할을 하는지 하나하나 뜯어봤다.✅ 인증 vs 인가구분의미쉽게 말하면인증(Authentication)유저가 누구인지 확인하는 절차로그인인가(Authorization)인증된 유저가 특정 리소스를 사용할 권한이 있는지 확인로그인 후 이 기능 써도 되는지 판단 즉, 로그인만 해도 끝난 게 아니라, 그 이후에 어떤 권한이 있느냐가 중요하다는 이야기다.🌐 HTTP 프로토콜의 특징1. 무상태(Sta..

CSS 프레임워크가 왜 필요한가?혼자 개발할 땐 그냥 스타일 몇 줄 쓰면 끝이었다.그런데 앱 규모가 커지고 팀 작업이 들어가면 얘기가 달라진다.똑같은 마진, 똑같은 색상인데 다 다른 클래스 이름수정할 곳을 몰라서 그냥 덮어쓰기페이지마다 스타일이 일관성이 없음이걸 방지하려면 디자인 시스템이 필요하고, 그걸 도와주는 게 CSS 프레임워크다.Styled-Components 써봤는데 결국 안 썼다처음에는 Styled-Components가 좋아 보였다.컴포넌트 안에 스타일을 넣을 수 있고, props로 조건부 스타일도 가능하고.근데 쓰면 쓸수록 단점이 보였다.클래스 이름이 자동으로 만들어져서 디버깅이 어렵다런타임 성능 이슈가 생긴다클래스 충돌이 여전히 발생한다결국 더 간단하고 빠른 방법을 찾다 보니 Tailwin..

1. use client가 필요한 이유Next.js에서 서버 컴포넌트와 클라이언트 컴포넌트의 구분이 중요합니다. use client는 클라이언트 컴포넌트임을 명시적으로 지정하는데 사용됩니다. 이 설정을 빼면 서버에서만 사용할 수 있는 코드가 클라이언트에서 사용되려고 할 때 오류가 발생할 수 있습니다. 문제 설명"use client";TanStack Query와 같은 클라이언트 전용 라이브러리는 서버 컴포넌트에서 사용될 수 없기 때문에 use client로 명시적으로 클라이언트 컴포넌트로 설정해야 합니다.2. QueryClientProvider 위치 문제QueryClientProvider는 React Query의 컨텍스트 제공자 역할을 하며, 애플리케이션 내에서 이 제공자가 하위 컴포넌트에 QueryCli..

1. SEO 최적화를 위한 메타데이터 설정법 (검색 순위 끌어올리기)왜 메타데이터가 중요한가?메타데이터는 단순한 정보가 아닙니다! 검색 엔진에서 상위에 노출되게 해주는 SEO 필수 요소입니다. 페이지의 제목, 설명, 이미지 등은 웹사이트의 성과를 좌우합니다.Next.js에서 메타데이터로 승부를 보자!next/head를 활용해 SEO에 최적화된 동적 메타데이터를 설정하세요. 검색 순위가 높아지고, 소셜 미디어에서 미리보기도 완벽하게 적용됩니다.실전 팁:generateMetadata를 사용하여 페이지마다 제목과 설명을 동적으로 설정하는 방법을 익히세요. 이 방식으로 SEO 최적화를 통해 구글 상위 노출을 목표로 할 수 있습니다!2. 타입스크립트 오류? 이런 실수, 지금 고치지 않으면 낭패!오류 내용champ..

1. 객체 비구조화 할당에서의 타입 지정 오류문제 발생:export function PlanCardLink({ channel }channel: string) {{ channel }channel: string 이라는 문법 오류 발생channel의 타입을 지정하는 부분이 잘못됨해결 방법:export function PlanCardLink({ channel }: { channel: string }) {비구조화 할당 후 타입을 {} 안에 명시해야 함2. .map() 사용 시 타입 오류문제 발생:{Object.values(items).map((item: Item) => (items가 객체인데, .map()을 호출했을 때 타입 오류 발생Object.values()는 unknown[]을 반환하기 때문에, Item으로..

CSR(Client Side Rendering) – 클라이언트 사이드 렌더링브라우저에서 모든 렌더링을 처리하는 방식이다.장점최초 로드 이후 번들 크기가 작아 부드러운 사용자 경험 제공페이지 전환이 빠름단점초기 로딩(TTV, Time To View)이 오래 걸림자바스크립트가 로드되기 전까지 화면이 비어 있어 SEO에 불리함언제 사용할까?SEO가 중요하지 않은 관리자 페이지, 대시보드사용자 인터랙션이 많은 앱 (예: 챗, 대화형 UI)SSG(Static Site Generation) – 정적 사이트 생성빌드 타임에 HTML을 생성해서 제공하는 방식이다.장점미리 렌더링된 HTML을 제공하므로 페이지 로딩이 빠름 (TTV 짧음)CDN 캐싱이 가능해 성능이 뛰어남SEO 최적화가 잘 됨단점정적인 데이터만 제공 가능..

1. Next.js로 웹 애플리케이션을 만들면 뭐가 좋을까?Next.js는 고품질(High-Quality)의 웹 애플리케이션을 개발할 수 있도록 도와주는 React 기반 프레임워크이다. 단순한 라이브러리가 아니라 웹 개발에 필요한 기능을 제공하는 프레임워크라는 점이 중요하다.1) 성능 최적화서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원코드 스플리팅, 이미지 최적화 등 기본 제공2) SEO 친화적서버에서 초기 렌더링을 해주기 때문에 검색 엔진이 쉽게 크롤링 가능정적 생성 기능으로 미리 HTML 파일을 만들어 성능 향상3) 개발자 경험 향상자동 코드 스플리팅, 핫 리로딩 지원TypeScript 지원 기본 제공API 라우트로 간단한 백엔드 개발 가능4) 확장성Vercel이 만든 프레임워크로 V..