티스토리

근둥이의 블로그

검색하기

블로그 홈

근둥이의 블로그

geundung.dev/m

새로운 것을 좋아하는 프론트엔드 개발자 ✨

구독자: 23

방명록 방문하기

주요 글 목록

Hot Module Replacement (aka. Hot Reload) 개요 Hot Module Replacement(HMR)의 기본적인 동작 메커니즘에 대해 살펴보고, 간단한 예제를 통해 살펴보려고 한다. 예제와 설명은 esbuild 번들러에서 HMR 기능을 구현하는 데모를 기반으로 한다. 해당 구현 사항은 아래 저장소에서 확인 가능하니 참고하길 바란다. https://github.com/leegeunhyeok/esbuild-hmr GitHub - leegeunhyeok/esbuild-hmr: PoC of Hot Module Replacement(HMR) for Esbuild PoC of Hot Module Replacement(HMR) for Esbuild. Contribute to leegeunhyeok/esbuild-hmr development by creating .. 공감수 3 댓글수 462 2023. 12. 12.
2023년도 회고 (feat. 이직 그리고 토스) 벌써 2023년의 마지막, 12월이다. 지금까지 공부를 하고, 일을 해오면서 개인 회고를 진행했던 적이 없었는데, 이제부터 연말에 한 번이라도 개인 회고를 진행할까 한다. 첫 직장에서부터 지금까지 단 한 번의 공백기 없이, 쉬지 않고 달려왔다. 이번 회고를 통해 지난날들을 돌이켜보고, 앞으로의 계획을 세우고자 한다. 본론으로 넘어가기 전에, 회고글은 필자 본인의 매우 주관적인 견해가 포함되어 있으니 감안하고 읽어주면 감사하겠다. 내용 관련해서 다른 생각을 갖고 있거나, 이야기를 해보고 싶다면 언제든지 메일로 연락 주길 바란다. 커리어의 시작 먼저, 필자에 대해 소개하자면 특성화 고졸 출신 개발자이다. 그리고 고등학생때에는 "도제학교"라는 정부 정책의 지원을 받아 고등학교 2학년 2학기부터 졸업까지 실제 .. 공감수 17 댓글수 425 2023. 12. 9.
DROP + BIIP MT3 EXTENDED 2048 키캡 리뷰 & 후기 커스텀 키보드를 살펴보던 중 DROP에서 이쁜 키캡을 발견하게 되어 구매하게 되었다. DROP은 처음 알게 된 해외 키보드 용품 쇼핑몰인데, 배송 대행지 없이 바로 직구가 가능하다. 이번에 구매한 키캡은 DROP + BIIP MT3 EXTENDED 2048이다. Kit: Alphas ($52) Kit: Modifiers ($52) Kit: Accent Modifiers ($52) 배송비를 포함하여 총 $186를 지불했다. + 관세 그리고 수수료로 약 22,000원 가량 추가로 지불했다. https://drop.com/buy/drop-biip-mt3-extended-custom-keycap-set?defaultSelectionIds=969821 Drop + biip MT3 Extended 2048 Cust.. 공감수 0 댓글수 676 2023. 11. 23.
esbuild 기반 React Native 번들러 개발기 개요 esbuild 기반의 React Native 번들러를 개발하게 된 계기와 개발을 진행하면서 겪었던 수많은 문제들 그리고 이들을 해결하기까지의 과정을 간략히 소개하려고 한다. 자체 개발한 번들러는 아래 링크에서 확인할 수 있고, 오픈소스로 모두 공개되어 있다. https://react-native-esbuild.vercel.app Getting Started | React Native Esbuild An extremely fast bundler + React Native react-native-esbuild.vercel.app 번들러를 개발하면서 느낀 점은 생각했던 것보다 넓고 깊은 지식을 요구한다는 점이다. 번들러가 동작하는 방식, 트랜스파일링과 최적화 과정, 번들 코드가 실행되는 런타임 그리고 플.. 공감수 15 댓글수 2,201 2023. 10. 31.
React Native Under The Hood - 개발(Development) 개요 이번 글에서는 React Native 애플리케이션을 개발할 때 접하고 있는 기능들이 어떻게 동작하는지 살펴보려고 한다. Logging 지난 번들러 글에서 살펴본 내용인데, 빌드 타임에 console 폴리필이 코드 최상단에 주입된다는 것을 기억하는가? 해당 폴리필은 React Native 애플리케이션의 로그 포맷 개선 그리고 네이티브로 메시지를 전달하기 위한 기반을 마련하는 폴리필이다. Native 먼저 React Native 애플리케이션 내에서 기록한 콘솔 로그가 어떻게 네이티브 로그에도 기록되는지 한 번 살펴보도록 하자. 폴리필을 확인해 보면 아래와 같이 nativeLoggingHook이 존재할 경우 콘솔 객체의 메소드를 재정의(Override)한다. 코드를 살펴보면 알 수 있지만, 메시지를 로그.. 공감수 4 댓글수 437 2023. 10. 9.
React Native Under The Hood - 브릿지(Bridge) 개요 지난 글에서 구현된 네이티브 모듈이 어떻게 등록되고 런타임에서 접근할 수 있게 되는지 살펴보았다. 네이티브 모듈의 메소드가 호출되면 브릿지를 거치게 된다는 부분까지 살펴보았는데, 지난 내용에 이어 어떻게 네이티브로 전달되고, 자바스크립트 런타임에서는 결과를 어떻게 전달받게 되는지 살펴보려고 한다. 브릿지(Bridge) React Native 개발자라면 브릿지(Bridge)에 대해 들어본 적이 있을 것이다. 브릿지는 자바스크립트 런타임과 네이티브 간의 상호작용을 담당하는 React Native의 핵심 기능 중 하나이다. 자바스크립트 런타임에서 네이티브 모듈에 접근하여 동작을 요청하거나, 네이티브에서 자바스크립트 콜백 함수를 호출하여 결과를 전달하는 역할을 수행하는 개념이 곧 브릿지이다. 브릿지는 내부.. 공감수 2 댓글수 359 2023. 10. 3.
React Native Under The Hood - 네이티브 모듈(Native Modules) 개요 지난 글에서는 코드가 번들링 되고 자바스크립트 엔진에서 실행되기까지 거치는 과정에 대해 살펴보았다. 이번 글에서는 React Native의 핵심 기능 중 하나인 네이티브 모듈이 어떻게 동작하는지 파헤쳐보자. Native Modules 네이티브 모듈이란, 네이티브(Kotlin, Java, Swift, Objective-C)에서 구현한 클래스 인스턴스를 자바스크립트 런타임에 노출시켜 실행시킬 수 있도록 하는 React Native의 핵심 기능이다. 이를 통해 네이티브와 상호작용 하여 자바스크립트만으로 할 수 없는 동작을 구현할 수 있게 된다. 새로운 아키텍처가 릴리즈된 이후, Native Modules는 이제 레거시(Legacy)가 되었다. 다만 아직 Deprecated 된 것은 아니고, 새로운 아키텍.. 공감수 1 댓글수 432 2023. 9. 18.
React Native Under The Hood - 런타임(Runtime) 개요 지난 글에서는 프로젝트 코드가 번들링 되는 과정에 대해 알아보았다. 이번 글에서는 만들어진 번들이 어떻게 실행되는지 살펴보도록 하겠다. Architecture React Native를 접해본 개발자라면 기본적인 아키텍처에 대해 여러 번 접한 적이 있을 것이다. 자바스크립트와 네이티브 간의 상호작용은 브릿지(Bridge)를 통해서 이루어진다는 것은 아주 오래전부터 이어져왔다. 하지만 브릿지에는 몇 가지 고질적인 성능 이슈가 있었는데 상호작용을 위해선 JSON으로 직렬화/역직렬화가 필요하고 모든 작업은 비동기적으로 처리된다는 점이다. 이러한 문제를 개선하기 위해서 React Native 팀에서는 새로운 아키텍처(New Architecture)에 대해 발표했고, 현재 릴리즈 된 상태이다. 새로운 아키텍처.. 공감수 3 댓글수 432 2023. 9. 14.
React Native Under The Hood - 번들러(Bundler) 개요 오늘날의 자바스크립트 생태계에서는 기능을 모듈로 분리하여 구현하고 실제 배포 시에는 번들링 과정을 거치게 된다. React Native는 기본적으로 Metro 번들러를 통해 번들링을 수행하는데, 이번 글에서는 React Native 프로젝트 코드가 어떻게 번들링 되는지 살펴보려고 한다. 번들링(Bundling) 번들링이란, 여러 모듈과 파일을 단일 파일로 병합하여 최적화하는 과정을 의미한다. 물론 번들을 조금 더 잘게 나눌 수도 있지만 목적은 여러 모듈과 파일을 묶는 것이다. 자바스크립트 번들러는 대부분 비슷한 과정을 거쳐 번들링을 수행하게 된다. 모듈을 탐색하고 코드를 변환한 후 마무리 작업을 거치게 되는데, React Native의 기본 번들러인 Metro 번들러도 동일한 작업들을 수행한다. 모.. 공감수 8 댓글수 458 2023. 9. 13.
React Native Under The Hood 새로운 시리즈 게시글을 작성하기에 앞서 소개하고자 한다. 이번 시리즈의 제목은 React Native Under The Hood 이다. React Native는 보다 쉽게 여러가지 플랫폼의 애플리케이션을 만들 수 있도록 도와준다. 그만큼 내부에 숨겨져 있는 것들이 아주 많다. 우리의 코드가 어떤 과정을 거쳐 빌드되고, 빌드된 코드는 어떻게 실행되며, 자바스크립트 런타임과 네이티브간의 상호작용 그리고 개발 모드에서 사용하는 기능들이 어떻게 동작하는지 등 이번 시리즈를 통해 React Native의 내부를 조금이나마 들여다볼 수 있도록 소개하고자 한다. 내부를 들여다보는 만큼 복잡하고 어려울 수 있지만, 글을 읽는 동안 분명 흥미로울 것이다. 참고로 React Native Under The Hood 시리즈 .. 공감수 6 댓글수 447 2023. 9. 13.
클로저(Closure) 개요 자바스크립트에서 중요한 개념 중 하나인 클로저(Closure)에 대해 알아본다. 들어가기에 앞서 자바스크립트를 배우며 클로저라는 것에 대해 자주 들어보았을 것이다. 다만 정확히 이해하고, 설명하기는 다소 어려운 개념 중 하나이다. 우리가 작성한 코드에도 이미 클로저가 녹아들어가 있고, 자바스크립트의 모든 곳에 존재한다. 우리가 모르는 사이에 클로저를 접하고 있고, 이는 곧 클로저는 새롭게 배워야 하는 특별한 문법이나 패턴이 아니라는 것이다. 이전 글에서 스코프란 선언된 대상(변수, 함수 등)을 찾기 위한 규칙이라고 설명했다. 클로저를 이해하기 위해서는 렉시컬 스코프에 대해 이해하고 있어야 하며 스코프의 동작 체계 즉, 규칙은 클로저를 이해하는 데 있어 필수적이다. 이번 글에서는 이 클로저에 대해 알.. 공감수 1 댓글수 452 2023. 9. 11.
호이스팅(Hoisting) 개요 지난번에 알아본 스코프(Scope)에 이어 자바스크립트의 개념 중 하나인 호이스팅(Hoisting)에 대해 알아본다. 들어가기에 앞서 지난 글에서는 스코프(Scope)에 대해 알아보았고, 스코프 개념에 대해 어느 정도 익숙해졌을 것이라고 생각한다. 내용을 간략히 정리해 보자면, 자바스크립트는 렉시컬 스코프 동작 방식을 따르며 우리가 작성한 코드에서 변수를 어떻게 그리고 어디서 선언하고 사용하는가에 따라 렉싱(Lexing) 타임에 스코프가 결정된다는 것이다. 자바스크립트의 경우 변수의 선언문이 어디에 위치해 있는가에 따라 스코프에 변수가 추가되는 과정이 조금 달라지는데, 이번 글에서는 이 부분에 대해 알아보려고 한다. 호이스팅(Hoisting) 아래 예시 코드를 살펴보며 이야기해 보자. 아래 예제 코.. 공감수 0 댓글수 458 2023. 9. 8.
스코프(Scope) 개요 이번 글에서는 JavaScript 언어의 핵심 개념 중 하나인 스코프(Scope)에 대해 알아본다. 스코프(Scope) 란? 오늘날 대부분의 프로그래밍 언어는 변수를 선언하여 값을 저장하고 필요한 경우 참조할 수도 있다. 이처럼 변수는 메모리 상에 할당된 공간을 나타내는 추상적인 개념이자 프로그래밍 언어가 제공하는 핵심 기능 중 하나이다. 이렇게 선언된 변수는 메모리 상에 할당되어 있지만, 일반적으로 프로그래밍 언어를 통해 코드를 작성할 때에는 변수가 어느 메모리 위치에 존재하는지 확인이 필요한 경우는 매우 드물다. 왜냐하면 메모리 공간을 추상화한 것이 변수이고, 우리는 이를 제대로 식별할 수 있기만 하면 되기 때문이다. 보다 추상화 수준이 올라간 "프로그래밍 언어" 수준에서 생각해 보자. 프로그램.. 공감수 0 댓글수 445 2023. 9. 8.
Up 개발기 그리고 회고 - 3 출시 기획했던 기능들이 모두 개발되었고, 발견했던 버그들이 점차 수정되어 끝이 보이게 되었다. 솔직히 길어도 3개월이면 끝낼 수 있을거라고 생각했는데 아주 잘못된 생각임을 깨달았다. 새로 시도해보는 것들이 많았기에 삽질도 엄청 많이 했었고, 생각보다 구현하는데 시간이 오래 걸렸다. 2022년도 11월에 프로젝트를 시작했는데 2023년 5월 말에 마무리가 되었으니 반년 가까운 시간동안 고생했다. 말이 길어졌는데, 결국 시간과 노력을 투자한 결과물이 완성되었기에 출시 과정만이 남았다. Google Play Store Google 개발자 계정을 만든 후 Play Console 에 앱을 등록했다. 현재는 출시 준비이지만 이전에는 비공개 테스트만 진행하여 필자 본인과 지인을 통해 테스트를 진행했었다. 스토어에 보.. 공감수 2 댓글수 443 2023. 5. 31.
Up 개발기 그리고 회고 - 2 기본 환경 React Native 기반 서비스를 구현하기 위해 공식 문서를 참고하여 환경을 구성했다. 개인적으로 Expo 사용을 지양하는 편이라 기본 React Native 기준으로 프로젝트를 구성했다. New Architecture 처음으로 진행했던 작업은 React Native 네이티브 애플리케이션의 New Architecture(Fabric)를 활성화 시키는 것이었다. React Native 팀에서 상당한 공을 들여 새로운 아키텍처 기반으로 동작하는 React Native 버전을 공개했고, 앞으로 React Native 는 해당 아키텍처 기반으로 동작하도록 방향이 바뀔 조짐이 보이기에 한 번 사용해보고자 했다. 회사 팀 내에서 관련 내용에 대해 간략히 이야기 했기도 했고, 관심이 있었기에 새로운 아.. 공감수 0 댓글수 451 2023. 5. 31.
Up 개발기 그리고 회고 - 1 들어가면서 (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.. 공감수 0 댓글수 441 2023. 5. 31.
웹 푸시 알림(Web Push Notification) 👉 시작하면서 웹 푸시 알림(Web Push Notification)이란, 말 그대로 브라우저 환경에서 푸시 알림을 받을 수 있는 기술을 의미한다. 푸시 알림이라고 하면 네이티브 앱의 전유물이라고 느낄 수 있지만, 웹 푸시 기술을 통해 웹에서도 푸시 알림 기능을 구현하고 사용할 수 있다. 브라우저에 구현되어있는 Push API와 자세한 스펙은 아래 문서에서 확인해볼 수 있다. MDN Web Docs W3 Spec 본 포스팅에서는 웹 푸시가 동작하는 메커니즘에 대해 조금 세부적으로 살펴보고, 직접 데모 코드를 살펴보며 웹 푸시에 대한 전반적인 이해를 할 수 있도록 진행할 예정이다. 분량을 조절하기 위해 모든 API 기능에 대해 설명하진 않으니 자세한 내용은 글 중간중간에 추가해둔 참조 링크(문서)를 참고하.. 공감수 11 댓글수 2,757 2022. 6. 13.
스택(Stack) 정의 스택은 한쪽으로만 데이터를 넣고 뺄 수 있는 형태의 데이터 구조로, 후입 선출(Last In First Out, LIFO)이라는 특성을 지니고 있다. 차곡차곡 쌓여 있는 형태의 데이터 구조라고 보면 된다. ADT 스택은 그림과 같이 한쪽으로만 데이터를 넣고(push), 뺄(pop) 수 있다. 스택은 일반적으로 자료를 넣고 빼는 것뿐만 아니라 가장 위에 있는 자료를 확인(peek)하거나, 스택이 비어(isEmpty)있는지 확인할 수 있다. 스택에 필요한 기능들이 어느 정도 나열되었는데, 추상 자료형을 간략하게 코드로 표현해보자. Stack { push(T); pop(); peek(); isEmpty(); } 어느 정도 정리되었으니 이를 C언어로 구현해보자. 스택 구현하기 스택을 구현할 수 있는 방법은.. 공감수 12 댓글수 424 2022. 5. 26.
배열(Array) 정의 배열은 요소(값 또는 변수)들이 연속적으로 저장되어있는 형태의 데이터 구조로, 인덱스 혹은 키로 요소를 참조할 수 있다. ADT 배열은 요소(Element)를 가지며, 위 그림을 보면 요소들이 연속적으로 나란히 모여있는 모습을 볼 수 있다. 각 요소들은 위치를 가지고, 특정 요소에 접근하기 위해서는 인덱스(Index)를 통해 접근한다. 대부분의 프로그래밍 언어에서 배열 인덱스는 0부터 시작하며, 배열의 첫 번째 요소에 접근할 때에는 0번째 위치에 접근하는 형태가 된다. 또한, 앞서 확인한 그림은 1차원(선)적으로 데이터를 나열한 상태인데, 이를 중첩시켜 아래와 같이 더 높은 차원의 배열을 만들어 자료를 관리할 수도 있다. 배열의 경우 대부분의 프로그래밍 언어에서 기본적으로 지원하기 때문에 직접 구현.. 공감수 2 댓글수 446 2022. 5. 25.
C언어로 배우는 자료구조 소개 컴퓨터 과학에서 빠질 수 없는 자료구조에 대해 소개하려고 한다. 개발을 하게 되면 다양한 형태의 데이터를 다루게 되는데 이를 효과적으로 처리하고, 관리하는 관점에서 자료구조는 상당히 중요하다고 볼 수 있다. 기본적인 개념을 짚어보고, C언어로 구현해보며 자료구조를 익혀나가도록 하자. 목차 총 7가지 자료구조에 대해 알아볼 수 있도록 구성했다. 배열(Array) 스택(Stack) 큐(Queue) 연결 리스트(Linked list) 해시 테이블(Hash table) 그래프(Graph) 트리(Tree) 알고 있어야 하는 것 자료형 (Data Type) 자료형이란, 컴퓨터 과학과 프로그래밍 언어에서 다루게 되는 데이터들을 구분하고 분류하기 위한 개념이다. 컴퓨터는 실제로 0, 1 로 구성된 값을 다루는데 .. 공감수 12 댓글수 452 2022. 5. 24.
[Vue 3] Composition API와 템플릿 참조(refs) 안녕하세요, 이번 포스트에서는 컴포지션 API(Compisition API)에서 템플릿을 참조하는 방법에 대해 소개하려고 합니다. 사용 방법이 크게 달라지진 않았지만, 값으로써 참조하는 방법이 조금 바뀌게 되었습니다. 먼저, 기존의 템플릿 요소 참조 방법을 간략히 살펴보겠습니다. [ 기존 방식 ] 기존에는 참조하고자 하는 템플릿 요소에 ref="바인딩명" 형식으로 작성한 후, 마운트 이후 this 컨텍스트의 $refs를 통해 간단히 참조할 수 있었습니다. 다만, 컴포지션 API의 경우 this 컨텍스트가 존재하지 않으므로 조금 다른 방법으로 사용해야합니다. [ Composition API 방식 ] 참조하고자 하는 템플릿 요소에 ref 속성을 추가하는 방법은 기존과 동일합니다. 그러면 값은 어떠한 방법으.. 공감수 12 댓글수 535 2020. 10. 2.
[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.. 공감수 14 댓글수 469 2020. 9. 6.
[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 🎉 소개 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 첫 번째 저서, "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 한다. 본 블로그에도 프로그레시브 웹 앱에 대해 간략히 알아볼 수 있는 강좌를 작성했었는데, 프로그레시브 웹 앱에 대해 보다 더 다양하고 자세한 내용을 다룰 수 있는 내용을 정리하여 집필하게 되었다. 📖 책 보러 가기 책에 대한 자세한 내용은 아래 온라인 서점에서 확인해볼 수 있다. YES24 교보문고 알라딘 인터파크도서 프로그레시브 웹 앱의 전반적인 내용과 다양한 핵심 기능을 밑바닥부터 구현해보며 한 걸음 더 나아갈 수 있도록 구성되어있다. 오프라인 환경에서 웹 페이지를 사용하거나 게시물에 대한 백그라운드 동기화 작업 수행, 그리고 좋아요 알림 기.. 공감수 15 댓글수 475 2020. 7. 31.
[WWDC20] Safari Web Extension/사파리 웹 확장 살펴보기 이번 포스팅에서는 Safari 14 버전부터 사용 가능하게 될 웹 확장(Web Extension)에 대해 알아보고, 샘플 확장 프로그램을 개발해보고자 한다. 기존 사파리(14버전 미만) 브라우저에서도 확장 프로그램을 사용할 수 있었지만, 스위프트로 개발된 네이티브 앱을 별도로 설치하고 활성화하는 방식으로 사용한다는 불편함이 있었다. (접근성도 좋지 않았다) 하지만 곧 업데이트될 사파리 14 버전부터는 구글 크롬 브라우저와 같이 자바스크립트로 웹 확장을 개발할 수 있게 되는데, 웹 개발 모델을 따르고, 웹 확장을 지원하는 다른 브라우저와의 호환성도 유지하기 때문에 사파리 웹 확장을 개발한 후 다른 브라우저에서도 동일한 확장 기능을 사용할 수 있을 것으로 보인다. 본 포스팅을 본격적으로 시작하기에 앞서 함께.. 공감수 15 댓글수 444 2020. 6. 30.
[macOS] macOS 11 Big Sur 베타 쉽게 설치하기 안녕하세요 전 세계 개발자가 열광하는 애플의 WWDC 2020를 통해 맥OS의 새로운 버전이 발표되었습니다. 이번 맥의 이름은 Big Sur(빅서) 입니다. 예상과 달리 macOS 10.16 버전이 아닌 macOS 11로 변경 되었습니다. 전체적인 디자인이 iOS/iPadOS와 비슷하게 변경되었으며, 사파리 브라우저 성능 개선과 자체 개인정보/보안이 강화되었다고 합니다. 눈에 띄게 확 달라진 기능은 없지만, 디자인이 거의 새롭게 개편되었습니다. 아마 아이폰이나 아이패드를 사용하고 있다면 비슷하게 바뀌었다는 느낌을 받을 수 있을텐데요, 앞으로 출시할 맥은 ARM 기반의 애플 자체 칩셋을 탑재할 것이라고 발표했기 때문에, 어느정도 통일성을 유지하기 위함이라고 볼 수 있을 것 같습니다. 상세한 변경 사항은 다.. 공감수 55 댓글수 481 2020. 6. 25.
[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.. 공감수 27 댓글수 428 2020. 3. 4.
self란 무엇인가? 이번 글에서는 자바스크립트의 self 에 대해 알아보려고 한다. this는 많이 접해보았을텐데 self 는 다소 생소할 수 있다. 이번 글을 통해 self가 무엇인지 한 번 알아보도록 하자. 1. self란 무엇인가? w3c의 문서를 확인해보면, self는 읽기 전용 속성이며 WindowProxy로서의 window 자신을 반환한다고 한다. 꽤 난해한 설명인데 WindowProxy는 또 무엇인지 궁금해 할 수 있다. WindowProxy는 브라우징 컨텍스트와 관련되어있는 주제이므로추후 다른 글에서 자세히 알아보도록 하고, 지금은 단순히 전역 객체인 window 객체 자체를 반환한다고 이해하면 된다. self는 결국 전역 객체인 window를 반환하는 속성이다. self가 this와 같은 키워드라고 오해할 .. 공감수 14 댓글수 450 2020. 2. 24.
[Apple] MacBook Pro 13" 2019년형 개봉기 안녕하세요 이번 포스팅에서는 드디어 맥북프로 개봉기를 작성하려고 합니다~ 기존에 사용하던 노트북은 거의 4년 전 쯤 구매한 Acer의 노트북을 사용중이었습니다. i5-7500u, 8GB 램, 250GB SSD의 스펙이었으며 당시 75만원 가량에 구매했습니다. (현재 구매한 맥북과 큰 스펙 차이가 없지만 가격은 3배 더 주고 샀습니다) 자 그럼 간단한 개봉기를 시작해보도록 하겠습니다. 총알을 장전하고... 바로 구매를 했습니다. 2019년형 맥북 프로 고급형 모델에 16GB 램으로 업그레이드를 진행했습니다. + 영문 키보드 고급형에 램 업그레이드를 진행하니 280정도 나오더군요;; 바로 학생할인 박아서 264만원에 결제했습니다. 사실 2018년형이랑 큰 성능 차이도 없고, 외형도 동일해서 고민을 많이 했습.. 공감수 12 댓글수 5,426 2019. 10. 9.
[Apple] Magic Keyboard (2세대) 개봉기 안녕하세요 이번 포스팅에서는 매직 키보드 2세대 개봉기를 작성할까 합니다! 아이패드 키보드를 알아보던 중 곧 도착할 맥북 프로도 생각하니 매직키보드가 제일 나을 것 같아서 구매를 하게 됬습니다! 1세대는 건전지를 교체해줘야 했는데 2세대는 충전식으로 바뀌게 되면서 많은 유저들이 2세대로 갈아탔다고 합니다. 저는 선택권 없이 2세대로 사버렸지만 1세대가 있었어도 2세대를 샀을거에요 (??) 박스 정면샷입니다. 누가봐도 키보드가 들어있네요 매직키보드는 구매한지 3일도 안지나서 매우 따끈따끈합니다. 2019년 7월에 제조되었네요 박스 내부를 옆으로 밀면 스윽 하고 열립니다 저는 한글 각인이 없는 영문 버전으로 구매했습니다. 전체 구성품은 위와 같습니다. 키보드 본체 라이트닝 케이블 설명서 및 보증서 그냥 찍었.. 공감수 1 댓글수 448 2019. 8. 28.
[Apple] Apple Pencil (1세대) 개봉기 안녕하세요! 이번 포스팅에서는 애플 펜슬 1세대 개봉기를 작성할까 합니다~ 아이패드 6세대 사용할땐 펜슬을 구매할 마음이 없었으나 미니5를 데리고 온 후 마음이 바뀌게 되었네요.. 간단한 개봉기를 작성해보도록 하겠습니다! 애플 펜슬의 박스입니다. 증말 깔끔하네요 박스 뒷면. 아이패드 프로, 아이패드 6세대 지원이라고 적혀있으나, 이번에 새로 출시한 아이패드 에어와 미니도 지원합니다. 스스슥 박스를 열어보면 안봐도 뻔할 설명서 및 보증서가 있을테고 그 아래에는 펜슬이 있을겁니다. 짠 매끈한 애플 펜슬이 보이네요 박스에서 처음으로 저를 반겨준 친구는 설명서와 보증서 그리고 변환잭, 여분의 펜촉이 하나 들어있습니다 애플펜슬의 펜촉은 소모품입니다 오래 쓰다보면 끝 부분이 닳아서 인식이 안되거나 오작동하는 경우가.. 공감수 1 댓글수 481 2019. 8. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.