🔸 스켈레톤 UI 콘텐츠가 로딩 중일 때 표시되는 저해상도 미리보기 또는 자리 표시자 화면 실제 콘텐츠의 구조와 레이아웃을 시각적으로 표현해 체감 로딩 시간을 줄이고 사용자 경험을 향상시킴 스켈레톤 UI 목적 인지된 성능 향상 사용자에게 “무언가 로딩 중이다”라는 신호를 줘서 기다림의 지루함 완화 ...

신기하게도 바로 어제 포트폴리오 사용자 경험을 올리기 위해 Lighthouse를 사용해보았는데 오늘 수업에서 알려주셔서 스터디노트에서는 간단히 정리하고 자세한 성능 향상을 위해 수정할 내용은 따로 포스팅하려한다. 🔸 Lighthouse: 웹 성능 최적화 도구 Google에서 개발한 오픈소스 웹 성능 분석 도구 웹사이트의 품질을 측정하고 개선...

📁 구조별 특징 1. 기본 React 구조 src/ ├── components/ ├── pages/ ├── hooks/ ├── services/ 입문자에게 친숙 폴더가 기능별로 나뉘어 관리하기 쉽고 단순 2. 기능 중심(Folder by Feature) 구조 src/ ├── features/ │ ├── auth/ │ ...

🔸 Lint Lint는 코드 스타일과 문법 오류를 검사하고 일관된 코드를 유지하게 도와주는 도구 lint 실행 : 현재 디렉토리(.)부터 모든 파일을 ESLint로 검사 npm run lint 코드 스타일 검사 및 자동 수정 협업할 때 코드 퀄리티 유지에 도움됨 🔸 React Router React에서 페이지 전환을 처...

백준 7569번-토마토 문제 파악 창고에 보관된 토마토들이 며칠이 지나면 다 익게 되는지 그 최소 일수 구하기 1 : 익은 토마토 0 : 익지 않은 토마토 -1 : 토마토가 들어있지 않은 칸 하나의 토마토에 인접한 곳은 위, 아래, 왼쪽, 오른쪽, 앞, 뒤 여섯 방향에 있는 토마토를 의...

🔸 SRP(가위바위보) 게임 개발 연습 ✅ 스스로 어디까지 개발 가능한가 ! 개발 해야하는 UI 프로젝트 구조 어떤 순서로 개발 했는가? 프로젝트 구조 설계 React 프로젝트 생성 폴더 구조 설정 /components: Card, Button 컴포넌트 ...

🔸 goTrip 실습 - React 디자이너와 와이어프레임으로 의견을 나눌 때 부터 개발해야하는 기능을 요약해두는게 좋음 goTrip 기능 요약 사용자가 입력 필드에 텍스트를 입력하면 상태에 저장됨 입력된 텍스트가 없거나 2글자 이하일 경우 경고 메시지 표시 유효성 검사를 통과한 텍스트는 새로운 항목으로 리스트에 추가됨 사용자가 ...

백준 10026번-적록색약 문제 파악 적록색약인 사람이 봤을 때와 아닌 사람이 봤을 때 구역의 수를 구하는 문제 ! 핵심은 적록색약인 사람은 R과 G가 동일하게 보인다 ! 문제만 보았을 때 떠오르는 풀이방법은,,, 처음부터 적록색약이 보는 구역과 아닌 사람이 보는 구역을 따로 구현해서 풀기 구역은 그대로 들어가되, while...

🔸 Vite 기반 React 설치 React 프로젝트 생성 # Vite + React 템플릿으로 생성 npm create vite@latest my-react-app -- --template react cd my-react-app npm install # 또는 아래처럼 직접 템플릿 선택 npm create vite 제시된 순서대로 셋팅한 ...

백준 1012번-유기농 배추 문제 파악 서로 인접해있는 배추들이 몇 군데에 퍼져있는지 조사하면 총 몇 마리의 지렁이가 필요한지 알 수 있다. 배추 영역이 몇개인지 구하는 문제 ! 백준 1012번-유기농 배추 풀이 과정 기존에 풀었던 bfs 문제 유형과 동일했다 - 영역 개수 풀이가 어려웠다기 보다는 x축 y축이 헷갈려서 계속 ...