아래와 같이 클래스를 만들었을 경우

1.  Override, 다형성

open class Country ( var fullName: String, var capital: String, var language: String)  {

    fun printFullName () {
        println("fullName: $fullName")
    }
    fun printCapital () {
        println("capital: $capital")
    }
    fun printLanguage () {
        println("language: $language")
    }
    open fun singNationalAnthem () {
        println("singNationalAnthem")
    }
}

class Korea (fullName: String, capital: String, language: String) : Country( fullName, capital, language) {
    override fun singNationalAnthem () {
        super.singNationalAnthem()
        println("sing Korea")
    }
}


class USA ( fullName: String, capital: String, language: String) : Country( fullName, capital, language) {
    override fun singNationalAnthem () {
        super.singNationalAnthem()
        println("sing USA")
    }
}

 

  1. Country 라는 클래스를 Korea, USA 라는 클래스에서 상속.
  2. 자식 클래스에서는 super.METHOD 를 통해 부모 클래스의 메서드를 호출 할 수 있다.
  3. +커스터마이징이 가능하다 (== 다형성)

 

fun main (args: Array<String>) {
    val korea = Korea("대한민국", "서울", "한국어")
    korea.singNationalAnthem()
    val usa = USA("미국", "워싱턴", "영어")
    usa.singNationalAnthem()
}

/** output
singNationalAnthem
sing Korea
singNationalAnthem
sing USA
*/

이렇게 출력이 된다.

Java의 문법과는 또 달라서 [ Java(public) / Kotlin(open) ] 신기하다.
뭔가 public 공공의 라는 뜻보다는 open 이 더 직관적이기도 하고

 


 

2. Abstract. 추상매서드

다음으로 추상메서드에 대해 메모한다.

//추상클래스
abstract class Game {
    //일반메서드
    fun startGame () {
        println("Game Start")
    }

    //추상메서드
    abstract fun printGameName ()
}

class OverWatch: Game() {
    //추상메서드는 하위 클래스에서 반드시 구현해야함
    override fun printGameName() {
        println("This game is OverWatch.")
    }
}

Game이라는 클래스를 만들었다.
Game > 메서드로 printGameName 이라는 메서드를 만들어놓았다.
: 추상메서드는 반드시!!! 오버라이딩 한 메서드에서 만들어야한다.

fun main (args: Array<String>) {
    val overwatch = OverWatch() //새로운 인스턴스 생성

    overwatch.startGame()
    overwatch.printGameName()
}

새로운 인스턴스 overWatch 를 생성.
해당 클래스에 선언된 메서드를 실행하였다.
printGameName 메서드는 추상메서드로 선언(abstract)

예전에는 이게 무슨소린지 전혀 이해를 못했었는데, 다시 보니 또 바로 이해되는게 신기하다.

반응형
반응형

Vue.js 2, Vuetify, router, vuex, vue-chart.js 를 이용하여 프로젝트 외면을 꾸며주었다. 

물론 프로젝트 자체를 확인해보면 router, vuex를 사용하지 않은 것을 확인할 수 있다.

Vuetifyactive를 사용하여 버튼을 클릭하면 검정색 글씨로 변하는 버튼이 된다.

유튜브 강의 를 통해 볼 수 있었습니다.

강의 내용은 주로 Vuetify 내용을 다루고 있습니다.

반응형

vue 3,  vue-cli 4.5.x 의 환경을 사용하고 있습니다.

■ LocalStorage

 - 로컬 스토리지에 관하여 자세한 내용은 MDN의  링크를 확인해주시기 바랍니다.

 

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.

developer.mozilla.org

사용 방법은 아주 간단합니다.

 

localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다.

번외로 localStorage.removeItem()지정하여 삭제가 가능하고, localStorage.clear()모두 삭제가 가능합니다.

 

■ 예제

//add.vue

<template>
  <div class="add">
      <input 
        type="text" 
        class="add__input" 
        placeholder="Enter your task" 
        v-model="newTodoItem"
        @keyup.enter="addTodoItem"
      />
      <button 
        class="add__button"
        @click="addTodoItem"  
      >Add</button>
  </div>
</template>

Input:text 창에서 enter를 누르거나, button을 클릭하면 addTodoItem이라는 함수가 호출되게 하였습니다.

v-model을 통하여 input에 작성되어져 있는 value와 연동하였습니다.

 

export default {
  data () {
    return {
      newTodoItem: ''
    }
  },
  methods: {
    addTodoItem () { 
      if(this.newTodoItem !== '') {

        const value = {
          item: this.newtodoItem,
          date: `${new Date().getMonth() + 1}/${new Date().getDate()}`,
          compeleted: false
        }

        // setItem 이라는 method 속에 key, value를 전달
        localStorage.setItem(this.newTodoItem, JSON.stringify(value))
        this.clearInput()

      }
    },
    clearInput () {
      this.newTodoItem = ''
    }
  }

}

localStorage.setItem( )은 keyvalue를 전달 수가 있는데, 이를 응용하여 value에 JSON 객체를 전달하도록 하였습니다.

value라는 객체에 위에서 작성한 input의 값을 저장하고, localStorage에 데이터를 저장하였습니다.

로컬 스토리지에 저장된 것을 확인하고 싶다면, 개발자도구 -> Application -> 저장용량 -> 로컬 스토리지 에서 확인하실 수 있습니다.

좌: KEY값에 따른 VALUE, 우: JSON객체로 지정한 VALUES

 

반응형

 

 

■ 사용 기술

1. Vue.js 2
2. html
3. sass

전반적으로 아주 아주 아주 기초의 Vue.js 프로젝트였음

난이도 : ★☆☆☆☆
따라하기 쉬움

실용성 : ★★☆☆☆
본업에서 딱히 도움될만한 내용은 없음

sass 지식을 살짝 얻어감
(sass를 사용 안했었기 때문에)

 

 

대충 이런거 만듬(모바일 크기) <-> pc버전

 

 

 

반응형

안녕하세요 상훈입니다.

Spring에서 css 경로를 잡아주도록 하겠습니다. [ jsp example css path ]

실제 경로

실제 경로는 
"src/main/webapp/resources/css/cssfilename.css" 인데요,

이걸 다 써줄 수도 없으니, jsp 파일에서 작성할 link부분을 바로 작성하도록 하겠습니다.

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/addrbook.css" type="text/css" media="screen" />

${pageContext.request.contextPath} 를 넣어주는겁니다.

 

이상입니다.

반응형
반응형

안녕하세요 상훈입니다.

드림코딩 앨런님의 강의로 자바스크립트를 이용하여 짧고 간단한 쇼핑 웹앱을 구현하도록 해보겠습니다.

결과 화면

 

index.html

<!DOCTYPE html>
<html lang="ko">
<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">
  <link rel="stylesheet" href="style.css">
  <script src="src/main.js" defer></script>
  <title>Document</title>
</head>
<body>
  <!--Logo-->
  <img src="img/logo.png" alt="Logo" class="logo">

  <!--Buttons-->
  <div class="buttons">
    <button class="btn">
      <img src="img/blue_t.png" alt="blue tshirts" class="imgBtn" data-key="type" data-value="tshirt" />
    </button>
    <button class="btn">
      <img src="img/blue_p.png" alt="blue pants" class="imgBtn" data-key="type" data-value="pants" />
    </button>
    <button class="btn">
      <img src="img/blue_s.png" alt="blue skirt" class="imgBtn" data-key="type" data-value="skirt" />
    </button>
    <button class="btn" class="btn colorBtn blue"  data-key="color" data-value="blue">Blue</button>
    <button class="btn" class="btn colorBtn yellow" data-key="color" data-value="yellow">Yellow</button>
    <button class="btn" class="btn colorBtn pink" data-key="color" data-value="pink">Pink</button>
  </div>
  <!--Items-->
  <ul class="items"></ul>
</body>
</html>

 

 

main.js

// Fetch the items from the JSON file
function loadItems() {
    return fetch('data/data.json')
    .then(response => response.json())
    .then(json => json.items)
}

// update the list with the given items
function displayItems(items) {
    const container = document.querySelector('.items')
    container.innerHTML = items.map(item => createHTMLString(item)).join('')
}

// Create html list item from the given data item
function createHTMLString (item) {
    return `
        <li class="item">
            <img src="img/${item.image}" alt="${item.type}" class="item__thumbnail">
            <span class="item__description">${item.gender}, ${item.size}</span>
        </li>
    `
}

function onButtonClick (event, items) {
    const dataset = event.target.dataset
    const key = dataset.key
    const value = dataset.value

    if(key == null || value == null){
        return ;
    }

    // updateItems(items, key, value)

    const filtered = items.filter(item => item[key] === value)
    displayItems(filtered)
}

function updateItems(items, key, value) {
    items.forEach(item => {
        if(item.dataset[key] === value) {
            item.classList.remove('invisiable')
        }else{
            item.classList.add('invisable')
        }
    });
}


function setEventListeners (items) {
    const logo = document.querySelector('.logo')
    const buttons = document.querySelector('.buttons')
    logo.addEventListener("click", () => displayItems(items) )
    buttons.addEventListener("click", event => onButtonClick(event, items))
}


// main
loadItems() 
    .then(items => {
        displayItems(items)
        setEventListeners(items)
    })
    .catch(console.log)

 

 

style.css

:root {
  /* color */
  --color-black: #3f454d;
  --color-white: #ffffff;
  --color-blue: #3b88c3;
  --color-yellow: #fbbe28;
  --color-pink: #fd7f84;
  --color-light-grey: #dfdfdf;

  /* size */
  --base-space: 8px;
  --size-button: 60px;
  --size-border: 4px;
  --size-thumbnail: 50px;
  --font-size: 18px;

  /* animation */
  --animation-duration: 300ms;
}

body {
  height:100vh;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  cursor: pointer;
  transition: transform var(--animation-duration) ease;
}

.btn {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform var(--animation-duration) ease;
  margin-right: var(--base-space);
}

.btn:hover,
.logo:hover {
  transform: scale(1.1);
}

.buttons {
  display: flex;
  align-items: center;
}

.imgBtn {
  width: var(--size-button);
  height:var(--size-button);
}

.colorBtn {
  font-size: var(--font-size);
  padding: calc(var(--base-space) * 2);
  border-radius: var(--size-border);
}

.blue {
  background-color: var(--color-blue);
}

.yellow {
  background-color: var(--color-yellow);
}

.pink {
  background-color: var(--color-pink);
}

.items {
  width: 60%;
  height: 60%;
  list-style: none;
  padding-left:0;
  overflow-y: scroll;
}

.item {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  padding: var(--base-space);
  margin-bottom: var(--base-space);
}

.item__thumbnail {
  width: var(--size-thumbnail);
  height: var(--size-thumbnail);
}

.item__description {
  margin-left: var(--base-space);
  font-size: var(--font-size);
}

 

디렉터리 구조

디렉터리 구조는 다음과 같습니다. 강의 영상에서 제공한 project 자체를 import 시켰습니다.

이미지, json 등의 파일은 모두 구비되었습니다.

 

강의 진행이 되면서 간단하다 간단하다 하셨는데, 전혀 간단하게 느껴지지 않았습니다. ㅠㅠ

자바스크립트의 filter, map 등등 몇가지 라이브러리를 사용하셨었는데, 

저같은 웹린이한테는 어렵다고 느껴졌어요...

눈물..

나는 감자다! I'm annoied talking potatoooooooo!!!!

 

반응형

+ Recent posts