축하합니다! 여러분은 My Affirmations app(긍정 확언 앱) 을 개발하는 회사에 새로운 소프트웨어 엔지니어로 채용됐어요.
Affirmation(긍정 확언)이란 본인을 격려하고 고양시키려는 의도로 스스로에게 말하거나 마음속으로 반복하는 긍정적인 문장을 이야기해요. 삶에서 믿거나 실현하고 싶은 것을 긍정하거나 주장하는 방법입니다.
My Affirmations app 은 사용자들에게 동기부여를 하고, 영감을 주기 위해 확언 문장을 보여줍니다. 현재는 그런 문장을 선택하는 기능에 한계가 있습니다.
현재, 여러분의 회사에서는 이 My Affirmations app을 개선하기를 원하고 있습니다. 그래서 오늘 여러분이 생성형 AI (generative AI)를 활용해서, 끊임없이 새로운 확언 문장을 생성하는 애플리케이션으로 만들어야 해요. 이 작업을 위해 시니어 엔지니어가 여러분에게 AWS 콘솔과 계정에 권한을 줬다고 합니다.
이번 단계에서 여러분이 할 일은 기존 My Affirmations app 을 설치하고 실행해보는 것입니다!
Notes 이 단계에서는 AWS가 EC2 인스턴스에서 호스팅하는 Visual Studio Code Server를 사용한다고 가정합니다. 프로젝트 파일이 있는 리포지토리가 이미 복제되어 있으므로 직접 복제할 필요가 없습니다.
Visual Studio Code Server 창에서 Activity Bar에서 탐색기를 선택해 Primary Side Bar를 파일 보기로 전환합니다.
이 앱에는 4개의 주요 파일이 있습니다:
npm install
명령어를 실행합니다.
npm run dev
명령어를 입력하세요. 팝업 메시지가 뜨면 브라우저에서 앱을 열거나, 터미널에 표시된 네트워크 URL을 선택하세요.
현재 앱은 매우 간단하여 랜덤한 긍정 문구를 보여줍니다. Another Please 버튼을 클릭하면 새로운 문구가 랜덤으로 표시되지만, 문구가 많지 않아 곧 모두 보게 될 것입니다.
다음 워크플로우에서 Generative AI를 추가하여 새로운 문구를 생성할 예정입니다.
main.js 파일을 열어 내용을 확인해 봅시다:
import './style.css'
로 스타일링을 위한 CSS 파일을 불러옵니다.fetchNewAffirmation()
: 랜덤 문구를 가져와 화면에 표시하는 함수.showLoadingAnimation()
: 로딩 애니메이션을 표시하는 함수. #affirmation
ID를 가진 요소의 HTML 내용을 loading-spinner
클래스를 가진 div
로 설정합니다.disableButton(isDisabled)
: isDisabled
파라미터에 따라 #getNewAffirmation
버튼을 비활성화하거나 활성화합니다. 새로운 문구를 가져오는 동안 여러 요청이 발생하지 않도록 사용됩니다.
#getNewAffirmation
버튼을 선택하여 클릭 이벤트 리스너를 추가하고, 클릭 시 fetchNewAffirmation() 함수를 호출합니다.
#affirmation
요소의 HTML 내용으로 설정합니다.#getNewAffirmation
버튼에 클릭 이벤트 리스너를 추가하여, 버튼 클릭 시 fetchNewAffirmation() 함수가 실행되도록 합니다.이 코드로 인해 사용자는 버튼을 클릭하여 새로운 랜덤 문구를 가져올 수 있으며, 새로운 문구가 로드되는 동안 로딩 애니메이션이 표시되어 사용자 경험이 개선됩니다.
축하합니다! 여러분은 My Affirmations app(긍정 확언 앱) 을 개발하는 회사에 새로운 소프트웨어 엔지니어로 채용됐어요.
Affirmation(긍정 확언)이란 본인을 격려하고 고양시키려는 의도로 스스로에게 말하거나 마음속으로 반복하는 긍정적인 문장을 이야기해요. 삶에서 믿거나 실현하고 싶은 것을 긍정하거나 주장하는 방법입니다.
My Affirmations app 은 사용자들에게 동기부여를 하고, 영감을 주기 위해 확언 문장을 보여줍니다. 현재는 그런 문장을 선택하는 기능에 한계가 있습니다.
현재, 여러분의 회사에서는 이 My Affirmations app을 개선하기를 원하고 있습니다. 그래서 오늘 여러분이 생성형 AI (generative AI)를 활용해서, 끊임없이 새로운 확언 문장을 생성하는 애플리케이션으로 만들어야 해요. 이 작업을 위해 시니어 엔지니어가 여러분에게 AWS 콘솔과 계정에 권한을 줬다고 합니다.
이번 단계에서 여러분이 할 일은 기존 My Affirmations app 을 설치하고 실행해보는 것입니다!
Notes 이 단계에서는 AWS가 EC2 인스턴스에서 호스팅하는 Visual Studio Code Server를 사용한다고 가정합니다. 프로젝트 파일이 있는 리포지토리가 이미 복제되어 있으므로 직접 복제할 필요가 없습니다.
Visual Studio Code Server 창에서 Activity Bar에서 탐색기를 선택해 Primary Side Bar를 파일 보기로 전환합니다.
이 앱에는 4개의 주요 파일이 있습니다:
npm install
명령어를 실행합니다.
npm run dev
명령어를 입력하세요. 팝업 메시지가 뜨면 브라우저에서 앱을 열거나, 터미널에 표시된 네트워크 URL을 선택하세요.
현재 앱은 매우 간단하여 랜덤한 긍정 문구를 보여줍니다. Another Please 버튼을 클릭하면 새로운 문구가 랜덤으로 표시되지만, 문구가 많지 않아 곧 모두 보게 될 것입니다.
다음 워크플로우에서 Generative AI를 추가하여 새로운 문구를 생성할 예정입니다.
main.js 파일을 열어 내용을 확인해 봅시다:
import './style.css'
로 스타일링을 위한 CSS 파일을 불러옵니다.fetchNewAffirmation()
: 랜덤 문구를 가져와 화면에 표시하는 함수.showLoadingAnimation()
: 로딩 애니메이션을 표시하는 함수. #affirmation
ID를 가진 요소의 HTML 내용을 loading-spinner
클래스를 가진 div
로 설정합니다.disableButton(isDisabled)
: isDisabled
파라미터에 따라 #getNewAffirmation
버튼을 비활성화하거나 활성화합니다. 새로운 문구를 가져오는 동안 여러 요청이 발생하지 않도록 사용됩니다.
#getNewAffirmation
버튼을 선택하여 클릭 이벤트 리스너를 추가하고, 클릭 시 fetchNewAffirmation() 함수를 호출합니다.
#affirmation
요소의 HTML 내용으로 설정합니다.#getNewAffirmation
버튼에 클릭 이벤트 리스너를 추가하여, 버튼 클릭 시 fetchNewAffirmation() 함수가 실행되도록 합니다.이 코드로 인해 사용자는 버튼을 클릭하여 새로운 랜덤 문구를 가져올 수 있으며, 새로운 문구가 로드되는 동안 로딩 애니메이션이 표시되어 사용자 경험이 개선됩니다.