그동안 NestJS로 개발을 하면서, class-validator와 같은 라이브러리를 사용하는 것은 매우 일상적인 일이었다. 별다른 고민 없이 데이터 유효성 검사를 자동으로 처리하는 데 class-validator를 사용해 왔지만, 실제로 내부에서 어떻게 작동하는지에 대한 깊은 이해 없이 그저 편리함에 의존해왔다. 하지만 이제는 그 원리를 제대로 이해하고, 더 창의적으로 Custom Decorator를 생성해서 활용해 보고자 한다. 이번 포스팅에서는 Reflect Metadata를 활용하여 런타임에도 타입 정보를 유지하고 검증하는 방법과 Custom Decorator를 만드는 법을 알아보겠다. Reflect Metadata란?TypeScript는 컴파일 시점에 타입 정보를 가지고 있지만, 컴파일 후 ..
메리 크리스마스 🎄 크리스마스인데도 포스팅을 하는 이유는 백엔드파트 리더님과 대화중에 JS 이벤트루프를 설명해보라고 하셨는데 어버버대다가 제대로 설명을 못해서 당황했었다.. 리더님은 면접을 보러 들어가면 주니어, 시니어 상관없이 JS 이벤트 루프에 대해서 설명해보라고 질문을 던진다고 하셨다. 그만큼 JS에서 가장 기본적이고 비동기 동작원리를 알려면 무조건 알아야하고 설명을 할 수 있어야 한다. 그래서..! 내일 출근하기전에 제대로 알고 가서 설명을 드리려 포스팅을 해본다. Event Loop 시작하기에 앞서 간단히 JS에 대해 알아보자. JavaScript는 싱글 스레드 프로그래밍 언어로서, 한 번에 하나의 작업만 처리할 수 있다. 싱글 스레드인 자바스크립트의 작업을 멀티 스레드로 돌려 작업을 동시에 처..
오늘은 5단원인 "클로저" 를 포스팅 할 것이다. 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나지만, 사실 이번에 처음 제대로 파본다... 실행 컨텍스트에 대한 사전지식이 없으면 분명 이해가 안 갈 것이다. 마침 2단원에서 실행컨텍스트를 다뤘으니 꼭! 꼭! 보고 오길 권장한다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅한 "데이터 타입" 에 이어서 다음 챕터인 "실행 컨텍스트"를 포스팅 할 것이다. https://ilikezzi.tistory.com/52 [Javascript] 데이터 타입_코어 자바스크립트 계획했던대로 자격증 취득도 다 ilikezzi.tistory.com 05. 클로저 클로저의 의미 및..
오늘은 4단원인 "콜백 함수" 를 포스팅 할 것이다. 중간에 "콜백 함수 내부에서의 this" 에 대해서 깊게 다루니 이전 포스팅인 "this" 에 대해서 필수적으로 알고 있어야 한다. https://ilikezzi.tistory.com/58 [Javascript] this_코어 자바스크립트 오늘은 3단원인 "this" 를 포스팅 할 것이다. 지난번 포스팅한 "실행 컨텍스트" 도 읽어보면 도움이 될 듯하다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅 ilikezzi.tistory.com 04. 콜백 함수 콜백 함수란? 콜백 함수는 쉽게 말해 함수 안에 함수다. 즉, 다른 함수의 인자로 전달되는 함수이다. 비동기 작업이 끝..
오늘은 3단원인 "this" 를 포스팅 할 것이다. 지난번 포스팅한 "실행 컨텍스트" 도 읽어보면 도움이 될 듯하다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅한 "데이터 타입" 에 이어서 다음 챕터인 "실행 컨텍스트"를 포스팅 할 것이다. https://ilikezzi.tistory.com/52 [Javascript] 데이터 타입_코어 자바스크립트 계획했던대로 자격증 취득도 다 ilikezzi.tistory.com this.... '이것' 이라는 단어 그 자체로의 뜻을 가지지만, 가끔씩 어디를 가르키는건지 헷갈렸는데 이제 그 헷갈리던 this에 대해서 제대로 잡아보자. 03. this 전역 공간에서의 this 브라우저 ..
오늘 할 내용은 코드로 바로 확인 해보자. 단순히 axios로 불러온 데이터를 파싱해서 쓰려고 했는데, 모든 depth의 데이터가 나오지 않았다. 예전에도 이런적이 한 번 있었는데 이번에 또 같은 케이스여서 포스팅을 해본다. 이렇게 사진처럼 comments: [Array] 라고 나오는데 나는 그 값을 필요로해서 보고싶었다. 자바스크립트에서 객체를 콘솔에 출력하면, 기본적으로 일부 깊이까지만 출력되고, 그 이상의 깊이는 [Array]나 [Object] 형태로 간략하게 표시되는 경우가 있다. 이때 console.dir() 을 쓰면 해결 가능하다. 자주 사용하는 console.log()와 console.dir()를 비교해 보면서 뭔지 알아보자. console.log()와 console.dir() - conso..
오늘은 배열에서 중복값을 제거하는 방법에 대해서 포스팅을 해보려한다. 위 코드는 간략하게 얘기하면 투표항목을 클릭하면 하위depth의 투표 항목까지 전부 불러오는 코드중 일부분이다. 아무튼 하위항목들을 찾아서 기존dto에 push하다가 console.log 창을보니 중복된 값도 같이 쌓이고 있었다. 하위 항목 찾을 때 기존항목 if문으로 비교 후 제거하거나, 정 안되면 for문으로 돌려서 비교후 제외시켜도 되지만 Array에서 바로 처리하는 방법이 있나 궁금해서 찾아보다가 "new Set()" 이라는 방법을 찾게 되었다. new Set() - Set 객체는 자바스크립트에서 유일한 값의 집합을 표현할 수 있다. - 배열의 중복 값을 제거하려면 Set을 이용하면 정말 쉽게 할 수 있다. 사용 방법은 다음과 ..
저번에 포스팅한 "데이터 타입" 에 이어서 다음 챕터인 "실행 컨텍스트"를 포스팅 할 것이다. https://ilikezzi.tistory.com/52 [Javascript] 데이터 타입_코어 자바스크립트 계획했던대로 자격증 취득도 다 해서, 8월부터는 알고리즘과 팀프로젝트에 전념할 계획이였다. 하지만 알고리즘 스터디를 하기전에 JS 기본기를 탄탄하게 다져두고 하는게 깊은 이해에 도움이 ilikezzi.tistory.com 위에 있는 저번 포스팅과 크게 이어지는 내용은 아니지만, 그래도 "데이터 타입"에 대한 기본적인 이해가 있어야 이번 포스팅을 쉽게 이해할 수 있을듯 싶다. 02. 실행 컨텍스트 실행 컨텍스트란? - 실행 컨텍스트(Execution Context) 실행할 코드에 제공할 환경 정보들을 ..
계획했던대로 자격증 취득도 다 해서, 8월부터는 알고리즘과 팀프로젝트에 전념할 계획이였다. 하지만 알고리즘 스터디를 하기전에 JS 기본기를 탄탄하게 다져두고 하는게 깊은 이해에 도움이 될 것 같았다. 때마침 회사 프런트 엔드 직원분들이 "모던 자바스크립트 Deep Dive" 와 "코어 자바스크립트" 두 책을 강추해주셨다. 그동안 나는 인강이 좀 더 잘 맞는다고 생각했어서, 우선 끝까지 읽기에 상대적으로 얇은 책으로 선택했다. 처음엔 가볍게 "혼동되는 개념만 잡고 빨리 알고리즘으로 넘어가야지. " 라는 생각뿐이였는데 1, 2 단원을 읽고 생각이 바뀌었다. 남들이 이해한 내용을 듣기만 하는게 아닌, 책을 보면서 곰곰히 고민하고 이해하는것도 잘 정리가 되었다. 그래서 단원별로 포스팅하면서 한번 더 머리속에 정..
오늘은 병합연산자 "??" 에 대해서 포스팅 해보려고 한다. ?? 예시를 보면 바로 이해가 갈 것이다. A ?? B A가 null 또는 undefined이면 B 그게 아니라면 A 이게 전부다. 이걸 언제쓰면 유용한지 알아보자. dto.last_id가 null이거나 undefined일때 0으로 변환해서 이후 0과 대소 비교를 하는 코드다. 이처럼 숫자 0을 구분 지어 다뤄야 할때 아주 유용하다. 또 이런 dto.parent_uuid에 대한 이런 구구절절 말도안되는 코드도 dto.parent_sort_depth = dto.parent_uuid ?? 0 이렇게 한줄로 끝내버릴수 있다. 이처럼 0 외에도 기본값을 할당하는 좋은 용도로 사용할 수 있다.
