전체 글

개요 이번 글에서는 JavaScript 언어의 핵심 개념 중 하나인 스코프(Scope)에 대해 알아본다. 스코프(Scope) 란? 오늘날 대부분의 프로그래밍 언어는 변수를 선언하여 값을 저장하고 필요한 경우 참조할 수도 있다. 이처럼 변수는 메모리 상에 할당된 공간을 나타내는 추상적인 개념이자 프로그래밍 언어가 제공하는 핵심 기능 중 하나이다. 이렇게 선언된 변수는 메모리 상에 할당되어 있지만, 일반적으로 프로그래밍 언어를 통해 코드를 작성할 때에는 변수가 어느 메모리 위치에 존재하는지 확인이 필요한 경우는 매우 드물다. 왜냐하면 메모리 공간을 추상화한 것이 변수이고, 우리는 이를 제대로 식별할 수 있기만 하면 되기 때문이다. 보다 추상화 수준이 올라간 "프로그래밍 언어" 수준에서 생각해 보자. 프로그램..

출시 기획했던 기능들이 모두 개발되었고, 발견했던 버그들이 점차 수정되어 끝이 보이게 되었다. 솔직히 길어도 3개월이면 끝낼 수 있을거라고 생각했는데 아주 잘못된 생각임을 깨달았다. 새로 시도해보는 것들이 많았기에 삽질도 엄청 많이 했었고, 생각보다 구현하는데 시간이 오래 걸렸다. 2022년도 11월에 프로젝트를 시작했는데 2023년 5월 말에 마무리가 되었으니 반년 가까운 시간동안 고생했다. 말이 길어졌는데, 결국 시간과 노력을 투자한 결과물이 완성되었기에 출시 과정만이 남았다. Google Play Store Google 개발자 계정을 만든 후 Play Console 에 앱을 등록했다. 현재는 출시 준비이지만 이전에는 비공개 테스트만 진행하여 필자 본인과 지인을 통해 테스트를 진행했었다. 스토어에 보..

기본 환경 React Native 기반 서비스를 구현하기 위해 공식 문서를 참고하여 환경을 구성했다. 개인적으로 Expo 사용을 지양하는 편이라 기본 React Native 기준으로 프로젝트를 구성했다. New Architecture 처음으로 진행했던 작업은 React Native 네이티브 애플리케이션의 New Architecture(Fabric)를 활성화 시키는 것이었다. React Native 팀에서 상당한 공을 들여 새로운 아키텍처 기반으로 동작하는 React Native 버전을 공개했고, 앞으로 React Native 는 해당 아키텍처 기반으로 동작하도록 방향이 바뀔 조짐이 보이기에 한 번 사용해보고자 했다. 회사 팀 내에서 관련 내용에 대해 간략히 이야기 했기도 했고, 관심이 있었기에 새로운 아..

들어가면서 (Apple AppStore) https://apps.apple.com/kr/app/up-grow-yourself/id6448998790 ‎Up - 나를 키우다 ‎모두의 성장을 위해, 업(Up)! Up 은 여러분들의 할 일, 목표, 습관으로 만들고 싶은 것 등을 기록하고 이를 꾸준히 수행할 수 있도록 동기부여에 도움을 주는 서비스예요. 업(Up) 챌린지에 도전하 apps.apple.com (Google Play Store) https://play.google.com/store/apps/details?id=dev.geundung.up Up - 나를 키우다 - Google Play 앱 모두의 성장을 위해 play.google.com (Web Version) https://up.geundung.de..

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

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

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

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

안녕하세요, 이번 포스트에서는 컴포지션 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..