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

@keyframes로 만든 애니메이션의 이름을 지정애니메이션이 한 번 완전히 실행되는 데 걸리는 시간s → 초 (2s = 2초)ms → 밀리초 (500ms = 0.5초)애니메이션의 속도 곡선 (느려졌다 빨라졌다 같은)애니메이션이 얼마 후에 시작될지 지정애니메이션을 몇

CSS 애니메이션(Animation) 이란, "시간에 따라 요소의 스타일을 바꾸는 것" 이다.즉, 요소를 움직이게 하거나 크기를 바꾸고, 색깔을 바꾸는 등의 동작을 자동으로 부드럽게 만들어주는 도구이다.👉 스타일 변경 중심이면 CSS 애니메이션!👉 사용자 상호작용/

강의에서 사용된 이미지 레이아웃 스타일이 매우 유연하고 깔끔했는데,그 방식이 단순히 width, height 설정이 아니라 max-width, min-height, grid, transition, opacity 등을 활용한 고급 반응형 CSS 패턴이라는 것을 이해했다.

CSS에서 요소의 크기를 설정할 수 있는 다양한 속성들이 있다.특히 width, height 와 max-width, min-height 는 이름이 비슷하지만 동작 방식이 매우 다르다.이번에 그 차이를 실제 코드 예제와 함께 명확히 이해했다.이미지 너비는 항상 300px