전체보기

개요 오늘날의 자바스크립트 생태계에서는 기능을 모듈로 분리하여 구현하고 실제 배포 시에는 번들링 과정을 거치게 된다. React Native는 기본적으로 Metro 번들러를 통해 번들링을 수행하는데, 이번 글에서는 React Native 프로젝트 코드가 어떻게 번들링 되는지 살펴보려고 한다. 번들링(Bundling) 번들링이란, 여러 모듈과 파일을 단일 파일로 병합하여 최적화하는 과정을 의미한다. 물론 번들을 조금 더 잘게 나눌 수도 있지만 목적은 여러 모듈과 파일을 묶는 것이다. 자바스크립트 번들러는 대부분 비슷한 과정을 거쳐 번들링을 수행하게 된다. 모듈을 탐색하고 코드를 변환한 후 마무리 작업을 거치게 되는데, React Native의 기본 번들러인 Metro 번들러도 동일한 작업들을 수행한다. 모..

새로운 시리즈 게시글을 작성하기에 앞서 소개하고자 한다. 이번 시리즈의 제목은 React Native Under The Hood 이다. React Native는 보다 쉽게 여러가지 플랫폼의 애플리케이션을 만들 수 있도록 도와준다. 그만큼 내부에 숨겨져 있는 것들이 아주 많다. 우리의 코드가 어떤 과정을 거쳐 빌드되고, 빌드된 코드는 어떻게 실행되며, 자바스크립트 런타임과 네이티브간의 상호작용 그리고 개발 모드에서 사용하는 기능들이 어떻게 동작하는지 등 이번 시리즈를 통해 React Native의 내부를 조금이나마 들여다볼 수 있도록 소개하고자 한다. 내부를 들여다보는 만큼 복잡하고 어려울 수 있지만, 글을 읽는 동안 분명 흥미로울 것이다. 참고로 React Native Under The Hood 시리즈 ..

개요 자바스크립트에서 중요한 개념 중 하나인 클로저(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언어로 구현해보자. 스택 구현하기 스택을 구현할 수 있는 방법은..