전체 글

개발하다가 에러 너무 많이 봐서 미쳐버릴 것 같아서 이 글 씀.나중에 또 같은 거 디버깅하면서 구글링 하기 싫어서, 정리해둔다.HTTP 상태 코드 중에서 특히 에러 코드(4xx, 5xx) 중심으로.실제 어떤 상황에서 왜 뜨는지, 어떻게 해결할지 간단하게 적음. 4xx: 클라이언트 잘못 (Client Error)클라이언트가 뭘 잘못해서 생기는 에러. 주로 프론트에서 API 호출할 때 많이 뜬다.요청 자체가 틀렸거나, 권한이 없거나, 잘못된 URL 요청 등.상태코드의미설명400 Bad Request잘못된 요청요청 포맷 이상하거나, 필수 값 빠졌거나.401 Unauthorized인증 필요로그인 안 했거나 토큰 누락. Authorization 헤더 빠졌을 확률 높음.403 Forbidden접근 금지권한 있어도 ..

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

Axios가 뭐야?Axios는 REST API랑 통신할 때 쓰는 라이브러리야.쉽게 말해서 클라이언트(프론트엔드)가 서버로 데이터를 보내거나 받을 때 쓰는 도구지.기본적으로 HTTP 요청을 보내는 데 쓰이는 함수 모음집이라고 보면 돼."야 서버야! 나 이거 좀 줘!" 혹은 "야 서버야! 이거 좀 저장해!" 같은 걸 쉽게 할 수 있게 해주는 거야.REST API가 뭐야?REST API는 서버랑 클라이언트가 데이터를 주고받는 규칙이야.서버는 데이터를 주고받을 때 상태를 기억하지 않아서 무상태성을 가지지."한 번 요청하고 끝! 다음 요청 올 때는 몰라~"이게 바로 무상태성이라는 건데,그래서 매번 서버한테 "나 진짜 맞아, 이거 내가 요청하는 거야!"라고 증명해야 돼.그걸 하기 위해서 JWT 토큰을 쓰는 거야.근..

Next.js에서 뷰포트(viewport)를 설정하려다가 "Unsupported metadata viewport" 오류를 만난다면?최근 Next.js 업데이트로 인해 기존의 metadata.viewport 방식이 더 이상 지원되지 않기 때문!지금부터 오류 원인과 해결 방법을 정리해보겠습니다. 😊export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", viewport: "width=360, height=800, initial-scale=1, user-scalable=no",};Next.js layout.tsx에서 위처럼 metadata.viewport을 설..

약 40분 전, ‘커플팰리스’라는 예능을 보면서 흥미로운 생각이 들었다.출연한 부자 남성들이 이상형을 이야기하는데, 연봉? 직업? 모아둔 재산?그런 건 전혀 중요하지 않았다.그들의 선택 기준은 단 하나."예쁜가, 안 예쁜가."처음엔 좀 황당했다.“아니, 결혼인데 외모가 전부야?”그런데 가만히 생각해보니, 이건 단순한 취향 문제가 아니었다.사람들은 왜 예쁜 사람을 좋아할까?이유는 간단하다. 예쁜 사람이 드물기 때문이다. 희소성이 곧 가치다.그럼 이걸 이렇게도 생각해볼 수 있다.우리는 왜 선한 사람을 칭찬할까?그것도 선한 사람이 드물기 때문이 아닐까?만약 세상 모든 사람이 선하다면, 굳이 선을 특별하게 여기지 않을 것이다.마치 우리가 숨 쉬는 걸 당연하게 생각하듯이.여기서 문득 궁금해졌다."그렇다면 인간의 ..

🤔 애자일(Agile)이란?개발을 하시는 분이거나, 프로젝트 매니저(PM)를 준비하시는 분, 혹은 다른 분야에 계신 분들도 애자일(Agile)이라는 단어를 한 번쯤 들어보셨을 거예요. 하지만 애자일이라는 단어가 입에 착 붙지도 않고, 비슷한 개념을 접해본 적도 없어서 낯설게 느껴지지 않나요?저도 처음에는 시험 공부하듯이 암기했지만, 실무에서 애자일이 다양한 분야에서 실제로 활용되는 방법론이라는 걸 알게 됐어요. 그래서 여러분도 쉽게 이해할 수 있도록 정리해보았습니다.애자일이란?애자일(Agile)이란, 빠르고 유연하게 일하는 방식입니다.기존의 전통적인 개발 방식(예: 폭포수 방식)과 달리, 한 번 계획을 세우고 끝내는 것이 아니라 계속해서 수정하고 개선하는 접근 방식을 의미해요.🤷‍♂️ 왜 애자일이 필..

안녕하세요! 😊 요즘 블로그 글이 업로드되지 않았습니다. 그동안 정보처리기사 자격증 시험 준비와 어학성적을 위한 오픽 시험 준비를 하느라 바빴고, 동시에 ICT 인턴십도 준비하고 있었습니다. 그래서 개발할 시간이 없었어요. 오랜만에 글을 씁니다. 오늘은 ICT 인턴십 합격하게 된 제 이야기를 풀어보려고 합니다.사실, 쓸까 말까 고민했지만, 제가 지원할 때부터 최종 합격까지 다른 분들의 합격 후기를 많이 읽으면서 도움도 받았고, 재미도 있었어요. ✨ 그래서 25년도 하반기부터 새롭게 지원하실 분들에게 도움이 되고, 소소한 재미를 전달할 수 있으면 좋겠다는 마음에서 이 글을 시작합니다. 💪ICT 학점연계 인턴십 프로그램 소개아마 이 글을 보시는 분들이라면 ICT 학점연계 인턴십에 대해 대충은 아실 거라고..

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