본문 바로가기

개발/Node.js & Typescript18

React.js 둘러보기 약간의 기초지식이 있는 백엔드 개발자 입장에서, React.js를 처음 접하면서 느낀 점들을 정리해보고자 한다. React를 바라보는 지식수준(현재 내 상태) Javascript의 기본적인 문법 지식이 있음 node.js, express를 사용한 개발 경험이 있음 html, css를 사용한 간단한 프론트 구현 경험이 있음 React가 어떤 원리로 구동되는지, 어떤 컨셉인지는 전혀 모름 매우 유용했던 자료들 이고잉님의 생활코딩 React강의 리액트 공식 Docs velopert님의 누구든지 하는 리액트 이 글을 읽는다고 해서 리액트에 입문하는데 도움이 될 것 같지는 않다. 이 글은 위 자료들을 보면서 인상깊었거나 중요하다고 생각되는 부분들을 정리한 글이니 참고해주세요. 제 경우 이고잉님의 강의 위주로 진행.. 2020. 10. 12.
[Typescript] 유틸리티 타입 - Parameters, ReturnType, Required Parameters 함수 타입 T의 매개변수 타입을 튜플 타입으로 정의한다. declare function createCat(cat: {color: string, legs: number}): void type catParams = Parameters; // [{color: string, legs: number}] ReturnType 함수 T의 반환 타입으로 정의한다. Parameters와 대칭되는 형태라고 볼 수 있겠다. declare function createCat(): Cat type catResult = ReturnType; // Cat Required T의 모든 속성이 필수인 타입을 만든다. optional로 설정한 속성도 반드시 가지고 있어야 한다. interface User { name: s.. 2020. 8. 1.
[Typscript] 유틸리티 타입 - Pick, Omit Pick 일부의 속성만 가질 수 있을 때 사용한다는 점에서 Partial과 비슷하지만, 속성을 직접 선택한다는 점이 다르다. interface Post { title: string; author: string; content: string; isHidden: boolean; } // 게시글을 작성한다. const newPost = { title: 'hello world', author: 'effy', content: 'hello', isHidden: false, } // 제목과 내용만 바꿀 수 있도록 하고 싶다. function updateOnlyTitleAndContent(post: Post, payload: Pick) { return {...post, ...payload} } updateOnlyTit.. 2020. 7. 22.
[Typscript] 유틸리티 타입 - Partial, Readonly, Record Partial 일부의 속성만 가질 수 있을 때 사용한다. 예를 들어 게시글 인터페이스엔 제목, 글쓴이, 내용 등등이 있을 것이다. 게시글 수정시 항상 모든 필드를 수정하지는 않는다. 게시글에 포함된 프로퍼티 중 일부의 프로퍼티(하위 타입 집합)만 사용하고 싶을 때 사용할 수 있다. interface Post { title: string; author: string; content: string; isHidden: boolean; } // 게시글을 작성한다. const newPost = { title: 'hello world', author: 'effy', content: 'hello', isHidden: false, } // 수정하고 싶어졌다. 제목만 바꿀수도 있고, 내용만 바꿀수도 있고, 다 바꿀수도 .. 2020. 7. 21.
var vs let vs const var let const 스코프 함수 블록 블록 변수 재선언 O X X 재할당 O O X 할당하지 않고 선언만 하기 O O X 변수 선언 전 호출시 undefined ReferenceError ReferenceError 2020. 7. 19.
[Typescript] 제네릭(Generic)을 사용하는 이유 일단 나는 제네릭이라는 용어 자체를 몰랐다. 제너레이터랑 헷갈렸을 정도니까. 꺾쇠, 타입 키워드를 듣고도, 아. Array 말하는건가? 그거 그냥 string[]과 동일한 문법의 한 종류 아닌가? 생각했다. IDE에서 알려주는 정보 모달에서 라고 되어있는 것도 그냥 여기에 타입을 넣으세요~ 라는 의미인줄 알았는데... 제네릭을 진작 알았다면, 타입 정의의 새로운 세계가 열렸을텐데 참 아쉽다. 제네릭은 함수나 클래스에서 사용할 타입을 외부에서 유동적으로 지정해줄 수 있는 것을 말한다. 특정 타입을 사용할 것이지만, 그 타입을 유동적으로 지정할 수 있다. 예를들면 아래와 같이 사용할 수 있다. 리스폰스에 페이지네이션 정보와 함께 데이터 배열을 보내는 경우는 흔히 있다. 이때 totalItem, current.. 2020. 7. 10.
[Sequelize] there is no unique constraint matching given keys for referenced table 원인과 해결방법 기존에 MySQL+Sequelize를 사용하다가, PostgreSQL로 DB를 이전하게 되었다. dialect랑 접속정보만 바꿔주면 되는 간단한 작업이었는데, 아래와 같은 에러를 만나게 되었다. there is no unique constraint matching given keys for referenced table "rfqs" 멀쩡하게 잘 되던게 DB를 바꾸니까 에러가 났기 때문에 설정이라든지 문법의 문제겠거니 했는데.. 위 에러는 PK와 FK가 일치하지 않을 때 나는 에러다. 내 경우 한 테이블에 PK가 두개 지정되어 있었고, 해당 키를 FK로 갖는 다른 테이블은 두 PK중 하나만을 FK로 지정하고 있었다. 예를들어 (아무렇게나 쓴 수도코드다) Person { id: integer; email: .. 2020. 6. 23.
[Typescript] Jest 모킹시 빨간줄 뜨는 문제 (Property 'mock' does not exist on type) mocking시 모킹한 모듈이 몇번 호출되었는지 확인하는 테스트 코드를 짤 때, mock 부분에 빨간줄이 뜨면서 에러가 날 때가 있다. IDE에서 관련된 힌트를 주지도 않아서 한참 헤맸는데... 알고보니 TS Lint 문제였다. 해결방법은 간단하다. // @ts-ignore expect(mockedModule.mock.calls.length).toBe(0); 바로 윗줄에 // @ts-ignore를 추가해주면 된다. 2020. 6. 2.
package-lock.json의 역할과 커밋해야 하는 이유 npm install시 자동으로 생기는 package-lock.json이 대체 무슨 역할인지 알아보자. package.json은 이 프로젝트 패키지의 정보들을 담고 있다. 이름, 버전 등을 포함하고 있는데, 의존성 모듈 정보도 가지고 있다. { "name": "myApp", ... "dependencies": { "express": "^4.16.4", ... } } dependencies에는 이 패키지 실행에 필요한 다른 모듈들의 이름과 버전 정보가 명시되어 있다. 그래서 다른 사람이 내 코드를 다운받아 실행하더라도, npm install만 실행하면 내가 설치했던 의존 모듈들이 함께 설치된다. 하지만, 여기엔 문제가 몇가지 있다. 첫번째 문제는, 명시된 모듈이 다른 버전으로 설치될 수 있다는 것이다. d.. 2020. 4. 3.