윤민상 블로그

배경 최근에 서버와 프론트의 공통 타입을 관리하면 좋을것같다는 얘기를 들었다. 예전부터 이런 생각을 했지만 서버와 프론트의 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(); 위 코드의 문..

배경 사실 이전에도 글을 올렸었다. 그런데 많이 부족한 내용이였고 버그도 많이 있었다. 이번에 기회가 있어서 새롭게 간단한 프로젝트를 만들었는데 저번보다 훨씬 괜찮게 만들었다고 생각해서 다시한번 글을 올리게 되었다. 그리고 황준일님의 블로그를 참조했다. 리액트 동작 살펴보기 먼저 spa 라이브러리 중 가장 유명한 리액트를 생각해보자. 훅스는 비교적 만들기가 더 어렵다. 기본 useState, useEffect의 경우는 클로저를 이용해 간단하게 만들수 있지만(쉽지는 않다) 프로젝트 전체에 적용하는데는 더 많은 시간과 비용이 필요하다. 그래서 일단은 추상 클래스를 만들것이다. 리액트에서는 setState로 state를 변경하고 render, componentDidMount, componentDidUpdate..

배경 바닐라 자바스크립트 또는 타입스크립트로 라이브리리, 프레임 워크없이 꽤나 많은 프로젝트를 했다. 그리고 리액트와 비교했을 때 여러가지 어려운 점이 있었지만 jsx를 사용하지 못하는 것도 조금 아쉬웠다. 그런데 리액트없이 바벨 플러그인 하나를 설치하면 jsx를 사용할 수 있다는 것을 알게 되었다. 그래서 한번 적용해보려고 한다.(사실 리액트 없이 jsx 세팅하는 것 보다 그냥 만드는 게 편하다) 웹팩 설정 나는 바벨을 웹팩에서 같이 설정하는 것을 선호한다. 물론 나눠도 상관없다. yarn add -D @babel/plugin-transform-react-jsx로 플러그인을 설치하고 바벨 플러그인에 @babel/plugin-transform-react-jsx 를 넣어주면 된다. 바벨을 따로 설정하는 분..

최근에 과제 테스트를 했는데 클래스의 타입을 지정하기가 어려워서 그냥 any를 썼다가 지적을 받았다. 자주있는 일은 아니지만 가끔 생성자 함수 또는 클래스(클래스는 생성자 함수의 syntax sugar)의 타입을 지정해줘야 할 일이 있다. 생각해보면 함수앞에 new만 적어주면 된다... 왜 나는 몰랐을까 이걸.. 그럴때는 아래와 같이 사용하자 interface ClassContructor { new (target: HTMLElement, props?: TState): void; }

필수 블로그 TOC 커스터마이징하기 : 지금은 그대로 코드를 배껴서 쓰고 있는데 지금 스킨은 spa도 아니고 카테고리가 많으면 css에 문제가 있음(티스토리 문제) 내가 원하는 스킨을 선택하고 toc 만들기 자바스크립트 : 기본기 꾸준히 공부. 남에게 강의할 수 있을 정도로, 어느정도 숙달이 됬으면 한달에 한번이라도 반복해서 공부. 시간 여유가 된다면 자바스크립트 좀 어려운 책 한권 보기 타입스크립트 : 문서, 책 등을 보고 여러가지 경우(enum, type, interface 등등)에 유연하게 적용할 수 있는 능력까지 기르기 객체지향 : 지금 보고 있는 객체지향 읽고 블로그에 정리 및 필요한 경우 코드로 구현 운영체제 : 운영체제와 정보기술의 원리 최소 3회독. 정리. 실무에 어떤식으로 적용할 수 있을..

자바스크립트는 프로토타입 기반의 객체지향 언어다. 자바와는 다르게 클래스 기반이 아니다. 그런데 es6에서 클래스가 나오고 프로토타입의 동작원리를 잘 모르는 사람이 많아진 것 같다.(내 얘긴가??) 자바스크립트를 조금 깊게 물어보면 프로토타입과 실행 컨텍스트는 꼭 나오는 면접 질문중에 하나이기도 하다. 이 글을 보고 어디가서 '저 프로토타입 설명할 수 있어요' 라고 말하면 정말 좋겠다. 프로토타입이 뭔데?? 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. - 위키백과 이게 무슨말이지?? 어려운 말은 아니지만 프로토타입을 대강 알고있는 사람들도 위의 설명을 보고 프로토타입을 떠올리기는 쉽지 않다. 코딩에 대한 얘기는 아니지만 어느정도는 배경지식을 알 필요가 있다. 정말..

배경 과제가 날라왔는데 구글 이메일로 깃허브 초대가 왔다. 나는 네이버 이메일로 깃허브를 사용하는데... 이메일을 내부적으로 바꿔볼까 했는데 예전에 깃허브 공부용으로 만들어둔 구글 계정도 존재했다. 그래서 여러 계정 사용하는 걸 이참에 공부해야겠다고 생각했다. ssh 키 생성 먼저 ssh 키를 만들어야한다. 다음 코드로 만들자. 저장 위치도 물어보는데 C:\Users\User\.ssh 이 경로에 아마 기본적으로 저장이 될 것이다. 비밀번호도 물어보는데 나는 그냥 엔터를 눌렀다. 참고로 키 생성하는 명령어도 조금씩 다른데 나는 잘 몰라서 한 블로그를 참고했다. 나중에 궁금해지거나 깃을 공부할 때 내용을 채워 넣겠다. ssh-keygen -t rsa -b 4096 -C "your@email.com" ssh ..