main/JS | TS 썸네일형 리스트형 ECMAScript 문서에서 Array.from()에 대해 읽어보기 요즘 JS로 알고리즘 문제를 푸는 것이 꽤 재미있는 상태다.2차원 배열은 기본이고 3차원 배열도 자주 쓰게 된다. 다차원 배열을 초기화하여 선언하는 과정에서 원소를 복사해서 넣어주게 되면배열 복사 시 기본 특성인 shallow copy (얕은 복사, 주소 참조)로 인해원본 배열을 변경하여도 새 배열이 같은 주소를 참조하여 두 배열의 값이 함께 변경되는 의도하지 않는 일이 발생한다. 따라서 초기화 시 shallow copy 되지 않도록for문 혹은 map()을 이용해서 원소를 하나하나 넣어줄 수 있다. 또는 Array.from() 메서드를 사용할 수 있는데 요즘 나는 이 방법을 주로 사용하고 있다.처음에는 단순 사용법만 외워 쓰다가 원리를 알고 써야겠다 싶어 공부하게 되었다. 1. ECMAScript 명세.. 더보기 [수강후기] 유데미(Udemy) 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 프런트엔드 개발자라면 이제는 누구나 공부하는 타입스크립트이죠 Typescript 공부에 대한 목마름이 계속 있던 저는 좀 더 잘 알고 잘 쓰기 위해 해당 강의를 들어보게 되었습니다. 강의 내용 Typescript의 개념과 컴파일러 작동 방식, ES6 문법, JavaScript를 Typescript에 통합, Webpack으로 개발 환경 설정, 실제 사례를 배웁니다 요구 사항으로는 Javascript 기본 문법 정도의 사전지식을 요합니다. Typescript를 완전 처음 사용해보는 수강생을 위한 초기 셋팅부터 알려줍니다. 그게 아니라면 앞부분은 건너 뛰셔도 될 듯 합니다! 좋았던 점 강의가 꽤 길지만 (15시간) 그만큼 내용도 폭넓고 알찹니다. Typescript는 직접 실습해보지 않으면 이론만으로 공부하기.. 더보기 실제로 타입스크립트의 컴파일 과정은 어떻게 동작할까 런타임과 컴파일타임고수준(high-level) 언어: 사람이 이해하기 쉬운 형식저수준(low-level) 언어: 컴퓨터가 이해하기 쉬운 형식개발자가 작성한 고수준 언어의 소스코드는,컴파일러에 의해 기계어 코드(바이트 코드)로 변환되어 실행이 가능한 프로그램이 된다.이 단계를 컴파일타임 이라고 부른다. 소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데,컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정이다.이 시간을 런타임 이라고 한다. 자바스크립트 런타임자바스크립트가 실행되는 환경은 대표적으로 크롬이나 사파리 등의 인터넷 브라우저와 Node.js 등이 있다.자바스크립트 런타임의 주요 구성 요소는 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐가 있다. 자바.. 더보기 타입 확장하기 (Union/Intersection Type), 좁히기 (Type Guard) 타입 확장하기타입스크립트에서는 중복되는 타입 선언을 줄이기 위해 "타입 확장"을 한다.interface A { name: string; url: string;}interface B extends A { time: number;}type C = { name: string; url: string;};type D = { time: number;} & C; extends 외에도 |, & 기호를 이용해서 유니온 타입, 교차 타입을 사용할 수 있다. 유니온 타입 (Union Type) 유니온 타입은 유니온 타입에 포함된 모든 타입이 공통으로 갖고 있는 속성에만 접근할 수 있다.두 타입의 공통 속성은 orderId뿐이다.step.distance를 찾게 되면 에러가 발생한다. 하지만 책에서는 이 개념을 합집.. 더보기 타입스크립트 고급 타입 (Index Signatures, Indexed Access Types, Mapped Types, Template Literal Types) 인덱스 시그니처 (Index Signatures)인터페이스 내부에 [Key: K]: T 꼴로 타입을 명시해주면해당 타입의 속성 키는 모두 K 타입이어야 하고 속성값은 모두 T 타입을 가져야 한다는 의미다.위처럼 속성값에 해당하지 않는 타입을 정의하면 에러가 발생한다. 인덱스드 엑세스 타입 (Indexed Access Types)다른 타입의 특정 속성이 가지는 타입을 조회하기 위해 사용된다.인덱스에 사용되는 타입 또한 그 자체로 타입이기 때문에 유니온 타입, keyof, 타입 별칭 등의 표현을 사용할 수 있다. 또한 배열의 요소 타입을 조회하기 위해 사용하는 경우가 있다.PromotionList 데이터에서 타입을 추론하고 싶을 때T[0]는 해당 ElementOf의 에 들어온 어떤 unknown 배열의 원소.. 더보기 JS의 list 함수 끝판왕 reduce와 친해지기 :) 분명 일상이는 나에게 타입 가드에 대해 설명해주고 있었는데갑자기 Math.max 가 number[] 타입이어서 .. 자기가 설정한 타입의 list에 max를 쓰려니 타입이 안되구 어쩌구 저쩌구그러더니 잠깐 , , max를 왜 써? 하고는갑자기 분위기 리듀스! const myMax = Math.max(...scores) as AnswerNumber;max를 쓰면, 내 myMax number[] 가 아니라 AnswerNumber 타입이라는 것을 aliasing 해주어야 했다.scores.reduce((acc, cur) => (acc 그러지 말고 리듀스로 바꿔버리기 .. 오 ..? 그리고 시작된 리듀스와 친해지기 시간 🥲 자 다음 문제를 풀어보시오 ~1. 짝수 원소는 제거한다.2. 모든 원소값을 2배한다.[.. 더보기 무한 if 지옥을 벗어나자 (feat. Map) 위 코드에서 num은 질문의 문항이고, type은 답변의 문항이다. 분명 문제마다 답을 하나씩 선택했을 때 scores에 카운팅을 하는 것은 동일하기 때문에, 코드의 형식은 매번 같으나알고리즘 문제도 아니고 어떤 수치적으로의 패턴이 없는 상황에서이 if 지옥은 아무리 봐도 아닌 것 같은데 .. 근데 어떻게 해야하지 ... 하다가짱고수 개발자에게 자문을 구해보았다. 🤩Map을 만들어서, 문항별 답변에 어떤 스코어의 값을 올려줄 지 기록한다. 값을 올려줄 때 해당 스코어의 값을 Map에서 찾아와서 올려주는 코드는더 이상 중복하지 않고 두 줄로 끝내버린다. (에러 처리는 덤 ..) Map 자체는 계속 길어지지만, (아마 이 Map도 더 스마트하게 할 수 있는 방법이 있겠지)핵심 코드는 간단해졌기에 누가 봐도.. 더보기 이전 1 다음
