반응형
이번 주말에 뮤지컬 시카고를 관람하고 왔습니다. 뮤지컬은 엄~청 오랜만에 보는데, 시카고 뮤지컬 워낙 오래되고 유명한 뮤지컬이라 들어는 봤지만 실제로 보게 되어서 굉장히 설레었습니다. 신한카드에서 1+1 예매 이벤트를 해서 3층석을 예매해서 관람하였습니다. 장소는 블루스퀘어입니다. 지하철 한강진역 2번 출구에 바로 앞에 있어서 교통이 편리해서 좋았어요 로드뷰길찾기지도 크게 보기 뮤지컬을 보면 4시간 주차를 5천 원에 할 수 있다고 하지만 대중교통을 이용해서 방문하였습니다. 객석 1층과 2층 밖에는 뮤지컬 굿즈와 기념 촬영할 수 있는 곳들이 있습니다. 공연은 145분간 진행이 되고, 중간에 20분 쉬는 쉬간이 있습니다. 만 14세 이상 관람 가능이어서 중학생 이상도 관람할 수 있습니다. 공연 중에는 촬영을..
강남역에 이번에 파이브가이즈가 6월 26일 새로 오픈하였습니다. 오픈날짜와 그 이후에 많은 사람들이 방문했는데, 저는 이번에 평일에 방문하였습니다. 평일 저녁 9시쯤 방문하니 대기줄 없이 바로 입장할 수 있었습니다.😚 영업시간은 11:00 ~ 22:00입니다. 주말에는 약간 웨이팅이 있어 보였습니다. 강남 러시 옆 건물에 있습니다. 1층과 2층으로 되어있습니다. 1층에서 주문을 할 수 있고 2층에도 더 넓은 자리들이 있습니다. 입장 후 순서대로 주문을 시작합니다. 주문을 하고 햄버거를 선택하고 추가할 토핑을 고릅니다. 토핑은 마요네즈, 케첩, 머스터드, 양상추, 피클, 토마투, 그릴드 어니언, 그릴드 머시룸 렐리시, 어니언, 할라피뇨, 피망, 스테이크소스, 바비큐소스, 핫소스 이렇게 있습니다. 특별히 가..
대한민국 해양 방사능 안전 정보 save-sea-fe.pages.dev 최근 일본의 후쿠시마 원전 오염수 방류에 관련해서 뉴스가 많이 나오고 있습니다. 오염수 방류에 대해서도 찬반 의견이 많습니다. 그래서 저도 관심을 가지고 보고 있는 중에 해양수산부에서 제공하는 대한민국 해양 방사능 안전 정보가 데이터가 있어서 지도로 만들어서 표시하였습니다. 해양수산부에서 가까운 바다와 먼바다에 대해서 방사능 물질에 대한 검사를 주기적으로 진행하고 있습니다. 삼중수소와 세슘 137과 같은 방사성 물질과 측정 수치 수준을 나타내는 자료를 Open API를 통해서 제공하고 있습니다. 현재 2023년 4월 조사된 데이터까지 제공하고 있습니다. 해당 방사성 물질의 수치가 있으면 좋겠는데 수치는 제공하지 않고, 상태만 나타나는..
Vue에서 v-if와 v-show 디렉티브가 있습니다. 디렉티브란 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 특수한 속성입니다. v-if v-show 공통점 두 가지 모두 조건에 따라서 화면에 렌더링 할 수 있는 디렉티브입니다. 차이점 v-if 는 조건이 참이면 렌더링을 하고 거짓이면 아무 동작을 하지 않습니다. v-show는 조건에 따라서 display 속성을 이용하여 보이거나, 숨깁니다. 성능 차이 v-if는 실제로 화면을 렌더링을하고, 다시 지우고 해서 토글 비용이 높습니다. 반면에 v-show는 초기에 화면을 렌더링 할 때 비용이 높습니다. 무언가를 자주 토글을 해야하는 경우에는 v-show를 사용하고, 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋습니다..
Nuxt 에서 modules와 buildModules 속성이 있습니다. modules Nuxt에서 모든 기능을 제공하면 매우 복잡하고 어려워서, 사용자가 프로젝트별로 모듈을 추가 할 수 있습니다. modules에서 정의한 모듈은 Nuxt가 부팅될때 순차적으로 실행이 됩니다. nuxt.config.js 에서 modules 옵션을 설정할 수 있습니다. export default defineNuxtConfig({ modules: [ // Simple usage '@nuxtjs/eslint-module', // With options ['@nuxtjs/eslint-module', { /* module options */ }] ] }) buildModules nuxt v2.9 이후로 buildModules 속성이..
최근 친구들과 술자리 중에 이런 질문을 받은 적이 있습니다. 왜 경상도 사람들은 자유 한국당을 지지하냐? 이번 20대 대통령 선거에서도 경상도 모든 지역에서 윤석열 대통령을 득표율이 높았습니다. 부산 더불어민주당이재명38.15% 국민의힘윤석열58.25% 정의당심상정2.18% 대구 더불어민주당이재명21.60% 국민의힘윤석열75.14% 정의당심상정1.94% 울산 더불어민주당이재명40.79% 국민의힘윤석열54.41% 정의당심상정2.92% 경북 더불어민주당이재명23.80% 국민의힘윤석열72.76% 정의당심상정1.88% 경남 더불어민주당이재명37.38% 국민의힘윤석열58.24% 정의당심상정2.47% 실제로 부산에서 나이 드신 분들은 자유 한국당을 많이 지지하고 있습니다. 또 이런 이야기를 종종 듣고는 합니다. O..
개발 용어 중 보일러 플레이트라는 말이 있습니다. 이 코드는 보일러 플레이트로 관리해서 만들면 좋겠다 보일러 플레이트 단어 뜻과 어원 어떻게 사용되는지 알아보도록 하겠습니다. 보일러플레이트란? 프로그래밍 분야에서 사용하는 보일러 플레이트는 반복적으로 사용되는 코드 조각들을 재사용하는 패턴을 의미합니다. 프로그래밍 코드 이외에도 개발 초기 필수적으로 설정이나 구조들도 보일러 플레이트가 될 수 있습니다. 보일러 플레이트 코드를 재사용을 하면 개발자들이 비즈니스 로직에 더욱 집중할 수 있어서 프로젝트 작업 속도 향상에 도움이 됩니다. 보일러플레이트 어원 보일러를 만들때 강철에 보일러 이름과 정보를 동일하게 입력하는 틀에서 시작되었습니다. 이 단어가 프로그래밍 분야로 넘어오게 되었습니다. 보일러 플레이트 코드 ..
Minxin 란? Mixins는 Vue 컴포넌트에서 코드를 재사용할 수 있는 방법입니다. 언제 사용하면 좋을까? Vue 컴포넌트에서 HTML과 Style은 재사용이 가능합니다. 컴포넌트가 비슷한 로직을 가지고 있으면 Mixins를 사용하는 것이 좋습니다. 예를 들면, 회원 정보 List를 조회하는 컴포넌트(UserList)와 프로젝트 List를 조회하는 컴포넌트(ProjectList)가 있으면 컴포넌트 초기화 이후 데이터를 조회하고, List 컴포넌트를 만드는 로직이 비슷하다면 Mixins을 통해서 코드를 재사용하고, 중복 소스를 제거할 수 있습니다. 사용법 mixins 폴더를 생성하고 listMixin.js 파일을 생성합니다. listMixin.js export default { data(): { re..
안녕하세요. 지난 포스팅에서 Vuex가 무엇인지 언제 사용하는지에 대해서 알아보았습니다. Vuex 상태 관리 라이브러리 설치 방법 사용법 Vuex란? Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다. 지역상태 vs 전역상태 상태는 Local State와 Global State가 있습니다. 지역 상태(local state) 전역 상태(global state) 하나의 컴포넌트에서 powerku.tistory.com 이번에는 Vuex를 더 나은 방법으로 사용하기 위해서 state, getter, mutations, actions에 대해서 알아보도록 하겠습니다. State, Getter, Mutations, Actions를 사용해야 하는 이유 methods: { addOne() { th..
Intersection Observer 란? 브라우저의 자바스크립트 API 중 하나입니다. 엘리먼트의 가시성 변화를 감지할 수 있습니다. 예전에는 스크롤 이벤트를 통해서 스크롤 페이징을 구현하였는데, 브라우저 과부하를 일으켜서 성능 저하가 일어나기도 하였습니다. 하지만 Intersection Observer API를 브라우저의 내부 로직을 이용하여 엘리먼트의 가시성 변화를 감지할 수 있어서 성능이 좋고 효율적으로 무한 스크롤을 구현할 수 있습니다. 언제 사용하면 좋은지? 1. 무한스크롤 구현 사용자가 스크롤을 할 때 새로운 내용을 동적으로 로드할 수 있습니다. 무한스크롤을 이용하면 페이지 로딩 속도를 개선할 수 있고 부드러운 사용자 경험을 제공할 수 있습니다. 2. 이미지/광고 로딩 최적화 화면에 보일때..