전체 글

개요 자바스크립트에서 중요한 개념 중 하나인 클로저(Closure)에 대해 알아본다. 들어가기에 앞서 자바스크립트를 배우며 클로저라는 것에 대해 자주 들어보았을 것이다. 다만 정확히 이해하고, 설명하기는 다소 어려운 개념 중 하나이다. 우리가 작성한 코드에도 이미 클로저가 녹아들어가 있고, 자바스크립트의 모든 곳에 존재한다. 우리가 모르는 사이에 클로저를 접하고 있고, 이는 곧 클로저는 새롭게 배워야 하는 특별한 문법이나 패턴이 아니라는 것이다. 이전 글에서 스코프란 선언된 대상(변수, 함수 등)을 찾기 위한 규칙이라고 설명했다. 클로저를 이해하기 위해서는 렉시컬 스코프에 대해 이해하고 있어야 하며 스코프의 동작 체계 즉, 규칙은 클로저를 이해하는 데 있어 필수적이다. 이번 글에서는 이 클로저에 대해 알..

개요 지난번에 알아본 스코프(Scope)에 이어 자바스크립트의 개념 중 하나인 호이스팅(Hoisting)에 대해 알아본다. 들어가기에 앞서 지난 글에서는 스코프(Scope)에 대해 알아보았고, 스코프 개념에 대해 어느 정도 익숙해졌을 것이라고 생각한다. 내용을 간략히 정리해 보자면, 자바스크립트는 렉시컬 스코프 동작 방식을 따르며 우리가 작성한 코드에서 변수를 어떻게 그리고 어디서 선언하고 사용하는가에 따라 렉싱(Lexing) 타임에 스코프가 결정된다는 것이다. 자바스크립트의 경우 변수의 선언문이 어디에 위치해 있는가에 따라 스코프에 변수가 추가되는 과정이 조금 달라지는데, 이번 글에서는 이 부분에 대해 알아보려고 한다. 호이스팅(Hoisting) 아래 예시 코드를 살펴보며 이야기해 보자. 아래 예제 코..

개요 이번 글에서는 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 로 구성된 값을 다루는데 ..