링크

www.acmicpc.net/problem/2557

Hello World 성공분류

시간 제한메모리 제한제출정답맞은 사람정답 비율

문제

Hello World!를 출력하시오.

입력

없음

출력

Hello World!를 출력하시오.

예제 입력 1

예제 출력 1

Hello World!

알고리즘 분류

• 구현

내 제출

print("Hello World!")

Vuetify를 활용한 Alert Component 제작기 2편에서는 1편에서 잡지못한 에러를 잡아보겠습니다.

컴포넌트 기본 제작기를 보시려면 1편을 먼저 확인해주세요

ohmh.tistory.com/18

배경 : AlertDialog가 create되고, 우리가 설정한 timeout이 지나서 destroy되기 전에 dialog overlay를 클릭하면 발생하는 에러

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialog"

원인
: NavBar(parent)로부터 AlertDialog(child)로 넘겨받은 props 중 "dialog"가 있다.
: timeout이 지나기 전, dialog overlay를 클릭하면 이 "dialog" false로 만드는데,
: parent로부터 받은 props를 child에서 변경하면서 발생하는 에러

1. v-dialog props "persistant" 활용

Alert Dialog Component (component > module > AlertDialog.vue)

v-dialog에 persistent를 추가하여 overlay를 클릭해도 닫히지 않도록 조치한다.

  <v-dialog v-model="dialog" persistent max-width="250">

2. Click Outside 활용

vuetify의 v-click-outside를 활용해보려고 했으나, 동일한 에러 발생.

onClickOutside로 store의 data를 mutation하기 이전에

default로 있는 click:outside가 먼저 작동.

따라서, @click:outside 활용

<template>
  <v-dialog v-model="dialog" max-width="250" @click:outside="onClickOutside">
    <!-- v-click-outside="onClickOutside" -->
   
// 생략 

  methods: {
    onClickOutside() {
      this.$store.dispatch("closeAlertDialog")
    },
  },

AlertDialog.vue 최종 코드

<template>
  <v-dialog v-model="dialog" max-width="250" @click:outside="onClickOutside">
    <!-- v-click-outside="onClickOutside" -->
    <v-card>
      <v-card-title class="justify-center mb-4" style="font-size: 2rem;">
        <div>{{ emoji }}</div>
      </v-card-title>

      <v-card-subtitle class="text-center pb-2 font-weight-bold">
        <div>{{ title }}</div>
      </v-card-subtitle>

      <v-card-text class="text-center">
        <div v-if="firstLineText">{{ firstLineText }}</div>
        <div v-if="secondLineText">{{ secondLineText }}</div>
        <div v-if="thirdLineText">{{ thirdLineText }}</div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  // props: ["title", "firstLineText", "secondLineText", "ThirdLineText", "btnText", "dialog"],
  props: {
    dialog: Boolean,
    timeout: {
      type: Number,
      default: 1500,
    },

    emoji: String,
    title: String,
    firstLineText: String,
    secondLineText: String,
    thirdLineText: String,
  },
  mounted() {
    setTimeout(() => {
      this.$store.dispatch("closeAlertDialog")
    }, this.timeout)
  },
  methods: {
    onClickOutside() {
      this.$store.dispatch("closeAlertDialog")
    },
  },
  // destroyed() {
  //   console.log("destoyed")
  // },
}
</script>

<style></style>

이로써 바깥을 클릭해도 에러가 발생하지 않는 컴포넌트가 완성되었다.

잘 하셨습니다.

vuetifyjs.com/en/directives/click-outside/

잘하셨습니다, OHMH(애매)

2021.02.21.

본 포스팅은 Vuetify를 활용한 Alert Component 제작기를 담고 있습니다.

배경 : 사용자가 정보를 등록하거나 업데이트할 때마다 띄워줄 Alert Component를 제작

1. 다양한 페이지에서 쓰일 수 있기에 매번 import하는 것보다 Global import가 마땅하다 판단

1-1. @/components/Module/AlertDialog.vue 해당 경로에 적당한 Component를 제작

- trigger를 통해서 v-model:dialog를 열어주고, setTimeout으로 닫아주도록 제작(문서 내 2-3 코드 확인)

1-2. main.js에 global import(전역 등록)

// main.js
Vue.component("AlertDialog", () => import("@/components/Module/AlertDialog.vue"))

배경
: Global로 등록했으나, router가 변경되는 상황에서는 setTimeout 끝까지 기다리지 않고 dialog도 함께 없으질 것으로 판단.
: Parent Component에서 dialog를 toggle해주는 methods를 매번 등록해야하는 불편함.

So, 어디에서든 켜져있는 Parent component와 어디에서든 접근할 수 있는 데이터가 필요.
- 어디에서든 켜져있는 Parent component = Navigation Component
- 어디에서든 접근할 수 있는 데이터 = Vuex(store)

2. Vuex(store) + Navigation을 활용한 컴포넌트 제작

2-1. Vuex(store > index.js)

차후 사용처(2-4)에서 "dispatch"를 통해

store의 actions를 호출하면,

actions에서 mutation를 호출하고,

mutations에서 state의 데이터를 변이시킨다.

export default new Vuex.Store({
  state: {
    alertDialogToggle: false,
    alertDialogInfo: null,
   },
  mutations: {
    openAlertDialog(state, payload) {
      state.alertDialogInfo = payload
      state.alertDialogToggle = true
    },
    closeAlertDialog(state) {
      state.alertDialogInfo = null
      state.alertDialogToggle = false
    },
  },
  actions: {
    // Alert Dialog
    openAlertDialog({ commit }, alertDialogInfo) {
      commit("openAlertDialog", alertDialogInfo)
    },
    closeAlertDialog({ commit }) {
      commit("closeAlertDialog")
    },
  },

2-2. Navigation (components > NavBar.vue ) *제작하는 웹페이지 어디에서든 열려있는 네비게이션 컴포넌트

Tip. alert-dialog에 v-if를 넣어서 props undefied를 방지함과 동시에, Toggle이 닫히면 component가 destroy될 수 있도록 한다.

<template>
    <alert-dialog
      v-if="alertDialogToggle" // Tip
      :dialog="alertDialogToggle"
      :timeout="alertDialogInfo.timeout"
      :emoji="alertDialogInfo.emoji"
      :title="alertDialogInfo.title"
      :firstLineText="alertDialogInfo.firstLineText"
      :secondLineText="alertDialogInfo.secondLineText"
      :thirdLineText="alertDialogInfo.thirdLineText"
    ></alert-dialog>
</template>

<script>
import { mapState } from "vuex"
export default {
  components: {
    AlertDialog,
  },
  computed: {
    ...mapState(["alertDialogToggle", "alertDialogInfo"]),
    //   alertDialogToggle() {
    //     return this.$store.state.alertDialogToggle
    //   },
    //   alertDialogInfo() {
    //     return this.$store.state.alertDialogInfo
    //   },
  },
}
</script>

2-3. Alert Dialog Component (component > module > AlertDialog.vue)

<template>
  <v-dialog v-model="dialog" max-width="250">
    <v-card>
      <v-card-title class="justify-center mb-4" style="font-size: 2rem;">
        <div>{{ emoji }}</div>
      </v-card-title>

      <v-card-subtitle class="text-center pb-2 font-weight-bold">
        <div>{{ title }}</div>
      </v-card-subtitle>

      <v-card-text class="text-center">
        <div v-if="firstLineText">{{ firstLineText }}</div>
        <div v-if="secondLineText">{{ secondLineText }}</div>
        <div v-if="thirdLineText">{{ thirdLineText }}</div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  // props: ["title", "firstLineText", "secondLineText", "ThirdLineText", "btnText", "dialog"],
  props: {
    dialog: Boolean,
    timeout: {
      type: Number,
      default: 1000,
    },

    emoji: String,
    title: String,
    firstLineText: String,
    secondLineText: String,
    thirdLineText: String,
  },
  mounted() {
    setTimeout(() => {
      this.$store.dispatch("closeAlertDialog")
    }, this.timeout)
  },
  // destroyed() {
  //   console.log("destoyed")
  // },
}
</script>

<style></style>

2-4. 사용처 사용방법과 결과 화면

다른 로직을 완수한 후 openAlert() methods를 호출하여

데이터를 셋팅하고 dispatch를 통해 store의 내용을 변경한다.

곧바로 $this.router.push로 페이지를 이동시켜도

destoyed되지 않고 정상 작동하는 모습을 볼 수 있다.

  methods: {
    openAlert() {
      let alertDialogInfo = {
        // timeout: 5000,
        emoji: "🙏🏻",
        title: "카페가 성공적으로 등록되었어요!",
        firstLineText: "도움에 감사드립니다",
        secondLineText: "by.ccaaffee",
        // thirdLineText: "셋째줄",
      }
      this.$store.dispatch("openAlertDialog", alertDialogInfo)
    },
 }

추가 팁 

Parent에서 child로 Number 타입의 "params" props를 넘기고 싶다면

// Child
props: {
  params: {
     type: Number
  }
}


// Parent
<parent :params="5000" /> 
// params="5000" 와 같이 넘기면 String 타입으로 에러 발생

2편 예고 : Vue Global Alert Component 제작기(2)

: 부모에게 대드는 자식을 잡아보자.

AlertDialog가 create되고, 우리가 설정한 timeout이 지나서 destroy되기 전에 dialog overlay를 클릭하면 발생하는 에러

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialog"

*본 포스팅의 모든 코드 블럭에는 주제와 무관한 내용의 코드를 생략하였습니다.

잘하셨습니다, OHMH(애매)

2021.02.20.

문제 : auth가 없는 상태에서 firebase Storage read 시, 에러 

error FirebaseError: Firebase Storage: User does not have permission to access '*******'. (storage/unauthorized)

원인 : Firebase Storage 접근 권한 이슈

해결 : Firebase Storage Rules 수정

수정 전 : read/write 모두 auth가 있는 경우에만 허용

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
     allow read, write: if request.auth != null;
    }
  }
}​

수정 후 : read를 분리하여 허용, write는 기존 권한 유지

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
     allow read;
     allow write: if request.auth != null;
    }
  }
}

참고 : stackoverflow.com/questions/38671444/user-does-not-have-permission-to-access-this-object-firebase-storage-android

잘하셨습니다, OHMH(애매)

2021.02.19.

윈도우 환경에서 텍스트의 서식을 모두 없애고 싶을 때

간편하게 메모장을 활용했다.

맥에서는 텍스트 편집기가 그 기능을 대체할 수 있다.

기본 앱에 있으니, 실행해보자.

기본적인 텍스트 편집기는 서식이 먹힌다.

만족스럽지 못하다.

텍스트 편집기 > 포맷 > 일반 텍스트 만들기 를 선택하자.

서식이 없어진 텍스트를 마주할 수 있다.

편-안

잘하셨습니다.

사진 찍는 개발자, OHMH(애매)

2021.01.14.

0. 마음은 가볍게

추운 겨울, 출사를 나가겠다고 마음먹은 것부터가 이미 큰 성공이다.

마음만은 가볍게 해보자.

1. 몸은 따뜻하게

출퇴근길처럼 이동하는데 잠깐이 아니라,

매서운 강풍과 추위를 버티고 몇 시간을 서있어야 할지도 모른다.

너무 과한 게 아닌가 싶을 정도로 챙긴다. 장갑과 핫팩은 필수다.

2. 배터리는 넉넉하게

보통의 배터리들은 추위에 약하다.

배터리를 넉넉하게 하거나 보조배터리를 챙긴다.

3. 노출은 높게

설경 사진은 노출을 +0.3~0.6 EV 높여서 촬영한다.

하얀 눈에 대한 노출을 제대로 측정하지 못하기 때문에 회색으로 보인다.

따라서 노출을 약간 높이는 것이 현명하다.

4. 귀가 후

급격한 온도 변화로 인해 카메라나 렌즈에 습기가 차는 모습을 볼 수 있다.

높은 습도는 카메라에게 최악이다.

카메라를 가방 안에서 꺼내지 않은 체로 두어 온도 변화를 늦출 수 있다.

5. 기타

플래시를 활용하여 내리는 눈을 촬영해본다.

극세사 천을 준비해 렌즈에 들어간 눈을 닦아주자.

멀리서 혹은 가까이서 찍어본다.

[출사] 상암동 하늘공원 메타세콰이어길 ohmh.tistory.com/11

잘하셨습니다.

사진 찍는 개발자, OHMH(애매)

2021.01.13.

겨울철 출사 팁 📷 📸 ohmh.tistory.com/12

잘하셨습니다.

사진 찍는 개발자, OHMH(애매)

2021.01.13.