Effective Typescript 7장, 8장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 7장 요약 링크 8장 요약 링크 인터뷰질문 Q. 타입스크립트에서의 enum이란? 사용해야 하는지? A. 여러 관련된 상수 값들을 한 곳에 모아서 정리할 수 있도록 하는 타입. 숫자 enum은 재할당 가능, 문자열 enum은 구조적 타이핑이 아닌 명목적 타이핑을 사용한다는 단점이 있고, const enum은 런타임에 완전히 제거된다는 단점이 있다. enum대신 리터럴 타입의 유니온을 사용하는 것이 좋다. Q. JS/TS에서 정보를 감추기 위해 효과적인 방법? A. 클로저, 비공개 필드(#접두사) TS의 private접근 제어자는 런타임에는 아무런 효과가 없다. 회고 지금까지 내 타입스크립트는 진짜 얼..
Node.js란? Node.js is an open-source and cross-platform JavaScript runtime environment. Node.js는 JS 런타임 환경이다. Node.js runs the V8 JavaScript engine, Node.js는 V8 JS 엔진을 실행한다. JS 런타임이란? 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 뜻한다. 브라우저, Node.js, RN, 일렉트론 등이 있다. 따라서 Node.js는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 환경이다. JS 엔진이란? 컴퓨터가 JS 언어를 이해할 수 있도록 기계어로 번역하고 실행시켜주는 엔진 JS 엔진의 코드 실행 과정 파싱(parsing) ⏩️ 컴파일링(compili..
당근에서 진행한 세션을 참고해 디자인 시스템을 구축하는 과정을 적었습니다. 졸업프로젝트 기획을 시작했다. PC 웹 + 모바일 웹 + iOS 앱 디자인이 필요하다. 그런데 어떻게 각각의 플랫폼에서 UI 컴포넌트를 일관성 있게 구성할 수 있을까? 또 어떻게 우리 서비스의 PC버전에 익숙한 사람들이 모바일을 접했을 때, 혹은 반대의 경우에 어색하지 않도록 일관된 UX를 설계할 수 있을까? 지금까지는 네이밍 통일을 통해 피그마의 디자인 시스템을 그대로 코드로 옮기는 식으로 구성을 했었으나, 디자인을 바꾸게 된다면 어떻게 될까? 웹개발자(나)와 iOS 개발자 모두 자신의 코드를 수정해야 한다. 우리끼리 같은 디자인을 공유한다고 믿을 수 있을까...? 디자인 시스템의 필요성이 느껴지는 순간이었다. 어차피 디자인부터..
Effective Typescript 5장, 6장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 5장 요약 링크 6장 요약 링크 인터뷰질문 Q. any 타입 대신 어떤 방법을 써볼 수 있을까? A. any타입의 범위 좁히기 함수의 매개변수 - 매개변수 그 자체에 any타입 단언 객체 - 객체 전체가 아닌 문제가 되는 부분만 any타입 단언 @ts-ignore사용하기 any 보다는 any[], {[key: string]: any}, ()=>any등의 표현 사용하기 모르는 값에는 any보다 unknown사용하기 npm type-coverage 패키지를 이용하여 any추적하기 Q. object vs Object vs {} vs {[key: string]: any} A. {} null과 undefin..
브라우저 렌더링 과정 사용자가 브라우저를 통해 웹사이트 접속 브라우저가 리소스 다운받음 (HTML, CSS, JS 등) 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦 DOM 트리 + CSSOM 트리 = Render 트리 구축 Layout: 각 요소의 배치 결정 Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 Layerize: Paint 결과물을 특정한 레이어들로 쪼갬 Commit: Layerize 결과물을 Composite Thread로 옮김 Composite: Render 트리에 존재하는 레이어들을 합치는 과정 Display: 렌더링 ~~ Layer 여기서 말하는 레이어란, 포토샵의 레이어처럼 페인팅 ..
위와 같이 참고자료 https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com
이미지 스프라이트란? 웹사이트들을 개발자도구로 뜯어보면 네트워크 탭에서 가끔 저런 이미지의 모음들을 볼 수 있다. 이게 이미지 스프라이트이다! 이미지 스프라이트란, 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다. 이미지 스프라이트, 장점과 단점 장점 단점 서버 요청 횟수를 줄여 로딩 속도를 줄여준다 하나의 스프라이트 이미지 파일만 관리하면 된다 img 태그가 아니라 css의 background-image로 처리되기 때문에 alt 속성을 사용할 수 없다 일부 이미지의 수정이 필요한 경우 파일을 다시 수정해야 한다 언제 사용할까? 의미상 크게 중요하지 않고 디자인적인 이미지의 경우 수정이 자주 되지 않는 이미지의 경우 어떻게 ..
vendor prefix란? CSS를 작성하면서 위와 같은 코드를 본 적이 있을 것이다. -webkit/-moz 등이 바로 벤더 프리픽스이다. 벤더 프리픽스(vendor prefix)란, 주요 웹 브라우저 공급자(vendor)가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 해당 기능을 알리기 위해 사용하는 접두사(prefix)를 의미한다. 주요 브라우저와 vendor prefix 브라우저 prefix Chrome, Safari 등 크로미움 기반 브라우저 -webkit 파이어폭스 -moz 엣지 (크로미움 이전) -ms 오페라 -o 지금까지는 남발했던 vendor prefix 나는 지금까지 이렇게 벤더 프리픽스를 활용했다. caniuse 를 활용해서 확인 (특이한 속성 이용할 경우) 크로스 브..
