MJ Kim

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

GitHubTistory

자바스크립트 Early return

개발 하다보면 조건문 사용이 잦은데, 이를 어떻게 작성해야 가독성이 좋고 불필요한 로직 실행을 줄일 수 있을까 생각하게 된다. switch문이나 삼항연산자는 어떤 값으로 분기처리 할 때 사용한다. 반면, 조건이 복잡한 경우 if문을 사용하지만 이를 중첩으로 사용할 경우 코드가 한 없이 복잡해진다. 제일 최악인 상황은 나중에 내가 짠 코드임에도 불구하고 다…

타입스크립트 접근제한자(public, protected, private)

자바스크립트에는 마땅히 Class 내부의 값을 은닉화를 할 수 있는 방법이 없었다. 다행히 타입스크립트에는 접근 제한자(Access modifier)인 , , 를 지원하며, 이를 통해 외부에서 특정 메서드나 프로퍼티에 접근 범위를 지정할 수 있다. public public은 어디에서나 접근할 수 있으며 생략 가능한 default 값이다. name을 선언해…

script 요소 알아보기

HTML의 요소는 보통 JavaScript를 불러오기 위해 사용된다. 그 외, WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용이 가능하다. 의 interface는 HTMLScriptElement이며 여러 프로퍼티들이 존재한다. src src 속성은 외부 스크립트의 URI를 적어준다. 프로젝트 내부의 스크립트라 상대주소일 수…

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…