개발 스킬

프런트엔드 점검 항목에 맞는 npm 패키지를 찾고 다운로드 수와 최근 배포 시점 등의 조건을 확인해, 적합한 패키지 이름을 규칙 파일의 메타데이터에 추가합니다.

• 점검 항목에 npm 패키지 참조 추가
• 다운로드 수와 배포 시점으로 후보 선별
• 문제 탐지·수정·테스트용 도구 검색

JavaScript 비동기 작업과 React 화면의 오류 처리를 점검합니다. 처리되지 않거나 묻힌 오류를 찾고 예외 포착, 조사용 로그, 화면 오류 처리 추가를 안내합니다.

• 비동기 작업의 오류 처리를 점검합니다
• React 화면에 오류 처리를 추가합니다
• 원인 조사에 필요한 로그를 개선합니다

웹 페이지가 중복으로 불러오는 JavaScript 라이브러리를 찾습니다. 측정으로 영향을 확인하며 의존성 버전을 통일하고 불필요한 로딩을 제거하도록 돕습니다.

• 페이지 로딩이 느린 원인 조사
• 의존 라이브러리 중복 확인
• 외부 스크립트의 의존성 점검

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

HTML에 직접 작성한 CSS와 페이지에 포함된 스타일을 점검합니다. 예외를 판단해 외부 파일로 정리하고 화면 너비와 조작 상태별 표시를 확인합니다.

• HTML 내부 스타일 점검
• 페이지에 포함된 CSS를 외부 파일로 정리
• 초기 표시용 CSS와 동적 값의 예외 판단

JavaScript의 코드 불러오기와 내보내기를 점검하고 CommonJS에서 import/export로 전환하도록 돕습니다. 브라우저 실행 경로와 수정 후 검증 방법도 확인합니다.

• require()를 import로 변환
• module.exports에서 전환
• 브라우저의 모듈 로딩 점검

드래그 앤 드롭을 키보드와 스크린 리더로도 사용할 수 있는지 점검합니다. 실제 출력된 HTML을 바탕으로 대체 조작과 상태 안내를 보완합니다.

• 드래그 조작의 키보드 지원 확인
• 스크린 리더의 상태 안내 확인
• 실제 출력된 HTML 점검

Flexbox의 가로·세로 배치에서 글자 넘침과 항목 너비 불일치를 확인하고 간격 및 늘어남·줄어듦 설정을 수정합니다. 화면 너비와 조작 상태별 표시도 점검합니다.

• 가로 배치의 글자 넘침 수정
• 항목을 같은 너비로 맞추기
• 항목 간격을 gap으로 통일

키보드 Tab 이동 순서가 화면의 시각적 순서와 맞는지 점검하고, HTML 요소 순서와 대화 상자를 열고 닫을 때의 포커스 이동 수정을 돕습니다.

• 페이지의 Tab 이동 순서를 점검합니다
• 대화 상자 개폐 시 포커스를 확인합니다
• HTML 요소 순서와 tabindex를 검토합니다

키보드 조작 시 현재 선택 위치를 보여 주는 포커스 표시를 점검합니다. 윤곽선이 사라지거나 잘리거나 어긋난 부분을 찾아 잘 보이는 CSS로 수정하도록 돕습니다.

• 키보드 조작 중 선택 위치 확인
• 윤곽선을 제거한 CSS 검토
• 포커스 테두리 잘림과 위치 오류 수정

브라우저 탭과 스마트폰 홈 화면에 쓰이는 사이트 아이콘을 점검하고, 기기별 형식과 크기 생성부터 HTML 및 PWA 설정까지 돕습니다.

• 탭과 북마크용 아이콘을 준비합니다
• 모바일 홈 화면 아이콘을 설정합니다
• PWA 아이콘 설정을 확인합니다

이미지와 설명문의 HTML 구조를 점검하고 figure와 figcaption으로 연결합니다. 대체 텍스트와의 중복도 확인해 음성으로 읽을 때 의미가 전달되도록 정리합니다.

• 설명이 있는 이미지의 HTML을 점검합니다
• 이미지 설명과 대체 텍스트의 중복을 확인합니다
• 음성으로 읽는 이미지 설명을 개선합니다

JavaScript의 var 선언을 줄 번호와 함께 찾습니다. 재할당 여부에 따라 const나 let으로 바꾸고 변수의 유효 범위와 브라우저 동작을 확인합니다.

• 줄 번호와 함께 var 선언 찾기
• var를 const나 let으로 바꾸기
• 변수의 유효 범위 검토

큰 JavaScript 번들을 점검하고 첫 화면에 필요 없는 기능과 라이브러리를 필요할 때 불러오도록 나누며, 로딩 중 표시도 정비합니다.

• 큰 JavaScript 번들의 분할 후보를 찾습니다
• 차트와 편집기 로딩을 늦춥니다
• 페이지마다 불러오는 코드를 점검합니다

독립적인 화면 구성 요소의 CSS를 점검하고 레이아웃 재계산과 다시 그리기의 범위를 줄이는 설정을 제안합니다. 화면 너비와 조작 상태별 표시도 확인합니다.

• 독립 구성 요소가 많은 페이지 검토
• 화면 밖 목록 항목의 렌더링 생략
• 화면 너비별 표시 상태 확인

웹 페이지의 인쇄 스타일을 점검하고 작성해 종이에서 본문을 읽기 쉽게 만듭니다. 탐색 메뉴와 광고 숨김, 글자 크기, 페이지 나눔, 외부 링크 주소 표시를 확인합니다.

• 웹 페이지를 종이에서 읽기 쉽게 만들기
• 인쇄할 때 탐색 메뉴와 광고 숨기기
• 인쇄 글자와 페이지 나눔, 주소 표시 조정

표시되지 않는 이미지와 실패하기 쉬운 참조를 찾아 파일 경로 수정과 대체 이미지 전환을 돕고, 로딩 오류가 발생했을 때의 화면까지 확인합니다.

• 상품 이미지 누락 원인 조사
• 빌드 후 이미지 경로 확인
• 외부 이미지에 대체 표시 추가

HTML의 head에서 CSS와 JavaScript 로딩 순서를 점검합니다. 화면 너비와 상호작용 상태별 표시도 확인하며 화면 표시 지연과 스타일 깜박임의 수정안을 제시합니다.

• 스타일 없는 화면이 잠깐 보이는 원인 조사
• head의 CSS와 JavaScript 순서 확인
• 스크립트 지연 로딩과 핵심 CSS 점검

닫히지 않은 태그나 잘못된 중첩 등 HTML 구조의 결함을 점검하고 수정합니다. 실제 HTML과 HTTP 응답에서 화면 표시와 검색 엔진의 해석에 영향을 주는 문제를 찾습니다.

• 닫히지 않은 태그와 중첩 오류를 점검합니다
• HTML로 인한 화면 깨짐을 조사합니다
• 검색 엔진을 위한 HTML 구조를 확인합니다

가격, 숫자, 날짜와 시간 표시를 점검하고 언어와 지역에 맞는 Intl API로 수정합니다. 고정 통화 기호와 구분자, 정렬 및 대체 로캘도 확인합니다.

• 여러 지역에 맞는 가격 표시 정리
• 수동 숫자 및 날짜 서식 대체
• 언어에 맞는 정렬 확인

페이지를 열자마자 필요한 이미지의 로딩 순서를 점검합니다. 파일 용량과 표시 크기, 지연 로딩, 우선순위 설정을 살펴 주요 콘텐츠의 표시 개선을 돕습니다.

• 히어로 이미지의 로딩 우선순위 점검
• 첫 화면 이미지의 지연 로딩 확인
• DevTools로 이미지 수정 결과 확인

CSS 파일 크기와 로딩 방식을 점검하고 성능 측정으로 표시 지연의 원인을 확인합니다. 불필요한 스타일 삭제, 압축, 페이지별 파일 분할을 지원합니다.

• 페이지 초기 표시 지연 원인 조사
• 용량이 큰 CSS 파일 찾기
• 미사용 스타일 삭제와 CSS 압축

CSS 곳곳의 색상, 여백, 글자 크기를 찾아 공통 CSS 사용자 지정 속성으로 정리합니다. 테마 변경과 화면 너비별 표시를 확인하며 수정을 제안합니다.

• 중복된 색상과 여백 정리
• 브랜드 변경을 위한 CSS 정비
• 다크 모드에 사용할 값 검토

CSS 변수를 사용하는 애니메이션과 그라데이션을 점검합니다. @property로 값의 자료형, 초깃값, 상속 여부를 정의하여 부드러운 변화와 값 검증을 지원합니다.

• 그라데이션을 부드럽게 움직이기
• CSS 변수를 사용하는 시각 효과 점검
• 디자인 토큰의 자료형과 상속 설정