본문 바로가기

전체보기

실제로 타입스크립트의 컴파일 과정은 어떻게 동작할까 런타임과 컴파일타임고수준(high-level) 언어: 사람이 이해하기 쉬운 형식저수준(low-level) 언어: 컴퓨터가 이해하기 쉬운 형식개발자가 작성한 고수준 언어의 소스코드는,컴파일러에 의해 기계어 코드(바이트 코드)로 변환되어 실행이 가능한 프로그램이 된다.이 단계를 컴파일타임 이라고 부른다. 소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데,컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정이다.이 시간을 런타임 이라고 한다. 자바스크립트 런타임자바스크립트가 실행되는 환경은 대표적으로 크롬이나 사파리 등의 인터넷 브라우저와 Node.js 등이 있다.자바스크립트 런타임의 주요 구성 요소는 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐가 있다. 자바.. 더보기
Web Rendering Patterns 조금 자세하게 알아볼까 최근 patterns.dev 읽으며 디자인 패턴을 공부하고 있다.디자인 패턴을 간단하게 정리하며 마무리했고 어제는 렌더링 패턴으로 넘어왔는데,항상 얕게만 알고 있던 이 렌더링 패턴을 파헤쳐 제대로 정리를 좀 해야겠다고 생각이 들었다.개인적으로 patterns.dev의 내용만으로는 조금 부족하다고 느껴서 추가적인 내용은 여러 곳에서 모아 정리한다. SSR, CSR, SSG를 설명하려면 JS의 역사부터 꺼내오지 않을 수 없겠지만 ~거두절미하고 최대한 각각의 개념에만 접근해 보겠다. Server-Side Rendering프런트엔드 개발자라면 아주 익숙한 약어인 SPA(Single Page Application)이 있기 전에, MPA(Multi Page Application)이 있었다.MPA는 여러 개의 HT.. 더보기
우아한 타입스크립트 with 리액트 일상이가 추천해준 이 책을 빠르게 빠르게 읽으면서 공부한 짧은 후기를 남겨보려고 한다. 일단 책을 집필한 사람들이 우아한형제들의 웹 프론트개발그룹 현직자들이기 때문에그들이 어떤 코드를 사용하는지 간접적으로 볼 수 있고 (클래스 기반이다 ..!)중간중간 '우형 이야기' 라는 코너에서는 어떤 개념을 사용하는 데 있어 팀별로 각각 다른 의견도 읽을 수 있다. 흥미롭다. 책의 구성도 좋은 것 같다. 초반부에 웹, 자바스크립트와 타입스크립트의 탄생 배경 같은 역사가 가볍게, 이해하기 쉽게 서술되어있다. 타입 개념으로 들어오면 나 같은 경우에는 타입스크립트를 조금은 사용해 봤기 때문에 익숙한 부분도 있었지만고급 타입 개념은 쓰는 방법을 잘 몰라서 코드에 적용해본 적이 없었기에 생소한 부분 다시 한 번 정리도 하면서.. 더보기
타입 확장하기 (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 배열의 원소.. 더보기
2023년 (진짜) 회고 후후 그럼 이제 정말 운동을 제외한 2023년 회고를 한 번 써볼까 .. 🤗 2023년 회고를 쓰려고 했는데 운동밖에 안한 운동 이야기 이번 2023년을 어떻게 지냈나 돌아봤을 때 중요했던 일들을 차례로 나열한 뒤, 나에게 임의의 질문을 던지고 답하는 것으로 글을 마무리해보려고 한다. 라고 시작했는데 운동이 너무 길어져서 이 improvisation.tistory.com 길었던 넥스터즈 활동의 마무리 22년도에 내가 많은 열정을 쏟았던 것은 넥스터즈가 아니었을까? 아마 앞으로 나는 꽤 오랜 기간 연합동아리 정규활동을 하지 않을 것 같다. 어쩌면 아예 안 할 지도 모른다. 사람들 만나는 건 너무 좋지만 사이드 프로젝트는 이만하면 된 것 같다. . ? 여러 이유가 있지만 어쨌든 23년 2월을 끝으로 길었던 .. 더보기
2023년 회고를 쓰려고 했는데 운동밖에 안한 운동 이야기 이번 2023년을 어떻게 지냈나 돌아봤을 때 중요했던 일들을 차례로 나열한 뒤, 나에게 임의의 질문을 던지고 답하는 것으로 글을 마무리해보려고 한다. 라고 시작했는데 운동이 너무 길어져서 이 글에서는 운동얘기만 하고 끝낸다 ... 운동 가장 먼저, 운동을 제일 중요하게 여겼던 것인지는 잘 모르겠으나, 틈만 나면 운동하는 데 시간을 소모했다. 그 중에서도 단연 실내 클라이밍 🧗🏻‍♀️ 에 미쳐있었다고 봐야한다. 분명 취미로 시작한 운동이었는데 클라이밍을 좀 하게 되면서 다른 운동에도 도전했고 그야말로 인생이 운동 그잡채 ... 주객전도가 아닐 수 없다 ,, 운동을 한 시간이 너무 많았던 올해 나는 이전과 비교하여 어떻게 달라졌을까? 21년 폴댄스 중학생 시절부터 운동을 한 적이 손에 꼽는데 갑자기 폴댄스를.. 더보기
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배한다.[.. 더보기

티스토리툴바