프론트엔드레슨좋은건너만알기

Donghyun Hwang·2025년 7월 24일

평소 쓰는 개발자 도구 기능, 익스텐션 위주로 그냥 잡다하게 정리하려고 한다.
서론 끝

☝️이건 첫번째 레슨~ 크롬 익스텐션

PixelParallel

디자이너: "피그마랑 디자인이 미세하게 안 맞아요~"
나: "넹 ㅠ_ㅠ (어느 세월에 디자인 확인하고 값 체크하고 수정하지 귀차나 ㅠ ㅠ)"

이 때 PixelParallel 익스텐션을 써보자
쉽게 설명하면 웹에 PNG 띄워서 비교할 수 있는 익스텐션이다.

사용법
1. 익스텐션을 설치한다.
2. 피그마에서 비교해보고 싶은 화면 혹은 요소를 export한다.
3. 익스텐션을 키고 UPLOAD IMAGE를 눌러 export한 파일을 선택한다.
4. 그럼 반투명한 요소가 떠서 실제 내가 만든 화면과 비교해보며 잘못 스타일링한 값이 있는지 편히 확인할 수 있다.

앗 !!! 폰트 크기가 안맞는다 !!! 🤦‍♂️

LocatorJS

개발하다보면 이 컴포넌트 위치가 어디지?! 할 때가 있다.
이 때 LocatorJS 익스텐션을 써보자

활성화 후 클릭 한 번이면 Cursor Vscode 등 작업 환경에 해당 컴포넌트가 있는 파일로 슝~ 이동시켜준다.
이거 알고나서 개발 속도 800% 향상되었다

✌️이제 두번째 레슨~ 개발자 도구

API Response Override

API 응답 갈아끼우고 싶을 때 가끔 사용했다.
지금은 MSW 사용중이어서 잘 안 쓴다

사용

Network 탭 -> 네트워크 요청 중 값을 바꾸고 싶은 응답을 선택, 우클릭하여 Override Content를 누른다.
바꾸고 싶은 값을 바꾸고 저장 -> 새로고침하면 response가 갈아끼워져 있다. UI로 제어하기 힘든 값들을 바꾸고 싶을 때 써먹으면 좋다.

자세한건 아래 링크에서

https://www.youtube.com/watch?v=KxjGYcHZ_uI

HTML 요소 duplicate, delete, force state

이거 은근 모르는 분들이 있다.
간단히 html 요소를 늘리거나 삭제하고 싶을 때 사용한다.
조작하고픈 element를 선택하고 하고 싶은 행동 누른다.

침착맨 영상으로 가득 duplicate했다.

hover 상태 같은거 보고 싶을 땐 force state를 쓰자
Styles 탭에도 동일한게 있다

$0

Web Inspector로 찍은 요소는 $0에 저장되어 console에서 사용할 수 있다.
이걸 가지고 유튜브 동영상이 미리 몇 개나 로드되어 있는지 알아보자

대충 동영상 목록의 부모를 선택해서

콘솔에 찍어보니 25개다.
참고로 $1은 그 이전에 찍은 요소이다.

그렇다면 $2는?...

여러분의 상상에 맡긴다..ㄷㄷ

Chrome Developer Tools AI Assistant

크롬 개발자 도구에 AI Assistance가 있다.
왜 요청이 오래 걸리는지 네트워크 요청 분석 등 물어보면 알려준다.

위 내용들을 다 알고 있었다면?
당신은 멋쟁이 ~

🖖 드디어 세번째 레슨~ 모바일 디버깅

개발 환경마다 다를 수도 있는데, 나는 이렇게 한다.

개발 중인 PC와 폰을 같은 WIFI에 연결
실행 명령어 + --host 0.0.0.0 로 개발 환경 실행

ex. npm run start --host 0.0.0.0

WIFI IP 주소를 확인하여 해당 페이지로 접속
ex. IP가 1.1.1.1, 포트번호가 3000이면 http://1.1.1.1:3000
야호~ 접속 완료

사파리의 경우에는 Safari Technology Preview를 쓰는 것도 추천한다.
PC에 폰 연결해서 편하게 개발자 도구로 디버깅할 수 있다.

BONUS

마지막으로 내가 사용중인 Cursor Rule도 시원하게 공유한다. 어디선가 긁어와서 디벨롭해서 쓰고 있다. 여러분들은 더욱 디벨롭해서 쓰길 바라며 context7 MCP 연결해서 써야한다.

- Always respond in Korean
- Be casual unless otherwise specified
- Be terse
- Suggest solutions that I didn't think about—anticipate my needs
- Treat me as an expert
- Be accurate and thorough

1. Bug Fixes:
   - Analyze the problem thoroughly before suggesting fixes
   - Provide precise, targeted solutions
   - Explain the root cause of the bug

2. Keep It Simple:
   - Prioritize readability and maintainability
   - Avoid over-engineering solutions
   - Use standard libraries and patterns when possible

3. Code Changes:
   - Propose a clear plan before making changes
   - Apply all modifications to a single file at once
   - Do not alter unrelated files

use context7 for task which needs document (library or framework or something)