분류 전체보기에 해당되는 글 281건

[인프런] 웹 게임을 만들며 배우는 Vue 1

웹/Vue.js 2024. 1. 23. 22:02

인프런 프론트엔드 강의 1일차.

웹 게임을 만들며 배우는 Vue 1

 

Vue로 간단한 웹게임 만들어보기.

1일차는 섹션 0 강의 수강

 

1. 좋아요 버튼

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <title>좋아요</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div v-if="liked">좋아요 눌렀음</div>
      <button v-else v-on:click="onClickButton">Like</button>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#root",
      data: {
        liked: false,
      },
      methods: {
        onClickButton() {
          this.liked = !this.liked;
        },
      },
    });
  </script>
</html>

 

2. 구구단

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <title>구구단</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>{{first}} 곱하기 {{second}} 는?</div>
      <form v-on:submit="onSubmitForm">
        <input type="number" ref="answer" v-model="value" />
        <button type="submit">입력</button>
      </form>
      <div id="result">{{result}}</div>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#root",
      data: {
        first: Math.ceil(Math.random() * 9),
        second: Math.ceil(Math.random() * 9),
        value: "",
        result: "",
      },
      methods: {
        onSubmitForm(e) {
          e.preventDefault(); //새로고침 이벤트 중지
          if (this.first * this.second === parseInt(this.value)) {
            this.result = "정답";
            this.first = Math.ceil(Math.random() * 9);
            this.second = Math.ceil(Math.random() * 9);
            this.value = "";
            this.$refs.answer.focus(); //button 클릭하여 submit 시 focus가 없어지므로 button 클릭 후 input 태그에 focus를 줌 (UI/UX 측면)
          } else {
            this.result = "땡";
            this.value = "";
            this.$refs.answer.focus(); //button 클릭하여 submit 시 focus가 없어지므로 button 클릭 후 input 태그에 focus를 줌 (UI/UX 측면)
          }
        },
      },
    });
  </script>
</html>

 

3. 끝말잇기

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>끝말잇기</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>{{word}}</div>
      <form v-on:submit="onSubmitForm">
        <input type="text" v-model="value" ref="answer" />
        <button type="submit">입력!</button>
      </form>
      <div>{{result}}</div>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#root",
      data: {
        word: "초밥",
        result: "",
        value: "",
      },
      methods: {
        onSubmitForm(e) {
          e.preventDefault();
          if (this.word[this.word.length - 1] === this.value[0]) {
            this.result = "딩동댕";
            this.word = this.value;
            this.value = "";
            this.$refs.answer.focus();
          } else {
            this.result = "땡";
            this.value = "";
            this.$refs.answer.focus();
          }
        },
      },
    });
  </script>
</html>

 

 

'웹 > Vue.js' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 3  (122) 2024.01.30
[인프런] 웹 게임을 만들며 배우는 Vue 2  (97) 2024.01.24
Vue2 vs Vue3 차이점  (118) 2024.01.14
[CodingApple] Vue 로 만드는 웹앱 3  (104) 2024.01.12
[CodingApple] Vue 로 만드는 웹앱 2  (98) 2024.01.11
,

15년 전 Billboard hot 10 파헤치기 [2009-01-25]

Billboard Hot 파헤치기/15년전 Billboard Hot 10 2024. 1. 23. 00:01
  • 1

  • Just Dance

    Lady Gaga Featuring Colby O'Donis
  • ChatGpt 리뷰
  • ▶ 레이디 가가와 콜비 오도니스의 '저스트 댄스'는 중독성 있는 멜로디와 흥겨운 비트로 가득한 팝 댄스 곡이다. 레이디 가가의 파워풀한 보컬과 콜비 오도니스의 훈훈한 보컬이 어우러져 듣는 이로 하여금 춤추게 만든다. 흥겨운 분위기를 전하는 이 곡은 댄스 파티를 즐기기에 안성맞춤이다.
  • 2

  • Single Ladies (Put A Ring On It)

    Beyonce
  • ChatGpt 리뷰
  • ▶ 비욘세의 "Single Ladies (Put A Ring On It)"은 중독성 있는 비트와 강렬한 보컬로 가득찬 히트 곡이다. 춤추고 싶게 만드는 멋진 리듬과 파워풀한 가사로 누구나 듣고 싶어지는 곡이다.
  • 3

  • Heartless

    Kanye West
  • ChatGpt 리뷰
  • ▶ 칸예 웨스트의 "Heartless"는 중독성 있는 멜로디와 신비로운 분위기로 가득한 곡이다. 그의 감정을 담은 가사와 훅은 청취자를 사로잡는다. 현대 음악의 걸작 중 하나로 꼽힌다.
  • 4

  • Live Your Life

    T.I. Featuring Rihanna
  • ChatGpt 리뷰
  • ▶ T.I. Featuring Rihanna의 "Live Your Life"는 훌륭한 협업으로, 중독성 있는 멜로디와 강렬한 가사로 가득차 있습니다. T.I.의 래핑과 Rihanna의 보컬은 환상적으로 어우러져, 듣는 이로 하여금 자유롭고 강렬한 에너지를 느끼게 합니다.
  • 5

  • Love Story

    Taylor Swift
  • ChatGpt 리뷰
  • ▶ 테일러 스위프트의 "러브 스토리"는 사랑의 이야기를 감미롭게 풀어낸 곡으로, 멜로디와 가사가 화려하고 감성적이다. 사랑에 빠진 소녀의 이야기를 담은 이 노래는 듣는 이로 하여금 감동을 선사한다.
  • 6

  • Gives You Hell

    The All-American Rejects
  • ChatGpt 리뷰
  • ▶ The All-American Rejects의 "Gives You Hell"은 훅이 강한 팝 록 곡으로, 중독성 있는 멜로디와 가사로 듣는 이를 사로잡는다. 강렬한 보컬과 신나는 리듬이 인상적이다.
  • 7

  • I'm Yours

    Jason Mraz
  • ChatGpt 리뷰
  • ▶ 제이슨 므라즈의 "I'm Yours"은 상큼하고 감미로운 멜로디와 긍정적인 가사로 가득찬 곡이다. 그의 부드러운 보컬과 유쾌한 분위기는 듣는 이로 하여금 기분 좋아지게 만든다. 이 곡은 편안하고 활기찬 분위기를 원하는 이들에게 적극 추천한다.
  • 8

  • Hot N Cold

    Katy Perry
  • ChatGpt 리뷰
  • ▶ 케이티 페리의 "핫 앤 콜드"는 중독성 있는 멜로디와 강렬한 가사로 유명한 팝송이다. 파워풀한 보컬과 신나는 리듬으로 듣는 이로 하여금 활기찬 분위기를 만들어낸다. 페리의 매력적인 보컬과 중독성 있는 멜로디가 눈에 띈다.
  • 9

  • Let It Rock

    Kevin Rudolf Featuring Lil Wayne
  • ChatGpt 리뷰
  • ▶ 케빈 루돌프의 "Let It Rock"은 중독성 있는 비트와 리프를 가지고 있으며, 릴 웨인의 랩이 트랙을 더욱 흥겨운 분위기로 만들어준다. 이 곡은 에너지 넘치는 힙합과 팝의 만남으로, 듣는 이로 하여금 춤추게 만든다.
  • 10

  • Circus

    Britney Spears
  • ChatGpt 리뷰
  • ▶ 브리트니 스피어스의 'Circus'는 중독성 있는 팝 비트와 강렬한 보컬로 가득한 앨범이다. 다채로운 사운드와 중독성 있는 멜로디가 청취자를 사로잡는다. 브리트니의 퍼포먼스는 화려하고 매혹적이며, 팬들을 실망시키지 않는다.

'Billboard Hot 파헤치기 > 15년전 Billboard Hot 10' 카테고리의 다른 글

15년 전 Billboard hot 10 파헤치기 [2009-02-08]  (24) 2024.02.06
15년 전 Billboard hot 10 파헤치기 [2009-02-01]  (11) 2024.01.30
15년 전 Billboard hot 10 파헤치기 [2009-01-11]  (4) 2024.01.09
15년 전 Billboard hot 10 파헤치기 [2009-01-04]  (3) 2024.01.02
15년 전 Billboard hot 10 파헤치기 [2008-12-28]  (1) 2023.12.26
,

AWS Lambda python 3.12 전환

Study Plan 2024. 1. 22. 21:13

Lambda 에서 python 3.4 -> 3.12 전환하며 발생한 문제점

 

1. No Module named 'pydantic_core._pydantic_core' 발생

 - 기존에 사용하지 않았던 pydantic 모듈 에러가 갑자기 발생(무슨 모듈인지도 모른다...)

 - 기존에 labmda가 잘 돌아가고 있었고, 추가로 한 작업은 아래와 같다

1. 노트북 -> 데스크톱으로 작업환경을 변경했기에 신규 Python 3.12 버전 설치
2. 기존에 lambda에서 사용하던 site-packages를 다운로드
3. 사용하는 모델이 deprecated됨에 따라 openAI 사용 API 변경
   - 모델 엔진 : text-davinci-003 -> gpt-3.5-turbo-1106
   - 사용 함수 : openai.Completion -> chat.completions
4. openAI 신규 모듈 설치
5. 신규 openAI 모듈을 2번에서 받은 site-packages에 복사
6. zip으로 압축하여 신규 Layer 생성
7. gpt-3.5-turbo-1106 모델을 사용하는 python 코드 lambda에 deploy
8. 변경된 Layer로 labmda 수행

 - 복잡한 작업은 없기에 당연히 수행이 완료될 줄 알았으나 pydantic 오류가 발생했다.

 

AWS lambda가 python 3.12를 지원하기 시작한게 2023.12월이기에 이제 막 한달이 지난 시점이다.
이 때문에 발생하는 오류인가???
> 응 아니야

 

 

열심히 구글링 한 결과 비슷한 오류를 겪는 사용자들이 있던 것을 발견!!

 - https://github.com/pydantic/pydantic/issues/6557

 

No module named 'pydantic_core._pydantic_core' using AWS Lambdas · Issue #6557 · pydantic/pydantic

Initial Checks I confirm that I'm using Pydantic V2 installed directly from the main branch, or equivalent Description I have pydantic 2.0.2 installed into my AWS Lambda with python3.10 and wheneve...

github.com

 

문제의 원인은 pip로 설치한 모듈의 아키텍쳐가 lambda에서 설정한 아키텍쳐와 달라서 발생한 문제이다!!!
AWS Lambda에서 python 3.12는 arm64 버전으로 구동을 지원한다.
*로컬에서 pip install pydantic 으로 모듈 설치 시 arm64가 아닌 x86 아키텍처로 모듈이 설치되고 있었다.

 

AWS 내 Python 버전별 지원 현황

 

 

내게 발생한 문제는 pydantic_core 문제이므로 관련된 pydantic* 패키지들을 arm64 아키텍처로 설치하면 된다.

가이드 문서에도 나와 있는 형태로 모듈을 설치하면 된다

#pydantic arm64 설치
pip install --platform manylinux2014_aarch64 --target=package --implementation cp --python-version 3.12 --only-binary=:all: --upgrade pydantic==2.5.3

#pydantic-core arm64 설치
pip install --platform manylinux2014_aarch64 --target=package --implementation cp --python-version 3.12 --only-binary=:all: --upgrade pydantic_core=2.14.6

 

*pydantic 모듈 설치 후 lambda에서 동작할 수 있도록 작업해주면 된다.

 - site-packages를 zip으로 압축하면 된다. (.zip으로 계층을 생성하는 경우 python\python\모듈들.. 형태로 압축해야한다)

 - lambda > 계층 > 본인 Lambda Function > 버전 생성 으로 신규 계층을 생성한다.

계층 생성

 

 

 

*참고) arm64 모듈 설치 AWS 가이드 https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/python-package.html#python-package-native-libraries

 

Python Lambda 함수에 대한 .zip 파일 아카이브 작업 - AWS Lambda

배포 패키지 또는 계층의 종속 항목이 런타임 포함 라이브러리보다 우선하므로 SDK도 포함하지 않고 패키지에 urllib3과 같은 SDK 종속 항목을 포함하면 버전 불일치 문제가 발생할 수 있습니다. 자

docs.aws.amazon.com

 

 

 

'Study Plan' 카테고리의 다른 글

티스토리 API와 Open AI Model 만료에 따른 수정사항 정리  (117) 2024.01.21
AI 이모저모  (11) 2023.08.09
티스토리 자동화를 위한 Step2 고민  (14) 2023.07.31
커리어 플랜  (0) 2023.05.02
,
1 ··· 6 7 8 9 10 11 12 ··· 94

티스토리툴바