MJ Kim

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

Observer 패턴 알아보기 (hooks와 observables)

현 회사의 메인 프로젝트가 Angular로 개발되어 있다보니 자연스럽게 RxJS를 접하게 되었다. 그러나 Observable이 어떻게 그 객체의 변화를 감지하는지 모른채 사용했다. 그래서 조금이나마 이해하기 위해 Observer 패턴에 대해 찾아봤다. GoF 디자인 패턴이란? 간략하게 ‘패턴’이란 무엇인지 알아보자. 개발자라면 이게 무엇인지는 몰라도 한 …

2021년 회고

회고를 공개적으로 쓰는 건 처음이라 많이 어색하다. 항상 해야지 해야지 하다가 지금까지 미루어왔다. 아직 문체랑 형식은 정하지 못해서 읽을 때 통일감이 없을 수 있는데, 아마 다른 글보다는 프리하게 하지 않을까 싶다 :) 올해 한 일은? 실력은 크게 늘지 않은 채, 2021년이 지나간 것 같아 조급함이 있었다. 그래도 정리해보니 꽤 많은 일을 한 것 같아…

OTP 동작원리

피드백은 언제나 환영합니다! 스마트폰이 나오기 전, 어느 사이트에 가입할 때 비밀번호를 까먹을 것을 대비하여 ‘초등학교 때 가장 기억에 남는 선생님 성함은?’, ‘어렸을 적 키웠던 반려동물 이름은?’ 등 유저가 여러 개의 질문 중 하나를 선택하고 답변을 저장했다. 하지만 나중에 내가 어떤 질문을 골랐는지 조차 기억이 나지 않는 참사가 일어난다. 이런 참사…

자바스크립트 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) 픽셀 기반 수학적 연산 기반 사진, 그림 아이콘, 로고 다…