developer-icons로 기술 스택 아이콘 컴포넌트 만들기
초급20분2026-04-13
React 프로젝트에 developer-icons 라이브러리를 설치하고 필요한 기술 아이콘을 컴포넌트 형태로 불러와 스타일을 적용합니다. 아이콘의 크기와 간격을 자유롭게 조절하여 나만의 기술 스택을 시각적으로 표현한 React 프로필 카드 웹페이지를 만듭니다.
이 코칭은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- developer-icons 라이브러리를 사용하여 기술 아이콘을 추가할 수 있습니다.
- React 컴포넌트에 props를 전달하여 아이콘의 크기와 스타일을 조절할 수 있습니다.
- SVG 아이콘을 직접 관리하는 대신 라이브러리를 활용하는 이점을 이해합니다.
어떻게 진행해요
1. React 프로젝트 준비하기
2. 아이콘 라이브러리 설치하기
3. 첫 번째 아이콘 추가하기
4. 아이콘 크기와 스타일 바꾸기
5. 기술 스택 프로필 카드 완성하기
AI 튜터가 각 단계를 하나씩 안내해줄 거예요