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

평소와 같이 next를 설치중에 갑자기 못보던 문구가 생겼다.Would you like to use Turbopack for next dev? ??? 뭐지,, 분명 이런 조건설정은 없었는데. 이 글에 들어온 당신도 나와 비슷한 의문이 들었을거라 생각하여 글을 작성한다.만약 설치 과정에서 "Would you like to use TurboPack for next dev?"라는 질문을 받았다면, 이는 기존의 Webpack을 대체할 차세대 개발 서버로 TurboPack을 사용할 수 있음을 의미한다. (Next.JS는 기본으로 Webpack을 사용함.) 지금부터 TurboPack이 무엇인지, 어떤 장점이 있는지, 그리고 왜 Next.js에서 추천되는지 설명하겠다.🌪️ TurboPack이란?TurboPack은 V..

중간고사가 끝났는데, 10월도 끝나가네요. 2024년도 끝나가고요, 25년까지 100일도 안남았다는데,,사담은 각설하고 GitHub Profile Viewer 프로젝트 회고 정리합니다.https://www.notion.so/GitHub-Profile-Viewer-12aeaede9dc58013a601c71d15bfae5d?pvs=4시험이 끝나고 약 3일간의 일정을 잡고 개발을 진행했습니다.💡 GitHub Profile Viewer, 어떤 프로젝트인가요?kimjusnu/github_profile_viewer: GitHub_Profile_Viewer GitHub - kimjusnu/github_profile_viewer: GitHub_Profile_ViewerGitHub_Profile_Viewer. Cont..

GitHub 레포지토리프로그램의 소스 코드는 GitHub 레포지토리에서 확인할 수 있습니다. 해당 레포지토리에서는 프로그램의 사용법과 설치 방법에 대한 자세한 설명이 포함되어 있습니다.kimjusnu/4094Fixer: Resolve Next.js 4094 errors with automatic cache clearing and package reinstalling. (github.com) GitHub - kimjusnu/4094Fixer: Resolve Next.js 4094 errors with automatic cache clearing and package reinstalling.Resolve Next.js 4094 errors with automatic cache clearing and pack..

프로젝트를 진행하면서 Next.js에서 갑작스럽게 4094 에러가 발생하기 시작했습니다. 처음에는 프로젝트가 정상적으로 작동했지만, 진행되면 될수록 이 에러가 점점 빈번해졌습니다. 에러 해결을 위해 다양한 방법을 시도했지만 쉽지 않았고, 결국 스스로 문제의 원인을 찾아 해결하게 된 과정을 공유하려 합니다.처음 4094 에러가 발생했을 때, 저는 먼저 구글링을 통해 문제를 해결하려 했습니다. 하지만 이 에러에 대한 정보는 거의 없었고, Stack Overflow와 GitHub에서도 명확한 해결책을 찾기 어려웠습니다. 대다수의 답변이 이 에러에 대해 잘 모른다는 것이었습니다.1. 재부팅과 기본적인 해결책 시도일반적으로 시스템에서 문제가 발생하면 재부팅부터 시도하는 것이 첫 번째 방법입니다. 저는 VSCode..

Componique 프로젝트는 다양한 최신 기술 스택을 바탕으로 UI 컴포넌트 라이브러리를 구축했습니다. 이번 글에서는 이 프로젝트에서 사용한 기술 스택을 하나씩 설명드리겠습니다.1. 개발 프레임워크 및 언어Next.jsComponique의 개발은 Next.js로 이루어졌습니다. Next.js는 React 기반의 프레임워크로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 이를 통해 SEO에 유리하고, 빠른 페이지 로딩 속도를 유지할 수 있었습니다. 특히 컴포넌트 기반 개발을 통해 코드 재사용성을 극대화했습니다.TypeScriptTypeScript는 자바스크립트의 정적 타입 언어로, 코드의 안정성과 유지보수성을 높이기 위해 사용했습니다. 프로젝트가 커지면서 발생할 수 있는 타입 관..

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

라우팅(Routing)라우팅은 사용자가 요청한 URL에 따라서 어떤 페이지를 보여줄지 결정하는 과정을 말해요.Next.js에서는 앱 라우팅과 페이지 라우팅을 통해 URL 경로와 페이지 파일을 직접 연결합니다.사용자가 /about 경로를 입력하면, Next.js는 해당 경로와 맞는 페이지를 표시합니다. 일종의 웹 네비게이션이라고 생각하면 됩니다. 라우터(Router)라우터는 이러한 라우팅을 관리하고 처리하는 기능을 제공하는 도구입니다. Next.js에서 페이지 라우터는 next/router, 앱 라우터는 next/navigation이 라우터 관리 도구입니다. 저희는 해당 도구에서 제공하는 여러가지 훅과 컴포넌트를 사용하여 페이지를 탐색합니다. 간단히 말해서 라우터는 사용자의 URL을 해석하고 해당 URL에..