전체 글

안녕하세요, 이번 포스트에서는 컴포지션 API(Compisition API)에서 템플릿을 참조하는 방법에 대해 소개하려고 합니다. 사용 방법이 크게 달라지진 않았지만, 값으로써 참조하는 방법이 조금 바뀌게 되었습니다. 먼저, 기존의 템플릿 요소 참조 방법을 간략히 살펴보겠습니다. [ 기존 방식 ] 기존에는 참조하고자 하는 템플릿 요소에 ref="바인딩명" 형식으로 작성한 후, 마운트 이후 this 컨텍스트의 $refs를 통해 간단히 참조할 수 있었습니다. 다만, 컴포지션 API의 경우 this 컨텍스트가 존재하지 않으므로 조금 다른 방법으로 사용해야합니다. [ Composition API 방식 ] 참조하고자 하는 템플릿 요소에 ref 속성을 추가하는 방법은 기존과 동일합니다. 그러면 값은 어떠한 방법으..

(본 포스팅은 Vue 3와 타입스크립트를 사용하는 환경 기준으로 설명합니다) 안녕하세요 이번 포스팅에서는 Vue 3 버전부터 공식적으로 추가될 Composition API와 Vuex를 사용하는 방법에 대해 알아보려고 합니다. 기존에 사용하던 Vuex 저장소 접근 방식은 아래와 같이 바인딩된 this 컨텍스트의 $store를 통해 주입된 Vuex 저장소에 접근할 수 있었습니다. // Vuex store import vuex from 'vuex'; export default new Vuex.Store({ state: { name: '근둥' }, }) // Component export default { name: 'App', created () { console.log(this.$store.state.nam..

🎉 소개 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 첫 번째 저서, "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 한다. 본 블로그에도 프로그레시브 웹 앱에 대해 간략히 알아볼 수 있는 강좌를 작성했었는데, 프로그레시브 웹 앱에 대해 보다 더 다양하고 자세한 내용을 다룰 수 있는 내용을 정리하여 집필하게 되었다. 📖 책 보러 가기 책에 대한 자세한 내용은 아래 온라인 서점에서 확인해볼 수 있다. YES24 교보문고 알라딘 인터파크도서 프로그레시브 웹 앱의 전반적인 내용과 다양한 핵심 기능을 밑바닥부터 구현해보며 한 걸음 더 나아갈 수 있도록 구성되어있다. 오프라인 환경에서 웹 페이지를 사용하거나 게시물에 대한 백그라운드 동기화 작업 수행, 그리고 좋아요 알림 기..

이번 포스팅에서는 Safari 14 버전부터 사용 가능하게 될 웹 확장(Web Extension)에 대해 알아보고, 샘플 확장 프로그램을 개발해보고자 한다. 기존 사파리(14버전 미만) 브라우저에서도 확장 프로그램을 사용할 수 있었지만, 스위프트로 개발된 네이티브 앱을 별도로 설치하고 활성화하는 방식으로 사용한다는 불편함이 있었다. (접근성도 좋지 않았다) 하지만 곧 업데이트될 사파리 14 버전부터는 구글 크롬 브라우저와 같이 자바스크립트로 웹 확장을 개발할 수 있게 되는데, 웹 개발 모델을 따르고, 웹 확장을 지원하는 다른 브라우저와의 호환성도 유지하기 때문에 사파리 웹 확장을 개발한 후 다른 브라우저에서도 동일한 확장 기능을 사용할 수 있을 것으로 보인다. 본 포스팅을 본격적으로 시작하기에 앞서 함께..

안녕하세요 전 세계 개발자가 열광하는 애플의 WWDC 2020를 통해 맥OS의 새로운 버전이 발표되었습니다. 이번 맥의 이름은 Big Sur(빅서) 입니다. 예상과 달리 macOS 10.16 버전이 아닌 macOS 11로 변경 되었습니다. 전체적인 디자인이 iOS/iPadOS와 비슷하게 변경되었으며, 사파리 브라우저 성능 개선과 자체 개인정보/보안이 강화되었다고 합니다. 눈에 띄게 확 달라진 기능은 없지만, 디자인이 거의 새롭게 개편되었습니다. 아마 아이폰이나 아이패드를 사용하고 있다면 비슷하게 바뀌었다는 느낌을 받을 수 있을텐데요, 앞으로 출시할 맥은 ARM 기반의 애플 자체 칩셋을 탑재할 것이라고 발표했기 때문에, 어느정도 통일성을 유지하기 위함이라고 볼 수 있을 것 같습니다. 상세한 변경 사항은 다..

안녕하세요! 이번 포스팅에서는 이후 Vue.js 3 버전에서 추가될 Composition API에 대해 알아보도록 하겠습니다. 지금의 Vue.js는 2.6.11 버전이며 3버전을 향해가고 있습니다. 컴포지션 API(Composition API)가 등장한다는 소식에 많은 관심을 받았었는데요, 어떤 내용인지 한 번 알아봅시다. 1. 개발환경 준비하기 [사전 요구 사항] - Node.js (with NPM) - Vue CLI 지금의 Vue.js는 2.x 버전에 머물러 있기 때문에 컴포지션 API를 사용할 수 없습니다. 하지만, 플러그인을 통해 Vue.js 3에 추가될 컴포지션 API를 사용할 수 있습니다. https://github.com/vuejs/composition-api vuejs/composition..

이번 글에서는 자바스크립트의 self 에 대해 알아보려고 한다. this는 많이 접해보았을텐데 self 는 다소 생소할 수 있다. 이번 글을 통해 self가 무엇인지 한 번 알아보도록 하자. 1. self란 무엇인가? w3c의 문서를 확인해보면, self는 읽기 전용 속성이며 WindowProxy로서의 window 자신을 반환한다고 한다. 꽤 난해한 설명인데 WindowProxy는 또 무엇인지 궁금해 할 수 있다. WindowProxy는 브라우징 컨텍스트와 관련되어있는 주제이므로추후 다른 글에서 자세히 알아보도록 하고, 지금은 단순히 전역 객체인 window 객체 자체를 반환한다고 이해하면 된다. self는 결국 전역 객체인 window를 반환하는 속성이다. self가 this와 같은 키워드라고 오해할 ..

안녕하세요 이번 포스팅에서는 드디어 맥북프로 개봉기를 작성하려고 합니다~ 기존에 사용하던 노트북은 거의 4년 전 쯤 구매한 Acer의 노트북을 사용중이었습니다. i5-7500u, 8GB 램, 250GB SSD의 스펙이었으며 당시 75만원 가량에 구매했습니다. (현재 구매한 맥북과 큰 스펙 차이가 없지만 가격은 3배 더 주고 샀습니다) 자 그럼 간단한 개봉기를 시작해보도록 하겠습니다. 총알을 장전하고... 바로 구매를 했습니다. 2019년형 맥북 프로 고급형 모델에 16GB 램으로 업그레이드를 진행했습니다. + 영문 키보드 고급형에 램 업그레이드를 진행하니 280정도 나오더군요;; 바로 학생할인 박아서 264만원에 결제했습니다. 사실 2018년형이랑 큰 성능 차이도 없고, 외형도 동일해서 고민을 많이 했습..

안녕하세요 이번 포스팅에서는 매직 키보드 2세대 개봉기를 작성할까 합니다! 아이패드 키보드를 알아보던 중 곧 도착할 맥북 프로도 생각하니 매직키보드가 제일 나을 것 같아서 구매를 하게 됬습니다! 1세대는 건전지를 교체해줘야 했는데 2세대는 충전식으로 바뀌게 되면서 많은 유저들이 2세대로 갈아탔다고 합니다. 저는 선택권 없이 2세대로 사버렸지만 1세대가 있었어도 2세대를 샀을거에요 (??) 박스 정면샷입니다. 누가봐도 키보드가 들어있네요 매직키보드는 구매한지 3일도 안지나서 매우 따끈따끈합니다. 2019년 7월에 제조되었네요 박스 내부를 옆으로 밀면 스윽 하고 열립니다 저는 한글 각인이 없는 영문 버전으로 구매했습니다. 전체 구성품은 위와 같습니다. 키보드 본체 라이트닝 케이블 설명서 및 보증서 그냥 찍었..

안녕하세요! 이번 포스팅에서는 애플 펜슬 1세대 개봉기를 작성할까 합니다~ 아이패드 6세대 사용할땐 펜슬을 구매할 마음이 없었으나 미니5를 데리고 온 후 마음이 바뀌게 되었네요.. 간단한 개봉기를 작성해보도록 하겠습니다! 애플 펜슬의 박스입니다. 증말 깔끔하네요 박스 뒷면. 아이패드 프로, 아이패드 6세대 지원이라고 적혀있으나, 이번에 새로 출시한 아이패드 에어와 미니도 지원합니다. 스스슥 박스를 열어보면 안봐도 뻔할 설명서 및 보증서가 있을테고 그 아래에는 펜슬이 있을겁니다. 짠 매끈한 애플 펜슬이 보이네요 박스에서 처음으로 저를 반겨준 친구는 설명서와 보증서 그리고 변환잭, 여분의 펜촉이 하나 들어있습니다 애플펜슬의 펜촉은 소모품입니다 오래 쓰다보면 끝 부분이 닳아서 인식이 안되거나 오작동하는 경우가..