연습 - GitHub Copilot을 사용하여 JavaScript 포트폴리오 업데이트

  • 5분

GitHub Copilot 코드 제안을 사용하는 방법을 살펴보겠습니다. 이 연습에서는 라이브 제안과 함께 애니메이션을 추가하고 프롬프트를 사용하여 기존 JavaScript 템플릿 리포지토리에서 스크롤 동작을 사용자 지정합니다. GitHub Copilot을 사용하면 실제 JavaScript 상황을 신속하게 해결할 수 있습니다.

JavaScript 포트폴리오

학생이든, 최근 졸업생이든, 숙련된 전문가이든 포트폴리오는 기술과 경험을 보여줄 수 있는 개인 공간입니다.

포트폴리오를 사용하면 입사 지원을 할 때 이력서에 언급하는 경험에 대한 신뢰성과 명성을 제공합니다. 데이터 과학자이든, UX 디자이너이든 또는 프런트 엔드 개발자이든 관계없습니다. 온라인에서의 강력한 존재감은 일자리를 구하고 검색하는 데 도움이 될 수 있습니다!

참고 항목

이 연습에서는 브라우저에서 사전 구성된 환경이 포함된 Codespace를 사용합니다.

JavaScript 포트폴리오 사용자 지정

이 템플릿 포트폴리오에는 웹 브라우저만 사용하여 쉽게 사용자 지정하고 배포할 수 있는 React 기반 웹 애플리케이션이 있습니다.

시작하기 전에 고유한 링크를 사용하여 포트폴리오를 사용자 지정할 수 있습니다. src/App.jsx로 이동한 후 정보를 사용하여 siteProps를 업데이트합니다. siteProps 변수는 사이트를 사용자 지정하는 데 사용되는 키 값 쌍을 보유하는 JavaScript 개체이며, 다음과 같이 표시됩니다.

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

프롬프트를 사용하여 소셜 미디어 아이콘에 애니메이션 효과 적용

애니메이션을 통해 소셜 미디어 섹션이 더욱 눈길을 사로잡을 수 있습니다. Copilot 도움말을 요청하여 아이콘에 애니메이션 효과를 줍니다. GitHub Copilot 채팅을 사용하여 Copilot에 문의하거나 src/styles.css 파일에 다음 프롬프트 설명을 작성할 수 있습니다.

/* add an amazing animation to the social icons */

Copilot의 제안은 다음과 유사해야 합니다.

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

탭 키를 눌러 제안을 수락합니다. 동일한 제안을 받지 못하면 제공된 제안을 실험하거나 일치할 때까지 CSS 코드를 계속 입력할 수 있습니다.

사이트가 Codespace에서 이미 실행 중이어야 하며 변경 내용이 페이지에 자동으로 다시 로드됩니다. 이를 확인하려면 바닥글에 있는 소셜 미디어 아이콘 중 하나를 마우스로 가리켜 마법을 확인하세요!

축하합니다. 이 연습을 통해 Copilot을 사용하여 대화형의 재미있는 방식으로 코드를 생성했습니다. GitHub Copilot을 사용하면 코드 생성뿐만 아니라 문서를 작성하고 애플리케이션을 테스트하는 등 다양한 작업을 할 수 있습니다.

GitHub에서 연습을 마친 후 여기로 돌아와서 다음을 수행하세요.

  • 빠른 지식 점검
  • 학습한 내용 요약
  • 이 모듈 완료 배지