본문 바로가기

전체 글116

우리가 Next.js를 사용해야 하는 이유 안녕하세요 웹 36기 YB 조혜린입니다이번 합동 세미나 초기 세팅을 하면서 next.js를 접하게 되었는데요...next.js는 서버랑 관련있는 거니까 저랑은 깊게 관련 없는 줄만 알고 살아왔지만..프론트엔드 개발 시장에서 next.js 공부가 필요하다는 걸 깨닫고 이번 아티클 주제로 작성하게 되었습니다 사실 어떤 기술을 공부하던 제일 중요한게왜 사용했는가?를 알아야 합니다 '왜?' 라는 질문에 대한 답변 안에 그 기술의 핵심이 담겨있겠죠? 먼저 next.js를 사용하는 이유로 널리 알려진 것은 바로 next.js의 SSR 방식 지원때문이였습니다. 렌더링 방식에는 크게 SSR과 CSR이 있는데요 CSRClient-side-rendering의 약자로 렌더링이 클라이언트 쪽에서 일어난다는 뜻입니다.서버는 .. 2025. 5. 13.
복잡한 경로 관리는 그만! React 프로젝트에서 라우터 구조와 절대경로 설정 정리하기 안녕하세요 웹파트 YB 문혜성입니다!4주차 세미나에서는 라우터 설정하는 법에 대해 학습했었는데요 마침!! 합동 세미나에서 초기 환경 세팅을 하며 실제로해당 내용을 실전에서 직접 구상해보며 이 주제에 대한 관심이 더욱 깊어졌습니다.따라서 이번 글에서는 세미나에서 배운 내용을 바탕으로 React 프로젝트에서 라우터 구조를 효율적으로 관리하는 방법과절대경로 설정을 통해 협업과 유지보수를 수월하게 만드는 팁을 정리해보았습니다. ✨📁 1. 라우터 구조를 분리하는 이유 React Router를 사용할 때, 컴포넌트 내에서 Route를 직접 나열하는 방식은 소규모 프로젝트에서는 큰 문제가 없지만, 규모가 커지면 다음과 같은 문제가 발생합니다.라우트 수가 많아질수록 가독성이 급격히 떨어짐새로운 페이지가 추가될 때마다.. 2025. 5. 12.
API 모듈화 - axios Instance 활용하기 안녕하세요 YB 박소이입니다.세미나 때 API 요청을 다뤘는데, axios 인스턴스를 활용해 API를 모듈화할 수 있는 방법이 있다고 해서 알아 보았습니다!보통은??useEffect(() => { const fetchUsers = async () => { try { const res = await axios.get(''); setUsers(res.data); } catch (err) { console.error(err); } }; fetchUsers();}, []); API 요청 다들 어떻게 하고 계신가요..??저는 보통 이런 식으로 컴포넌트 안에서 직접 요청하는 방법을 사용했습니다. 하지만 이렇게 하다 보니 컴포넌트마다 axios를 반복적으로 작성해야 하.. 2025. 5. 12.
아이스크림 어떤 맛 좋아하세요? 엄마는 외계인? 사빠딸? 녹차? 민트초코😍? 딸기? 망고? 블루베리? 레몬? 복숭아? 라즈베리? 피스타치오? 호두? 아몬드 봉봉? 쿠키 앤 크림? 그 중에서 하나를 고르자면... 엄나는 외계인?사빠딸?녹차?민트초코?딸기?망고?블루베리?레몬?복숭아?라즈베리?피스타치오?호두?아몬드 봉봉?쿠키 앤 크림? 저는 Vanilla-extract를 고르겠습니다.https://vanilla-extract.style/ vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.Zero-runtime Stylesheets-in-TypeScript.vanilla-extract.style 이번 합동 세미나에서 Vanilla-extract를 사용하기로 해서 공부 겸 작성해 볼 생각입니다. Vanilla-Extract란?Vanilla-extract는 TypeScript를 전처리기로 사용해 빌드 시점에 정적 CSS 파일을 생성하는 제로 런타임 스타일링 라이브러리입.. 2025. 5. 12.
[3주차] - Routing (App Router) 이번에는 Next.js의 Routing 방식 중 13버전부터 새롭게 등장한 App router 방식에 대해서 살펴볼 것이다. Page router와의 비교는 이전 글에서 작성을 하여 그 부분은 생략하고 App router의 자체 라우팅 방법에 대해서만 글을 구성하였다. 1. App Router란?Next.js 13버전부터 등장한 routing의 새로운 패러다임이다. App router는 React의 신기능인 Server Components, Server Actions 등을 구축하기 위해 새롭게 도입되었다. 2. 라우팅 정의 기본기본적으로 App router는 파일 시스템 기반의 라우터를 사용해서 폴더를 경로 정의에 사용한다.각 폴더의 이름이 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다. 또한 p.. 2025. 5. 11.
타입스크립트 제네릭(Generic), 제대로 이해하기 안녕하세요, 웹 OB 김채은입니다 -! 타입스크립트를 사용해 개발을 하다보면, 어느 순간 제네릭(Generic)이라는 문법을 접하게 되는데요..! 처음에는 any와 비슷해 보일 수 있지만, 실제로는 타입 추론과 코드 재사용성 면에서 훨씬 강력합니다. 이 글에서는 책 "우아한 타입스크립트 with 리액트"의 내용을 바탕으로 제네릭의 개념, 사용 방법, 그리고 주의할 점을 정리해보려 합니다.📌 제네릭이란?제네릭(Generic)은 C, Java 같은 정적 타입 언어에서 다양한 타입에 대해 동일한 코드를 재사용할 수 있도록 고안된 문법입니다. 타입스크립트도 정적 타입 언어이기 때문에 제네릭을 지원합니다. 예를 들어 다음과 같이 타입을 변수처럼 취급할 수 있어요:function exampleFunc(arg: .. 2025. 5. 9.

티스토리툴바