2026.07.07~2026.08.06 섹션별 고유 사용자 추이포트폴리오를 배포한 뒤 방문자 수는 확인할 수 있었지만, 사람들이 실제로 어디까지 보고 나가는지는 알기 어려웠다.내 포트폴리오는 한 페이지 안에서 여러 섹션이 길게 이어지는 구조라 페이지뷰만으로는 사용자가

DOM 탐색, Animation 생성, ScrollTrigger 연결과 cleanup의 책임을 분리하고, 모든 Stage가 같은 실행 순서를 따르도록 구조화한 과정PortfolioGitHub Repository관련 Pull Request이 포트폴리오는 Intro, Bu

Axios와 Zod에서 발생하는 오류를 공통 오류 모델로 정규화하고, 실제 인증 만료에서만 세션을 정리하도록 오류 처리 흐름을 개선했습니다.관련 구현PR > - PR Washer 관리자 화면에서는 사용자 정보와 관리자 권한을 확인하기 위해 AdminLayout에서 내

Washer는 광주소프트웨어마이스터고 학생들이 사용하는 세탁기 관리 서비스입니다.관리자 화면에서는 기기 상태, 예약 내역, 고장 신고, 사용자 패널티 등 서비스 운영에 필요한 여러 데이터를 확인하고 변경할 수 있습니다.기존 V1 관리자 페이지에서는 서버 데이터를 화면

2025년 11월 5일부터 7일까지 2박 3일간 경주 사한셀렉트호텔에서 열린 ‘전국 SW 마이스터고 연합 해커톤’에 참가하였습니다. 본 행사는 과학기술정보통신부가 주최하고 정보통신기획평가원(IITP)과 전국 4개 SW마이스터고(대덕·대구·광주·부산)가 공동으로 주관하는

npx create-next-app로 프로젝트를 만들면서 Tailwind CSS를 선택했더니, postcss.config.mjs가 자동으로 생성되었고, 그 안에는 다음과 같은 설정이 있었음그런데 기존에 공식 문서나 블로그에서 봤던 예제들은 대부분 이랬다:내가 봤던 예제

React + Tailwind 기반의 main-nav.tsx 컴포넌트에서, 모바일과 데스크탑은 서로 다른 방식으로 Navigation UI 를 구현하고 있다. 그리고 그 차이와 이유를 명확이 이해하고자 다음과 같은 포스터를 작성하였다.md:flex 는 데스크탑(medi

처음엔 flex 를 단순히 가로 정렬하는 속성이라고 이해했었고, md: flex는 그저 반응형 정렬용이라고 생각음그래서 nav 메뉴를 보여주기 위해 굳이 md: flex가 필요한 이유가 잘 이해되지 않았음HTML 요소가 보이냐 / 안 보이냐, 어떻게 배치되느냐를 결정하

Tailwind를 CLI로 설치할 때 다음 명령어를 입력했다:그런데 npx tailwindcss init -p 명령어에서 다음과 같은 에러가 발생함:또한, node_modules/.bin/tailwindcss가 존재하지 않음.이 문제는 Tailwind CSS v4부터

브라우저 저장소인 localStorage의 개념과 JSON 변환 처리의 필요성 이해하기 위해서 다음과 같은 포스터를 작성했다.localStorage 는 브라우저가 제공하는 클라이언트 측 저장소이다.HTML5에서 도입된 Web Storage API 중 하나이며, key-

드래그 앤 드롭 리스트를 만들다가 궁금한 점이 생김:ul 태그 (Droppable)에는 그냥 style={{ padding: 20 }} 이렇게 간단하게 스타일을 줘도 되는데,li 태그 (Draggable)에는 ...provided.draggableProps.style처

@hello-pangea/dnd 라이브러리에서Droppable, Draggable 컴포넌트가 드래그 기능을 동작시키기 위해자식 함수(children)에 넘겨주는 필수 도구 세트 객체React에선 DOM 요소를 직접 조작하지 않기 때문에,라이브러리가 드래그 기능을 위해

ref는 React가 HTML 요소(실제 DOM)를 직접 찾을 수 있게 해주는 도구다.평소엔 React가 가상 DOM을 관리하지만,정말 필요한 경우, 내가 직접 진짜 DOM을 만질 수 있게 해주는 “예외 통로”가 바로 ref다.myBoxRef는 div를 가리키는 ref

Zustand는 독일어로 ‘상태’ 라는 뜻으로 React 생태계에서 사용하는 상태 관리 라이브러리이다. 현재 Redux가 압도적으로 많이 사용되고 있지만 문법이 더러운편이라 학습에 시간이 필요하다고 한다. Post Redux로서 사용자가 빠르게 늘고 있는 Zustand

FSD 구조에서 entities 레이어는 비즈니스 개념 중심(User, Post 등) 의 코스를 담당한다. 여기서 말하는 "비즈니스 개념"이란, 단순히 기능이 아니라 "데이터 중심이냐 Vs. 기능 중심이냐" 로 나눠서 이해해야 한다.User, Post, Comment,

코드 포맷터내가 작성한 코드를 일정한 규칙에 맞게 자동으로 정리해주는 도구이다.팀원 간 코드 스타일 통일저장할 때마다 자동 정리 → 시간 절약리뷰 때 불필요한 스타일 논쟁 줄어듦설정 전용 파일을 루트 디렉토리에 만들어서 사용파일명 예시: .prettierrc, .pre

| 질문 | 확인 방법 | 확인 기준 | | --- | --- | --- | | ✔ Would you like to use TypeScript? | 프로젝트에 tsconfig.json이 있는지 확인 | 있으면 TypeScript 사용 (.ts, .tsx 파일도 같이 사용됨) | | ✔ Would you like to use ESLint? | packag...

처음에는 강의에서 알려준 대로 아래처럼 수동으로 Next.js 프로젝트를 구성했다:그리고 package.json을 아래처럼 수정했다:이 방식은 모든 구조와 설정을 직접 만져보면서 학습할 수 있다는 장점이 있었다.하지만 실제 협업 프로젝트에 들어가면서 여러 치명적인 단점

npm install --save-dev @types/react-query 명령어 실행 시, 아래와 같은 에러가 발생함:TypeScript 프로젝트에서는 다음 세 가지 버전이 서로 영향을 주고 받는다:CRA는 내부적으로 react-scripts라는 패키지를 사용해 빌

컴포넌트에 전달되는 props의 타입은 interface를 사용해 지정한다.text → 필수 propsactive? → 선택적 props:만 쓰면 필수?:를 쓰면 선택적기본값은 함수 파라미터에 직접 설정한다:이렇게 하면 active를 전달하지 않아도 자동으로 false