안녕하세요! 오늘은 Next.js 프로젝트에서 JWT 토큰을 이용해서 API를 호출하는 방법에 대해 이야기해보려고 합니다.저도 처음 해보는 거라 엄청 떨리고, 뭐가 잘 안 되면 어쩌나 걱정도 많았는데요,어찌저찌 하다 보니까 결국 성공해서 기분이 너무 좋더라고요!그래서 저처럼 처음 도전하는 분들을 위해 정리 겸 공유하려고 합니다.토큰 기반 API 호출이 뭔가요?프로젝트를 만들다 보면, 서버와 데이터를 주고받을 때 "너 누구냐?"를 꼭 물어봐야 할 때가 있어요.그럴 때 쓰는 게 바로 JWT (JSON Web Token)인데, 이걸 Authorization 헤더에 붙여서 보내면,서버는 "오, 네가 맞네~" 하고 요청을 받아주는 거죠.헤더에 붙이는 방법Authorization: Bearer 근데 이걸 매번 넣어..

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 구축 ..

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

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

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

웹 개발을 하다 보면 링크를 클릭했을 때 새 탭에서 열리도록 설정하는 경우가 자주 있습니다.이를 위해 보통 target="_blank" 속성을 사용합니다. 하지만 이 속성만 사용했을 때 보안 문제가 발생할 수 있다는 사실을 알고 계셨나요? 이번 글에서는 target="_blank"와 함께 rel="noopener noreferrer"를 사용하는 이유와 그 방법에 대해 알아보겠습니다.1. target="_blank"의 기본 기능target="_blank"는 HTML에서 링크()를 클릭할 때 새 탭에서 열리도록 설정하는 속성입니다. 예를 들어, 아래와 같이 작성하면 링크가 새 탭에서 열립니다.Visit사용자는 이 링크를 클릭하면 기존 페이지는 그대로 유지된 채로 새 탭에서 링크된 페이지를 열 수 있습니다. ..

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} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..