Languages/JS∕TS

유튜브에 공개된 네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션을 보고 타입스크립트의 타입 시스템에 대한 이해가 깊어졌습니다. 해당 발표 영상을 보고 추후 다시 찾아볼 수 있도록 정리한 내용입니다. 본문에는 제 나름 대로의 해석이 추가되어 오해의 여지가 있을 수 있습니다.발표 영상: infer, never만 보면 두려워지는 당신을 위한 고급 TypeScript 타입이론과 TypeScript러셀의 역설(Russell's Paradox)의 발견으로 수학의 근간인 집합론이 흔들리며 함수에 대한 고찰도 이루어졌다.기존 집합 사이의 관계로만 생각했던 함수에 대한 고찰을 시작은 람다 대수(Lambda Calculus)의 고안을 이끌었고 이를 고도화하던 중 타..

Object로 구성된 Array에서 특정 property 값을 타입으로 추출하기. feat. type guard Object array에서 타입 추출하기 typescript에서 같은 형태의 object를 담은 array에서 object의 특정 키값을 추출할 상황이 생각보다 많이 나온다. 이참에 한번 정리해보자. The Problem 웹 사이트를 만들다가 객체 배열을 관리하다 생긴 문제였고 typescript를 사용할 때 많이 마주치는 경우인 것 같아 예시를 통해 정리해보려 한다. 예시를 위해 작성된 코드이기에 내용은 이상하더라도 구조는 같으니 어떻게 처리하는지만 봐주셨으면 한다. 사람들의 데이터를 관리하고 처리하는 상황을 예시로 들어보자. 모든 사람들에 대한 정보를 담은 people 배열이 있고 사람은 ..

let userError:object; userError = { name: "cloer", age: 10 }; // console.log(user.name) // Error: Property 'name' does not exist on type 'object'. type Score = 'A'|'B'|'C'|'D'; interface User { name: string; age: number; gender?: string; //optional readonly birthYear: number; [grade:number]: Score }; let user:User = { name:'cloer', age:10, birthYear: 2012 }; user.gender = 'male'; // user.birthYe..

// primary type const myName:string = 'cloer' const age:number = 13 const married:boolean = false // Array const weekdays:string[] = ['mon', 'tue', 'wed'] const weekend:Array = ['sat', 'sun'] // tuple const user:[string, number] = [myName, age] // void const voidFunc = ():void => { // No return } // never const naverFunc1 = ():never=>{ while(true){ // Infinite loop } } const naverFunc2 = ():neve..

기본형(primitive type)과 참조형(reference type) 데이터를 담는 변수의 선언, 초기화, 할당 과정을 메모리 측면에서 이해하고 가변형(mutable type)과 불변형(immutable type)의 의미를 파악해보자. 데이터 타입과 가변성, 불변성 어떤 언어를 배우든 가장 먼저 변수를 배우게 됩니다. 이를 공부하다 보면 mutability와 immutability라는 단어를 마주하게 됩니다. 가변성 불변성이라고 번역되지만 불변하다고 하는데 값을 바꿀 수 있는 것 같고... 의미가 잘 와닿지 않습니다. 메모리의 관점에서 변수의 생성 과정을 보는 것이 불변, 가변의 의미를 이해하는데 조금은 도움이 될 수 있습니다. Js에서 데이터의 타입에 따른 변수의 선언, 초기화, 할당 과정을 메모리..

var와 let의 차이를 공부하다 나온 호이스팅과 TDZ에 대해 알아보자. 호이스팅과 TDZ 호이스팅과 TDZ로 인해 기존에 다른 프로그래밍 언어를 배운 사람들은 Js코드가 이상하다고 느낀다. 나도 그랬다. 하지만 Js를 쓰다보면 호이스팅덕분에 더 편한것 같다. 호이스팅 (hoisting) Js는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당한다. 덕분에 스크립트내에서 함수 선언의 위치는 중요하지 않다. 스크립트내에서 함수 호출을 함수 선언보다 먼저 해도 문제가 없다. 또 호이스팅은 스코프 단위로 일어난다. 예를 보며 이해해보자. callFunc();// 함수 호출 function callFanc() { console.log("나 함수!"); } // 함수 선언 가장 처음 배운 언어가 C..

Why Js? 프로그래밍 언어를 배우다보면 결국 언어는 별게 아니라는 생각을 하게 된다. 중요한 것은 구조이고 언어는 수단일 뿐이다. 하지만 우리는 그 언어의 특성을 알때 언어의 장점을 극대화 하여 어떤 프로그램의 성능을 높일 수 있다. 언어를 잘 알아야 프로젝트에서 언어를 선택할때 어떤 언어를 사용할지에 대한 정확한 근거가 생긴다. 프론트앤드와 백앤드 심지어 데이터베이스까지 모든 분야에서 사용가능하다는 점에서 나는 javascript에 큰 매력을 느꼈고, 자세히 공부해 보려한다. Js는 풀스택이 되는 가장 빠른 선택일 것이다. Js를 배우고 프론트앤드, 백앤드, 데이터베이스의 전체 로직과 구조를 훑고 세부분야를 선택해 공부하며 필요에 따라 다른 언어와 프레임 워크를 공부할 계획이다. 이 모든 게획은 J..