MJ Kim

안녕하세요, 공부한 것을 기록하고 공유하는 걸 좋아하는 프론트엔드 개발자 김민정입니다. 회고록, 일상 및 다른 관심사는 티스토리에 기록하고 있습니다.

Storybook에서 Emotion 설정하기

해당 글에서 사용된 packages 버전은 아래와 같습니다. package.json 만약 react와 storybook의 babel-loader가 상충되어 에러가 뜬다면, 혹은 그리고 를 삭제 후 재설치한다. 그 다음에도 에러가 뜬다면 로 가장 낮은 babel-loader 버전을 프로젝트에 설치한다. 해당 프로젝트는 8.1.0 버전으로 설치했다. Ca…

extends와 implements

자바스크립트에서 어떤 클래스를 상속받고 싶을 때는 하위 클래스에서 키워드를 통해 상속 받을 수 있다. 그리고 타입스크립트에서는 키워드를 통해서, interface와 class를 동시에 확장 가능한 것을 알고 있었다. 하지만 늘 그렇듯, 이 두 가지의 정확한 차이점은 알지 못했다. extends vs. implements extends 키워드는 cla…

정규표현식 알아보기

정규표현식(Regular Expression)은 일정한 패턴을 가진 문자열의 집할을 표현하기 위해 사용하는 형식 언어(Formal Language: 특정 법칙에 따라 적절하게 구성된 문자열들의 집합)다. 쉽게 말해, 내가 작성한 값이 어떠한 패턴을 준수하고 있는지를 알려준다. 주로 이메일, 비밀번호, 휴대폰번호 등의 패턴이 맞는지 확인할 때 사용한다. E…

이미지: 래스터와 벡터

프로젝트에 사용할 이미지를 고를 때, 항상 PNG를 먼저 찾는다. 아이콘이나 로고는 확대해도 깨지지 않는 SVG로 하지만 정확한 이유를 잘 몰라서 알아보았다. 래스터와 벡터 이미지의 종류는 크게 래스터와 벡터 두 가지로 나뉘며, 요약하면 아래의 표와 같다. 래스터(Raster) 벡터(Vector) 픽셀 기반 수학적 연산 기반 사진, 그림 아이콘, 로고 다…

Angular 라우터의 Guard와 Resolver

본 글은 feature/guard-init을 clone 받아 따라할 수 있으며, 완성된 코드는 feature/guard에서 확인 가능하다. Angular 라우터는 각 컴포넌트의 에 작성한다. 기본적인 라우팅 설정은 최상단 모듈인 에 위 코드처럼 path와 component를 작성하고, import하면 된다. 단, 하위 페이지 module에는 가 아닌 로 …

Angular에서 http 초기 세팅하기

프로젝트 초기에 api 설정 파일을 만들어두면 나중에 작업하기 편하다. Angular는 안에 존재하는 http 패키지를 사용하면 된다. 프로젝트 생성 http 작업을 하기 위해 에서 HttpClientModule을 import 해야 한다. src/app.module.ts ApiService 구축 api는 전역에서 사용하는 것이기 때문에 service로 …

VR, AR, XR, MR

VR(가상현실), AR(증강현실), XR(확장현실), MR(융합현실) 관련 북마크 모음 Developer Docs Web Babylon.js three.js A-Frame WebGL API WebXR Device API VR Oculus - For Developers AR Facebook - Spark AR Apple - ARKit Google - ARC…

배열, 유사 배열 객체 그리고 이터러블

배열(Array)이란 여러 개의 값을 순차적으로 나열한 자료구조이며, 안의 값을 요소(Element)라 한다. 단순히 나열된 구조로 보이는 배열이 자바스크립트에서는 다소 독특한 데이터 같다. 자바스크립트에는 배열이라는 타입이 존재하지 않으며, 배열의 타입을 찍어보면 객체(object)라 나온다. 하물며 배열의 형태가 아닌 일반 객체로도 반복문을 돌릴 수 …

Angular 파일 구조 소개

최근 Angular 대비 상대적으로 러닝커브가 낮고 사용하기 편한 React, Vue, Svelte 등이 나오면서 Angular의 사용률이 전체적으로 낮아지고 있는 추세다. (참고) 필자도 React만 사용해보다 처음으로 Angular를 사용해봤는데, 확실히 러닝커브가 높은 편이지만 그만큼 매력적인 면도 많다고 생각한다. 본 글에서는 Angular의 특징…

반응형 프로그래밍과 RxJS

대부분 어플리케이션에는 비동기 작업 처리가 필수다. 그리고 그 어플리케이션의 규모가 커지면서 많은 양의 데이터를 처리해야 하는데, 데이터를 가공하고 올바른 시점에 데이터를 반환하게 하기 위해 코드가 점점 더 복잡해질 수 있다. 이런 복잡한 데이터를 처리하기 위해 반응형 프로그래밍(Reactive Programming)이 등장하였다. 반응형 프로그래밍(Re…