Next.js는 React 기반의 프레임워크로, 웹 개발자들에게 파일 기반 라우팅을 제공합니다. Next.js 13에서는 새로운 라우팅 시스템인 App Router가 도입되었으며, 기존 Page Router와 함께 사용 가능합니다.이 글에서는 App Router와 Page Router의 차이점, 각각의 특징, 그리고 어떤 상황에서 어떤 라우팅 방식을 선택해야 하는지 명확하게 설명하겠습니다.1. App Router와 Page Router란?App Router (Next.js 13 이상)기반 디렉토리: app/React의 서버 컴포넌트(Server Components)를 기본으로 사용.더 나은 레이아웃 재사용과 중첩 라우팅을 제공.서버 사이드 데이터 패칭과 클라이언트 컴포넌트를 혼합하여 효율적인 UI 구축 ..

2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.1. 폴더 생성 2. VSCode로 폴더 열기 3. 터미널 열기(Crtl + j) // git bash로 열어주세요. 4. Vite를 이용하여 프로젝트 생성npm create vite@latestvite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다. 5. 설치과정Select a framework: React (리액트 사용할거니까)Select a variant: TypeScript / TypeScript + SWC둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Spe..

안녕하세요! 오늘은 제가 React를 공부하면서 가장 먼저 마주한 React Hook 중 UseState에 대해 이야기 해보려고 합니다.useState가 뭐길래? 🤔React에서 가장 기본이 되는 Hook인 useState!쉽게 말하면 우리가 만드는 컴포넌트에 "기억력"이라는 능력을 주는건데요.코드 구조부터 알아보겠습니다.const [count, setCount] = useState(0); count: 우리가 기억하고 싶은 값setCount: 그 값을 변경할 수 있는 함수useState(0): 처음 시작할 때의 값* 두 번째 자리에는 통상적으로, 첫 번째 변수앞에 set을 붙이고 대문자로 시작하는 방법을 사용한답니다!실전에서는 이렇게 사용합니다.보통 사용하는 예시를 보여드리겠습니다.function Li..

Next.js를 사용하시는 분들이라면, 공부를 해보신 분들이라면 "use client"로 페이지 렌더링을 어떻게 할지 설정한 경우가 있을 거에요. 아 혹시!! 렌더링을 설정한다는 것도 모르겼나요?? 괜찮습니다. 제가 그랬거든요.오늘은 "use client"!!!!"대체 언제 써야 하고, 왜 중요한 거지?" 에 대해서 알려드릴게요!1. Next.js: 서버에서? 브라우저에서?Next.js는 SSR(서버 사이드 렌더링) 덕분에 서버에서 HTML을 미리 만들어서 쏴줍니다. 덕분에 SEO에도 좋고 초기 로딩도 빠르죠! 근데… 모든 걸 SSR로 해결할 수는 없어요. 🤔 예를 들어, 우리가 버튼을 클릭하거나 스크롤 이벤트를 처리하고 싶다면 브라우저에서 실행해야겠죠?여기서 바로 CSR(클라이언트 사이드 렌더링)이 ..

사용자 페이지 설계프로젝트의 사용자 페이지를 기획할 때, 어떤 방식으로 사용자가 페이지를 구성할 수 있도록 할지에 대한 고민이 많았습니다. 처음에는 사용자가 원하는 컴포넌트를 자유롭게 배치해서 자신의 페이지를 만들 수 있게 하는 아이디어를 떠올렸습니다. 하지만 곧 몇 가지 문제가 떠올랐습니다.기술 구현의 복잡성: 사용자가 임의로 컴포넌트를 배치하려면, 드래그 앤 드롭과 같은 복잡한 UI 기능을 구현해야 합니다. 이를 위해서는 고급 기술 스택과 추가적인 시간 및 노력이 필요하게 되는데, 이는 프로젝트의 일정에 부담을 줄 것 같았습니다.페이지 구성의 어려움: 사용자가 자유롭게 배치할 수 있는 만큼, 어떻게 배치해야 좋은 페이지가 될지 모를 가능성도 컸습니다. 특히, 디자인 경험이 없는 사용자는 이 기능을 활..

처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.const CardBasic = ({ title, description }: { title: string, description: string }) => { return ( {title} {description} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..

안녕하세요!프론트엔드 분야에서 나의 개발 실력을 테스트하고 스스로 평가하기 위한 몇가지 항목들을 가져와봤습니다. 프론트엔드 기술은 빠르게 변화하고 있으며, 최신 트렌드와 기술들을 따라잡는 것이 중요합니다.이 글에서 여러분들이 본인은 몇 점짜리 개발자인지 스스로 평가해볼 수 있는 항목들을 소개해보고,다음 글부터 저 역시 같이 평가해보는 시간을 가지도록 하겠습니다.1. 웹 뼈대 및 UI 구현 관리JavaScript로 DOM 요소 동적 조작: JavaScript를 사용해 DOM 요소를 동적으로 조작하고, 사용자 입력에 따라 인터페이스를 업데이트할 수 있나요?이벤트 리스너 구현 및 핸들링: 사용자와의 상호작용을 위해 이벤트 리스너를 구현하고 이를 효율적으로 핸들링할 수 있나요?TypeScript로 타입 정의 및..

npx create-react-app .여기서 .은 현재 디렉토리에 설치를 뜻합니다.파일 만들어서 설치 원하시면 . 대신에 파일명 적어주시면 되세요. npm으로 설치하는거는 저는 3분 정도 걸리는거 같아요.yarn이 확실히 빠르긴 한데, 그냥 npm으로 합니다.그동안 잠쉬 폰하거나 유튜브 봐요.설치 완료되면 npm create vite@latestvite패키지를 설치합니다.어떤 모드로 선택해주시면 끝입니다.