본 포스팅은 10x 체험단 활동의 일환으로 강의 수강권을 제공받아 작성한 후기입니다. 안녕하세요, 이번에 아주 좋은 기회로 코드잇 10x - "초기 비용 0원으로 부수입 창출 AI로 블로그 수익화 하기" 강의를 수강하게 되었습니다! 앞으로 5주 동안 해당 강의를 수강하며 얻은 정보들을 바탕으로 꾸준히 성장 기록을 남기려고 합니다. 검색을 통해 깊이 있는 정보와 실제 경험 정보를 찾는 사람들에게 블로그는 여전히 수요가 강한 매개체입니다.네이버 블로그 리포트 기준 2025년 한 해 동안 3억 3천만 개의 글이 발행되며 역대 최대 규모를 기록했고, 순 방문자 수도 4,500만 명을 돌파했다고 하네요! 이처럼 블로그는 여러 서비스와 플랫폼이 발달한 지금에도 여전히 영향력있는 정보 전달의 매개로 자리 잡고 있습니..

현재 진행하고 있는 코드잇 스프린트의 미션 판다 마켓에서발생한 장애 상황에 대한 트러블 슈팅입니다😃본 미션에 대해 간단하게 설명하자면,판다마켓은 중고상품을 등록하여 사고팔 수 있으며 다른 사용자들과 소통하는 중고거래를 위한 커뮤니티 플랫폼입니다.현재 백엔드는 Node.js + Express 기반으로, DB는 PostgreSql + Prisma를 사용하여 구축하고 있습니다.프론트엔드는 JavaScript + Next.js를 사용하고 있습니다.🚨 문제 상황본 서비스는 자유 게시판에서 자유롭게 글을 올려 다른 사용자들과 소통할 수 있습니다.이를 위해 게시물 등록 페이지를 구현하면서 Next.js의 서버 액션(Server Action)을 사용하여 폼 데이터를 백엔드 API로 전송하는 기능을 구현했습니다. 그..

TanStack Query를 공부한 후 남긴 기록을 담은 포스팅직접 기록한 내용을 GPT를 활용하여 마크다운으로 변환했다!1. TanStack Query 리액트 쿼리(React Query): 서버 상태 관리를 쉽게 하도록 도와주는 라이브러리서버 상태(Server State): 원본이 서버에 있고, 클라이언트가 복사본을 잠깐 빌려와서 보고 있는 모든 비동기 처리 데이터💡 주요 기능API 호출 시 로딩, 에러, 성공 상태 자동 트래킹 (isPending, error, data)API 응답 데이터 캐싱 및 재사용데이터베이스(DB) 데이터와 UI 데이터의 동기화 및 업데이트2. 데이터 조회: useQuery (Read)📌 기본 규칙queryKey는 반드시 배열 형태queryFn은 반드시 Promise를 반환..

Next.js를 다루게 되면서 일반 리액트의 렌더링 방식과는 다른 Next.js의 렌더링 방식에 대해 접하게 되었다.오늘은 웹 페이지의 네 가지 렌더링 방식에 대해 알아보려 한다! 📌 Next.js에서의 렌더링기본적으로 Next.js는 모든 페이지를 프리렌더링한다.특히 빌드 시점에 생성되는 SSG와 요청 시점에 생성되는 SSR을 지원한다.Next는 각 페이지별로 사용할 프리렌더링 방식을 선택할 수 있게 해 준다는 엄청난 장점이 있다.따라서 용도에 맞게 다른 렌더링 방식을 선택할 수 있다!*프리렌더링 - 빌드 시점에 HTML을 미리 만들어 두거나, 요청 시 HTML을 생성해 두는 것 📌 네 가지 렌더링 방식다음의 네 방식은 모두 page router 버전의 공식 명칭으로, app router에서는 다른..

일반 JavaScript에서 React로 넘어가면서 느낀 두드러진 점 중 하나는 React엔 Component란 개념이 있다는 것이다.오늘은 그 컴포넌트에 대해 알아보려 한다!📌 Component컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, js의 함수와 동일한 목적을 수행하지만 독립적으로 작용하며 JSX를 반환한다.*JSX - JavaScript 안에서 HTML처럼 보이게 쓴 문법이다.HTML 요소를 반환하는 함수로 볼 수 있다.컴포넌트는 일종의 부품과 같다. 하나의 부품이 용도가 동일하다면 이곳저곳에 재사용될 수 있는 것처럼 컴포넌트 또한 그러하다.이처럼 컴포넌트는 여러 요소에 재사용되는 것을 핵심으로 한다.컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 나누고 각 부분을 개별적으..

Git Merge 전략Merge는 두 브랜치를 결합하는 작업이다.Git은 두 개 또는 그 이상의 커밋 포인터를 받아 공통 기준 커밋을 찾으려고 시도한다.Git은 기준 커밋을 찾는 여러 가지 방법을 가지고 있는데, 이러한 방법들을 병합 전략이라고 한다.본격적으로 전략에 대해 얘기하기 전에 알아둘 것이 있다. 바로 HEAD이다. 📌HEADHEAD란 현재 작업중인 브랜치의 최신 커밋을 가리키는 포인터이다.git commit을 하면, 새 커밋이 생성되고 HEAD도 자동으로 새 커밋을 가리킨다.즉, 다음에 생성될 커밋의 부모가 누구인지를 결정하는 기준점이다. 📌 Fast-Forward Merge가장 단순한 합치기 방식이다.HEAD 포인터가 Merge 과정 없이 그냥 최신 커밋으로 이동한다.master에서 fe..

Vincent Driessen의 a-successful-git-branching-model 을 정리한 글입니다.🔗a-successful-git-branching-modelGit Flow 전략엔 5가지 핵심 브랜치가 존재한다!이는 각각 master, develop, feature, release, hotfix이다.각 브랜치의 역할과 흐름을 알아보자! 📌메인 브랜치중앙 저장소에 무기한 보존되는 두 개의 핵심 브랜치이다.master 브랜치 - 제품 출시: 중앙 저장소에 무기한 보존되는 주요 브랜치이며, 실제 사용 가능한 상태를 반영하는 메인 브랜치이다. 변경 사항이 merge 될 때마다 새로운 버전 릴리즈는 master 브랜치의 것이다.실제 사용자에게 배포되는 가장 안정적인 상태를 유지한다.develop ..

처음 협업을 진행할 때 Git은 매우 두려운 존재이다.낯설기도 하고, 내 잘못된 선택으로 프로젝트에 영향을 미칠 수도 있다는 걱정으로😥실수하지 않도록 옳은 Branch & Merge 사용법을 알아두어야 할 필요가 있다!📌BranchGit에는 Branch라는 개념이 있다. 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 기존의 모든 코드를 복사하고 나서 원래 코드에는 영향을 미치지 않고, 독립적으로 개발을 진행할 때 Branch를 사용한다!여러 브랜치를 만들어 개별적으로 작업하고 나중에 Merge 하는 방법이 권장된다!📌Merge독립적인 갈래에서 개발을 진행하다가변경사항을 원래의 갈래에 적용하고 싶을 때 Merge를 통해 병합한다!작업 내용을 합치는 것이다. 독립적인 브랜치에서 ..

프로그래밍에서 시맨틱은 코드 조각의 의미를 나타냅니다."이 HTML element가 가진 목적이나 역할은 무엇일까?" 다음의 두 코드는 화면상으로 동일하게 보입니다. 안녕하세요?안녕하세요? 하지만 두 코드를 같다고 말할 수 있을까요?그 답은 "아니"입니다!두 코드를 동일한 것처럼 보이지만, 사실 HTML에 스타일을 적용하여 입히는 것은 CSS의 역할이며두 코드의 "의미"는 다릅니다.하나는 최상위 제목을 의미하고 다른 하나는 그것이 아니라는 것이죠!📌Semantic Tag란?Semantic Tag는 의미를 지닌 태그를 의미합니다! Semantic 은 "의미론적인"이란 뜻의 형용사입니다.개발자가 각 태그를 보고 해당 요소가 어떤 의미를 담았고, 어떤 역할을 하는지 쉽게 파악할 수 있도록 돕습니다. 그 외엔..

📌 Cascade란?CSS 작성중에 하나의 HTML 요소에 대해 서로 다른 스타일 규칙이 동시에 적용되는 상황이 발생할 때, 브라우저는 정해진 알고리즘에 따라 어떤 스타일을 최종적으로 적용할지 결정한다.이 결정 과정이 바로 캐스케이드(Cascade)이다.🌊 작은 폭포나 계단식으로 떨어지는 물 을 일컫는다.✔ CSS는 바로 Cascading Style Sheet의 약어이다. 사이트의 복잡성이 증가함에 따라 스타일시트의 수가 증가하여,스타일시트의 소스 순서가 더 중요하고 복잡해진다.다양한 스타일 후보군중에서 내가 의도하는 방향으로 스타일을 적용하기 위해선 어떤 규칙으로 확정되는지 알 필요가 있다. 규칙은 다음과 같다! 📌 Cascading브라우저는 스타일 충돌이 발생하면 다음의 단계를 거쳐 모든 요소의..