윤민상 블로그

배경 타사 개발자분으로부터 공부할 자료를 추천받았다. 그리고 그것들중에 하나가 코드스피츠 OOP 영상 강의다. OOP는 평소에도 관심이 있었고 직접 추천해준 자료이기 때문에 무슨일이 있어도 보겠다고 생각했으며 몇분지나지 않아 정말 좋은 강의라는 것을 깨달았다. 서론 강사분은 flow, routine이라는 용어로 강의를 시작했다. 그리고 이 얘기를 하기까지 꽤 많은 배경설명을 한다. 그만큼 이 개념이 중요하다는 것이다. 나는 flow, routine이라는 용어를 알고 있지만 명확히 설명하지 못했다. 심지어 영상을 한번 보고 지금 블로그 정리를 할 때도 영상을 돌려봤다. 강사분은 명확히 설명할 수 없으면 모르는 거라고 말한다. 예전부터 듣던말이고 내가 가장 부족한 분야다. cs수업은 아니지만 기저에 깔려있는..

svg를 string으로 불러오기 ~~.d.ts에 아래와 같이 string으로 불러오고 이미지 태그안에 src로 넣으면 svg를 사용할 수 있다. declare module '*.svg' { const value: string; export = value; // } 그런데 svg태그 자체가 필요한 경우가 있다. 예를 들어 fill을 한다던가... 그럴때는 조금 설정이 필요하다. svg 자체 태그를 불러오기 먼저 웹팩 간단한 웹팩 설정이 필요하다. yarn add -D @svgr/webpack { test: /\.svg$/, use: ['@svgr/webpack'], }, 그리고 d.ts를 아래와 같이 변경해야 한다. ~~.d.ts declare module '*.svg'; 마지막으로 불러올 때 다음과 같..

먼저 https://karabiner-elements.pqrs.org/ 에 들어가서 karabiner-elements를 설치하자 그리고 보안을 풀어야되는 옵션이 나오는데(설치하면 알아서 나온다) 그중 grabber가 자동으로 나오지 않는다. 그래서 karabiner_observer에 오른쪽 클릭을 해서 폴더를 열고 karabiner_grabber를 드래그앤드랍으로 넣어주면 된다. 한영 먼저 한영키부터 살펴보자. karabiner-elements를 실행하고 아래 그림과 같이 키를 설정해준다. To key에는 사용하지 않는 키를 넣은거라 f18이 아니라 f19, f20 등 모두 가능하다. 아래와 같이 시스템 환경설정 > 키보드 > 단축기 > 입력소스 > 이전 입력 소스 선택 에서 오른쪽 command키를 ..

책내용 1. 객체지향과 인지 능력 인간은 본능적으로 세상을 독립적이고 식별 가능한 객체의 집합으로 바라본다. 많은 사람들이 객체지향을 직관적이고 이해하기 쉬운 패러다임이라고 말하는 이유는 객체지향이 세상을 자율적이고 독립적인 객체들로 분해할 수 있는 인간의 기본적인 인지 능력에 기반을 두고 있기 때문이다. 세상을 더 작은 객체로 분해하는 것은 본질적으로 세상이 포함하고 있는 복잡성을 극복하기 위한 인간의 작은 몸부림이다. 인간은 좀 더 단순한 객체들로 주변을 분해함으로써 자신이 몸담고 있는 세상을 이해하려고 노력한다. 즉, 객체란 인간이 분명하게 인지하고 구별할 수 있는 물리적인 또는 개념적인 경계를 지닌 어떤 것이다. 객체지향 패러다임의 목적은 현실 세계를 모방하는 것이 아니라 현실 세계를 기반으로 새..

https://www.themoderncoder.com/add-git-branch-information-to-your-zsh-prompt/ https://gist.github.com/reinvanoyen/05bcfe95ca9cb5041a4eafd29309ff29 https://gist.github.com/doubleknd26/c4fcd2e65c3397947248878065b644ed vi ~/.zshrc export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/..

배경 예전부터 프로젝트를 구경하다보면 husky라는 폴더가 있었다. 그래서 이게 뭔지 왜 사용하는지 알아보려고 한다. husky란 husky는 git hook 사용을 도와주는 라이브러리다. 그럼 그전에 git hook이 뭔지부터 알아야한다. Git도 다른 버전 관리 시스템처럼 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 이 훅은 클라이언트 훅과 서버 훅으로 나눌 수 있다. 클라이언트 훅은 커밋이나 Merge 할 때 실행되고 서버 훅은 Push 할 때 서버에서 실행된다. 더 자세한 내용은 아래 링크를 참조 https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Hooks 즉 husky를 사용하면 git을 사용할 때 특정 스크립트를..

배경 최근에 서버와 프론트의 공통 타입을 관리하면 좋을것같다는 얘기를 들었다. 예전부터 이런 생각을 했지만 서버와 프론트의 pacakge.json을 합치면 너무 방대해질것같아서 적용하지는 않았었다. 생각해보기 타입스크립트와 프리티어, 린트정도를 전체 패키지에서 설치를 하고 서버와 클라이언트에서 각각의 패키지를 설치하면 괜찮을 것 같다. 즉흥에서 얘기했지만 괜찮은 방법이라고 생각한다. 나의 경우에 프리티어는 공통 타입으로 관리하고 린트와 타입스크립트는 설정이 다르다. 그러면 전체 패키지에서 중복되는 프리티어, 린트, 타입스크립트를 설치하고 프리티어만 패키지에서 관리하면 된다. 그리고 타입스크립트를 공통 타입을 위해 사용되기 때문에 기본이 되는 tsconfig를 설정해주고 프론트 서버에서도 tsconfig를..

배경 예전부터 의존성 주입에 대해서 알아보고 싶었는데 귀찮아서 미루고 있었다. 이번 기회에 좀 제대로 알아보려고 한다. 의존성 주입(Dependency Injection)이란 의존성 주입이란 하나의 객체가 다른 객체의 의존성을 제공하는 테크닉이다. 조금 감이 안올수도 있다. 코드로 예를 들어보자. class Animal { public hi() { console.log('hi'); } } class Player { private readonly animal: Animal; constructor() { this.animal = new Animal(); } public hi() { this.animal.hi(); } } const player = new Player(); player.hi(); 위 코드의 문..