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

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

웹/Vue.js 2024. 1. 30. 22:28

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

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

 

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

1일차는 섹션 0. 강좌소개 수강 (24.01.23 완료)

2일차는 섹션 1. 끝말잇기 수강 (24.01.24 완료)

3일차는 섹션 2. 숫자야구 수강 (24.01.29 완료)

 

1. vue 프로젝트 생성 순서 및 명령어

# vue 프로젝트 생성 순서

#package.json이 생성된다
npm init

#vue 설치
npm install vue

#개발할 때만 webpack 실행하도록 -D 옵션 지정, devDependencies에 추가된다.
npm install webpack webpack-cli -D


#vue컴포넌트를 js로 변환하는 webpack 로더
npm install vue-loader -D

# vue 컴파일러
npm install vue-template-compiler -D

webpack.config.js 파일 생성

 

2. package.json

{
  "name": "number-baseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.4.15"
  },
  "devDependencies": {
    "vue-loader": "^17.4.2",
    "vue-template-compiler": "^2.7.16",
    "webpack": "^5.90.0",
    "webpack-cli": "^5.1.4"
  }
}

 

3. webpack.config.js

// vue-loader를 사용하기 위한 준비
const { VueLoaderPlugin } = require("vue-loader");
// node가 만들어준 스크립트 활용
const path = require("path");

// node의 module 제작
// 웹팩이 모듈로 만든 객체를 사용
// 스크립트를 하나로 합칠 파일이 필요
// 가장 대표가 되는 파일이 entry임
// entry의 app은 하나로 합쳐질 파일
module.exports = {
  mode: "development",
  // 개발할때는 eval
  // 배포할 때는 hidden-source-map
  devtool: "eval",
  resolve: {
    // 확장자 처리
    // 여기 넣어주면 main.js에 import 시에 확장자를 제거할 수 있다
    extensions: [".js", ".vue"],
  },
  entry: {
    // 현재 폴더 안에 들어있는 main.js 찾아서 dir 합침
    app: path.join(__dirname, "main.js"),
  },
  // entry부터 처리하다가 이상한 걸 만나면 module의 rules부터 처리
  module: {
    // 파일명에 .vue가 들어가면 vue-loader가 처리를 한다.
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  // output 나오기 전에 plugin으로 가공
  plugins: [
    // vue-loader를 사용하기 위한 준비
    new VueLoaderPlugin(),
  ],
  // 최종 결과물
  output: {
    //filename: 'app.js'
    //[name]이라고 하면 알아서 app.js를 명함
    filename: "[name].js",
    //폴더경로
    path: path.join(__dirname, "dist"),
    // 정리하자면 dist라는 폴더가 생성될 것이고, app.js로 최종 결과물이 생성될 것
  },
};

 

4. NumberBaseball.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>숫자야구</title>
  </head>

  <body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
  </body>
</html>

 

 

5. NumberBaseball.vue

<template>
  <div>
    <h1>{{ result }}</h1>
    <form @submit.prevent="onSubmitForm">
      <input ref="answer" minlength="4" maxlength="4" v-model="value" />
      <button>입력</button>
    </form>
    <div>시도: {{ tries.length }}</div>
    <ul>
      <li v-for="t in tries" :key="t.try">
        <div>{{ t.try }}</div>
        <div>{{ t.result }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
const getNumbers = () => {
  const candidates = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  const array = [];
  for (let i = 0; i < 4; i++) {
    const chosen = candidates.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
    array.push(chosen);
  }
  return array;
};
export default {
  data() {
    return {
      answer: getNumbers(),
      tries: [],
      value: "",
      result: "",
    };
  },
  methods: {
    onSubmitForm() {
      if (this.value === this.answer.join("")) {
        this.tries.push({
          try: this.value,
          result: "홈런",
        });
        this.result = "홈런";
        alert("게임을 다시 실행합니다.");
        this.value = "";
        this.answer = getNumbers();
        this.tries = [];
        this.$refs.answer.focus();
      } else {
        if (this.tries.length >= 9) {
          this.result = `10번 넘게 틀려서 실패! 답은 ${this.answer.join(
            ","
          )}였습니다!`;
          alert("게임을 다시 시작합니다.");
          this.value = "";
          this.answer = getNumbers();
          this.tries = [];
          this.$refs.answer.focus();
        } else {
          let strike = 0;
          let ball = 0;
          const answerArray = this.value.split("").map((v) => parseInt(v));
          for (let i = 0; i < 4; i++) {
            if (answerArray[i] === this.answer[i]) {
              strike++;
            } else if (this.answer.includes(answerArray[i])) {
              ball++;
            }
          }
          this.tries.push({
            try: this.value,
            result: `${strike} 스트라이크, ${ball} 볼입니다.`,
          });
          this.value = "";
          this.$refs.answer.focus();
        }
      }
    },
  },
};
</script>
<style></style>

 

6. main.js

//Vue2 버전
//import Vue from "vue";

//Vue3버전
import { createApp } from "vue";
import NumberBaseball from "./NumberBaseball";

//vue2버전
//new Vue(NumberBaseball).$mount('#root');

//vue3버전
createApp(NumberBaseball).mount("#root");

 

CDN 으로 Vue를 실행하는 대신 Vue 프로젝트로 직접 구현해보는 섹션!

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

[인프런] 웹 게임을 만들며 배우는 Vue 2  (97) 2024.01.24
[인프런] 웹 게임을 만들며 배우는 Vue 1  (132) 2024.01.23
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-02-01]

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

  • My Life Would Suck Without You

    Kelly Clarkson
  • ChatGpt 리뷰
  • ▶ 켈리 클락슨의 "My Life Would Suck Without You"는 흥겨운 비트와 강렬한 보컬로 듣는 이들을 사로잡는다. 중독성 있는 멜로디와 강렬한 가사가 함께 어우러져, 듣는 이로 하여금 활기찬 에너지를 전해준다. 훌륭한 팝 댄스 곡이다.
  • 2

  • Just Dance

    Lady Gaga Featuring Colby O'Donis
  • ChatGpt 리뷰
  • ▶ 레이디 가가와 콜비 오도니스의 '저스트 댄스'는 중독성 있는 비트와 파워풀한 보컬로 가득찬 팝 댄스 곡이다. 신나는 멜로디와 중독성 있는 가사로 춤 신이고 싶게 만든다. 흥겨운 파티 분위기를 만들어내는 훌륭한 곡이다.
  • 3

  • Single Ladies (Put A Ring On It)

    Beyonce
  • ChatGpt 리뷰
  • ▶ 비욘세의 "싱글 레이디즈 (풋 어 링 언 잇)"은 중독성 있는 비트와 강렬한 보컬로 춤추게 만드는 팝 댄스 곡이다. 여성의 자립과 자신감을 주제로 한 가사가 인상적이며, 흥겨운 리듬과 멋진 가창력으로 흥을 돋우는 곡이다.
  • 4

  • Heartless

    Kanye West
  • ChatGpt 리뷰
  • ▶ 칸예 웨스트의 "Heartless"는 중독성 있는 멜로디와 강렬한 가사로 가득한 힙합 곡이다. 그의 감정을 솔직하게 드러내며, 감각적인 비트와 유려한 보컬이 인상적이다. 현대적이고 감각적인 음악으로, 그의 창의성을 잘 보여주는 곡이다.
  • 5

  • Love Story

    Taylor Swift
  • ChatGpt 리뷰
  • ▶ 테일러 스위프트의 "러브 스토리"는 사랑의 이야기를 감미롭고 로맨틱하게 풀어낸 곡으로, 감동적인 가사와 중독성 있는 멜로디가 매력적이다. 테일러의 보컬은 감정을 잘 전달하며, 이 곡은 사랑을 노래한 히트곡이다.
  • 6

  • Gives You Hell

    The All-American Rejects
  • ChatGpt 리뷰
  • ▶ The All-American Rejects의 "Gives You Hell"은 강렬한 멜로디와 중독성 있는 가사로 눈길을 사로잡는 곡이다. 밴드의 특유의 에너지와 감정을 담은 텍스트가 인상적이다. 훅이 매력적이고 인상적인 곡이다.
  • 7

  • Live Your Life

    T.I. Featuring Rihanna
  • ChatGpt 리뷰
  • ▶ T.I. Featuring Rihanna의 "Live Your Life"은 중독성 있는 멜로디와 흥겨운 비트로 가득한 훌륭한 협업곡이다. T.I.의 래핑과 Rihanna의 보컬은 환상적으로 어우러져, 듣는 이로 하여금 자유롭게 살아가는 기분을 느끼게 한다.
  • 8

  • You Found Me

    The Fray
  • ChatGpt 리뷰
  • ▶ The Fray의 "You Found Me"는 감동적인 가사와 멜로디로 눈물을 질질 흘리게 하는 곡. 감정을 자극하는 보컬과 진솔한 가사가 빛을 발하는 곡. 인생의 고난과 삶의 무력함을 느낄 수 있는 곡.
  • 9

  • Circus

    Britney Spears
  • ChatGpt 리뷰
  • ▶ 브리트니 스피어스의 '서커스'는 흥겨운 비트와 중독성 있는 멜로디로 가득 찬 팝 앨범이다. 그녀의 강렬한 보컬과 다채로운 악기 사운드가 조화롭게 어우러져, 듣는 이로 하여금 즉각적인 춤추게 만든다. 완벽한 댄스 음악으로 손색이 없다.
  • 10

  • I'm Yours

    Jason Mraz
  • ChatGpt 리뷰
  • ▶ 제이슨 므라즈의 'I'm Yours'는 상큼하고 감미로운 멜로디와 긍정적인 가사로 유명한 곡이다. 그의 부드러운 보컬과 유쾌한 분위기는 듣는 이에게 편안함을 선사한다. 이 곡은 휴양지나 해변에서 듣기 좋은 신나는 분위기를 자아낸다.

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

15년 전 Billboard hot 10 파헤치기 [2009-02-15]  (7) 2024.02.13
15년 전 Billboard hot 10 파헤치기 [2009-02-08]  (24) 2024.02.06
15년 전 Billboard hot 10 파헤치기 [2009-01-25]  (17) 2024.01.23
15년 전 Billboard hot 10 파헤치기 [2009-01-11]  (4) 2024.01.09
15년 전 Billboard hot 10 파헤치기 [2009-01-04]  (3) 2024.01.02
,

Singleton 패턴, JAVA에서의 응용과 이해

Java 정리 2024. 1. 29. 22:05

오늘은 프로그래밍에서 많이 사용되는 디자인 패턴 중 하나인 Singleton 패턴에 대해 이야기해보려고 합니다.

Singleton 패턴은 객체 생성을 제한하여 하나의 인스턴스만을 사용하도록 하는 패턴으로, JAVA에서도 많이 활용되는데요.

이번 글에서는 Singleton 패턴의 응용과 JAVA에서의 사용법에 대해 자세히 알아보고자 합니다. 함께 공부해보시죠!

 

목차
1. Singleton 패턴의 이해
2. Singleton 패턴의 적용 시나리오
3. JAVA에서의 Singleton 패턴의 적용
4. Singleton 패턴의 코드 이해
5. Singleton 패턴의 싱글스레드 구현
6. Singleton 패턴의 멀티스레드 환경에서의 구현
7. Singleton 패턴의 장단점
8. Singleton 패턴 대안 방식 및 향상된 Singleton 패턴 이해
9. 실제 프로젝트에서의 Singleton 패턴의 활용 사례
10. JAVA에서 Singleton 패턴의 정상적인 활용을 위한 조언

 


1. Singleton 패턴의 이해
Singleton 패턴은 객체 지향 프로그래밍에서 중요한 개념 중 하나로, 특정 클래스의 인스턴스가 하나만 생성되도록 보장하는 디자인 패턴입니다. 이를 통해 객체를 공유하고, 자원의 낭비를 줄일 수 있습니다.

2. Singleton 패턴의 적용 시나리오
Singleton 패턴은 여러 가지 상황에서 유용하게 적용될 수 있습니다. 예를 들어, 데이터베이스 연결, 로그 라이터, 캐시 매니저 등 여러 곳에서 하나의 인스턴스만 필요한 경우에 Singleton 패턴을 적용할 수 있습니다.

3. JAVA에서의 Singleton 패턴의 적용
JAVA에서 Singleton 패턴을 적용하는 방법은 다양합니다. 가장 일반적으로 사용되는 방법은 클래스 내부에 private static 변수로 인스턴스를 선언하고, getInstance() 메서드를 통해 해당 인스턴스를 반환하는 방식입니다.

4. Singleton 패턴의 코드 이해
아래는 JAVA에서 Singleton 패턴을 구현하는 코드의 예시입니다.

public class Singleton {
    private static Singleton instance;

    private Singleton() {
    	// private 생성자
    }

    public static Singleton getInstance() {
        if(instance == null) {
        instance = new Singleton();
        }
        return instance;
    }
}


5. Singleton 패턴의 싱글스레드 구현
싱글스레드 환경에서는 위에서 소개한 코드와 같이 간단하게 Singleton 패턴을 구현할 수 있습니다. getInstance() 메서드에서 인스턴스가 null인 경우에만 인스턴스를 생성하면 됩니다.

6. Singleton 패턴의 멀티스레드 환경에서의 구현
멀티스레드 환경에서는 다수의 스레드가 동시에 getInstance() 메서드를 호출하면, 여러 개의 인스턴스가 생성되는 문제가 발생할 수 있습니다. 이를 해결하기 위해 동기화 처리를 해야 합니다. 예를 들어, getInstance() 메서드에 synchronized 키워드를 사용하거나, DCL(Double-Checked Locking) 방식을 적용할 수 있습니다.

7. Singleton 패턴의 장단점
Singleton 패턴은 다음과 같은 장단점이 있습니다.

장점:
- 하나의 인스턴스만 필요한 경우 유용하게 사용할 수 있습니다.
- 객체를 공유하여 자원을 효율적으로 활용할 수 있습니다.

단점:
- 단일 책임 원칙을 위배할 수 있습니다.
- 테스트가 어려울 수 있습니다.
- 의존성을 가질 경우 코드의 복잡성이 증가합니다.

8. Singleton 패턴 대안 방식 및 향상된 Singleton 패턴 이해
Singleton 패턴은 여러 대안 방식이 존재하며, 이를 통해 향상된 Singleton 패턴을 구현할 수 있습니다. 예를 들어, Enum을 이용한 Singleton 패턴, 초기화-on-demand holder idiom 등이 있습니다.

9. 실제 프로젝트에서의 Singleton 패턴의 활용 사례
실제 프로젝트에서 Singleton 패턴은 다양한 곳에서 활용됩니다. 예를 들어, 스프링 프레임워크에서는 Bean 객체들이 Singleton으로 관리되며, 전역적으로 공유되어 사용됩니다.

10. JAVA에서 Singleton 패턴의 정상적인 활용을 위한 조언
JAVA에서 Singleton 패턴을 정상적으로 활용하기 위해서는 다음과 같은 조언을 따를 수 있습니다.
- Lazy Initialization 방식을 적용하여 필요한 시점에 인스턴스를 생성하는 것이 좋습니다.
- 동기화 처리는 필요한 경우에만 적용해야 합니다.
- 의존성 주입(Dependency Injection)을 활용하여 유연한 코드를 작성할 수 있습니다.

이렇게 JAVA에서 Singleton 패턴을 이해하고 적용하는 방법에 대해 알아보았습니다.

Singleton 패턴은 객체 지향 프로그래밍에서 중요한 개념이므로, 다양한 상황에서 유용하게 활용할 수 있습니다.

'Java 정리' 카테고리의 다른 글

java 8 정리11  (0) 2021.07.01
java 8 정리10  (0) 2021.06.30
java 8 정리9  (0) 2021.06.17
java 8 정리8  (0) 2021.06.02
java 8 정리7  (0) 2021.05.26
,
1 ··· 4 5 6 7 8 9 10 ··· 94

티스토리툴바