평소와 같이 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..

1️⃣ GitHub API란?GitHub API는 개발자들이 GitHub의 데이터를 가져와서 앱이나 웹사이트에 활용할 수 있도록 도와주는 서비스입니다.예를 들어, 유저 프로필, 레포지토리 목록, 팔로워 수 같은 데이터를 API를 통해 얻을 수 있어요.저는 이 프로젝트에서 유저 프로필 정보를 조회하는 API를 사용했습니다.API URL 예시:https://api.github.com/users/{username}→ {username} 부분에 조회하고 싶은 GitHub 유저의 이름을 넣으면 됩니다.예시:https://api.github.com/users/kimjusnu2️⃣ GitHub API 연결 준비GitHub API는 기본적으로 비인증 요청도 지원합니다.하지만 비인증 요청은 시간당 60회로 제한되어 있어..

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

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

코드를 작성하다 보면, 코드 블록을 하이라이트해서 가독성을 높이는 것이 중요합니다. 특히 기술 블로그나 문서 작성에서 코드를 더 잘 보여주기 위해 코드 하이라이트 기능을 자주 사용하죠. 이번 프로젝트에서도 MDX 파일에서 코드 블록을 잘 보여주기 위해 하이라이트 문제를 해결한 경험을 공유하려고 합니다.문제: MDX 파일에서 코드 블록 하이라이트가 제대로 되지 않음처음에는 MDX 파일에서 코드 블록을 작성했지만, 코드의 가독성이 떨어졌습니다. 코드 블록에 하이라이트가 제대로 적용되지 않았기 때문에, 이를 해결하기 위해 라이브러리를 찾아보게 되었습니다.더보기✅MDX 파일이란?MDX는 Markdown과 JSX를 결합한 포맷입니다. Markdown은 간결하게 글을 작성할 수 있는 언어로, 주로 블로그나 문서 작..

프로젝트를 진행하면서 다크 모드를 추가로 작업하게 되었습니다. 이 과정에서 팀원들의 제가 수정하는 일이 생겼습니다. 그런데 코드를 이해하는 데 시간이 오래 걸리는 문제를 겪게 되었습니다. 특히 주석이 거의 없거나 부족할 때, 상대방이 짠 코드를 파악하는 데 어려움이 많았습니. 그때 깨달은 것이, 코드 작성 시 중요한 부분만 주석을 남기는 게 아니라 팀 프로젝트에서는 모든 사람이 코드를 쉽게 이해할 수 있도록 주석을 잘 작성하는 것이 중요하다는 사실입니다.이 글에서는 주석을 효율적으로 다는 방법과, 팀원들이 코드의 흐름을 쉽게 이해할 수 있도록 도와주는 좋은 주석 작성법에 대해 알아보겠습니다.왜 주석이 중요한가?코드의 가독성 향상주석은 코드를 읽는 사람이 코드의 의도와 구현 방식을 더 쉽게 이해할 수 있도..

Atomic 디자인은 UI 컴포넌트를 설계할 때 작은 단위부터 큰 단위까지 점진적으로 조합해나가는 방법론입니다. 이 방법론은 Brad Frost가 제안한 디자인 시스템으로, 생물학의 원자론에서 착안해 UI 컴포넌트를 마치 원자(atom), 분자(molecule), 유기체(organism)와 같이 작은 구성 요소들로 나누어 관리하는 구조입니다.이 디자인 방법론의 핵심은 재사용성과 확장성을 고려한 컴포넌트 설계를 가능하게 한다는 점입니다. 프로젝트가 커지고 복잡해질수록 단일 컴포넌트가 여러 곳에서 사용될 수 있는데, 이때 Atomic 디자인을 적용하면 코드 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.Atomic 디자인의 5가지 구성 요소Atoms (원자)원자는 더 이상 나눌 수 없는 가장 작은 단위입니다..

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