전체 글

웹 푸시 알림(Web Push Notification)

👉 시작하면서 웹 푸시 알림(Web Push Notification)이란, 말 그대로 브라우저 환경에서 푸시 알림을 받을 수 있는 기술을 의미한다. 푸시 알림이라고 하면 네이티브 앱의 전유물이라고 느낄 수 있지만, 웹 푸시 기술을 통해 웹에서도 푸시 알림 기능을 구현하고 사용할 수 있다. 브라우저에 구현되어있는 Push API와 자세한 스펙은 아래 문서에서 확인해볼 수 있다. MDN Web Docs W3 Spec 본 포스팅에서는 웹 푸시가 동작하는 메커니즘에 대해 조금 세부적으로 살펴보고, 직접 데모 코드를 살펴보며 웹 푸시에 대한 전반적인 이해를 할 수 있도록 진행할 예정이다. 분량을 조절하기 위해 모든 API 기능에 대해 설명하진 않으니 자세한 내용은 글 중간중간에 추가해둔 참조 링크(문서)를 참고하..

스택(Stack)

💡 정의 스택은 한쪽으로만 데이터를 넣고 뺄 수 있는 형태의 데이터 구조로, 후입 선출(Last In First Out, LIFO)이라는 특성을 지니고 있다. 차곡차곡 쌓여 있는 형태의 데이터 구조라고 보면 된다. 🌱 ADT 스택은 그림과 같이 한쪽으로만 데이터를 넣고(push), 뺄(pop) 수 있다. 스택은 일반적으로 자료를 넣고 빼는 것뿐만 아니라 가장 위에 있는 자료를 확인(peek)하거나, 스택이 비어(isEmpty)있는지 확인할 수 있다. 스택에 필요한 기능들이 어느 정도 나열되었는데, 추상 자료형을 간략하게 코드로 표현해보자. Stack { push(T); pop(); peek(); isEmpty(); } 어느 정도 정리되었으니 이를 C언어로 구현해보자. 👀 스택 살펴보기 스택을 구현할 수 ..

배열(Array)

💡 정의 배열은 요소(값 또는 변수)들이 연속적으로 저장되어있는 형태의 데이터 구조로, 인덱스 혹은 키로 요소를 참조할 수 있다. 🌱 ADT 배열은 요소(Element)를 가지며, 위 그림을 보면 요소들이 연속적으로 나란히 모여있는 모습을 볼 수 있다. 각 요소들은 위치를 가지고, 특정 요소에 접근하기 위해서는 인덱스(Index)를 통해 접근한다. 대부분의 프로그래밍 언어에서 배열 인덱스는 0부터 시작하며, 배열의 첫 번째 요소에 접근할 때에는 0번째 위치에 접근하는 형태가 된다. 또한, 앞서 확인한 그림은 1차원(선)적으로 데이터를 나열한 상태인데, 이를 중첩시켜 아래와 같이 더 높은 차원의 배열을 만들어 자료를 관리할 수도 있다. 배열의 경우 대부분의 프로그래밍 언어에서 기본적으로 지원하기 때문에 직..

C언어로 배우는 자료구조

👋 소개 컴퓨터 과학에서 빠질 수 없는 자료구조에 대해 소개하려고 한다. 개발을 하게 되면 다양한 형태의 데이터를 다루게 되는데 이를 효과적으로 처리하고, 관리하는 관점에서 자료구조는 상당히 중요하다고 볼 수 있다. 기본적인 개념을 짚어보고, C언어로 구현해보며 자료구조를 익혀나가도록 하자. 📖 목차 총 7가지 자료구조에 대해 알아볼 수 있도록 구성했다. 배열(Array) 스택(Stack) 큐(Queue) 연결 리스트(Linked list) 해시 테이블(Hash table) 그래프(Graph) 트리(Tree) 🔥 알고 있어야 하는 것 📦 자료형 (Data Type) 자료형이란, 컴퓨터 과학과 프로그래밍 언어에서 다루게 되는 데이터들을 구분하고 분류하기 위한 개념이다. 컴퓨터는 실제로 0, 1 로 구성된 ..

[Vue 3] Composition API와 템플릿 참조(refs)

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

[Vue 3] Composition API와 Vuex 사용하기

(본 포스팅은 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 앱 예제로 배우는 프로그레시브 웹 앱 출간!

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

[WWDC20] Safari Web Extension/사파리 웹 확장 살펴보기

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

[macOS] macOS 11 Big Sur 베타 쉽게 설치하기

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

[Vue 3] Composition API 살펴보기

안녕하세요! 이번 포스팅에서는 이후 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..