표현식과 구문 값을 생성하는 코드 조각을 표현식이라고 부른다. 문자 그대로 작성한 모든 값은 표현식이다. 표현식이 문장 조각이라면 자바스크립트 구문(statement)은 전체 문장에 해당한다. 하나의 프로그램은 명령문의 목록이다. 가장 단순한 구문은 표현식과 세미콜론으로 이루어진다. 프로그램을 변경한다고 판단되면 화면에 무언가를 표시하거나, 또는 해당 구문 이후에 나오는 구문에 영향을 미치는 방식으로 머신의 내부 상태를 변경한다. 이러한 변경을 부수 효과(side effect)라고 한다. 바인딩 자바스크립트에서는 값을 잡아 두기 위해 바인딩(binding) 또는 변수(variable)라는 것을 제공한다. let MyVariable = 5 * 5 let은 이 구문이 바인딩을 정의한다는 것을 의미한다. 그다..
값 컴퓨터는 데이터만이 존재한다. 데이터는 모두 일련의 긴 비트(bit)로 저장되어 있다.비트(bit)는 0과 1로 설명할 수 있는 두 개의 값으로 이루어진다.1바이트(byte)는 8bit이다. 바이트는 1KB, 1MB, 1GB 등의 단위로 사용된다. 대량의 비트를 분실하지 않고 처리하려면 정보의 조각을 나타내는 청크(chunk)로 분리해야 한다. 자바스크립트 환경에서는 이러한 청크를 값(value)이라고 부른다. 모든 값은 비트로 이뤄지지만 서로 다른 역할을 하며, 모든 값은 역할을 지정하는 타입(type)을 갖는다. 값을 만드려면 이름을 호출해야 한다. 모든 값은 어딘가에 저장돼 있고, 동시에 많은 양을 사용하려 한다면 메모리가 부족할 수 있다. 다행히 이는 동시에 모두 필요한 경우에만 발생하는 문..
회사의 복지 포인트로 뭘 구입할지 고민하다가 내용이 맘에 들어 구입한 책. 자바스크립트 가이드를 넘어 프로그래밍 전반에 대한 좋은 책이라 생각한다. 이 책은 크게 3부로 구성되어 있다. 1부 언어(Javascript) 2부 브라우저 3부 Node 1, 2부에서는 자바스크립트와 브라우저를 사용해 프로그래밍하는 방법을 설명한다. 3부에서는 자바스크립트 프로그래밍을 할 수 있는 또 다른 환경인 Node.js를 설명한다. 추가로 총 5개의 프로젝트를 포함하고 있으며 비교적 큰 예제 프로그램을 선보인다. 이 책을 1회독 하는데 많은 시간이 필요할 것이라 생각한다. 시간이 길어지면 의욕이 떨어지고 중간에 포기하게 되기 마련인데, 이 책에서 소개하고 있는 인용문을 기억하며 완독 하기를 바라 본다! 행동하기 어려워지면..
타입스크립트에서 객체의 key 값으로 enum을 사용하고자 하는 경우 enum MyColor { RED = 0, GREEN = 1, BLUE = 2 } const colorText: { [key in MyColor]: string } = { [MyColor.RED]: '레드', [MyColor.GREEN]: '그린', [MyColor.BLUE]: '블루', } // enum의 일부만 key값으로 사용하는 경우 const colorText: { [key in MyColor]?: string } = { [MyColor.RED]: '레드', [MyColor.BLUE]: '블루', } ... colorText[myColor] // myColor = 0 -> '레드' // myColor = 1 -> '그린' //..
1. 정규식 공부 더보기 - 총 55 단계별 인터랙티브 학습 ㅤ→ 완전 기초부터 간단한 설명과 함께 정규식 문제를 풀면서 진행 ㅤ→ 실시간으로 실행 결과가 보여서 확인 가능 ㅤ→ 키보드 만으로 진행 가능 - Playground 및 Practice 추가 예정 - JavaScript 오픈소스 2. 웹 성능 지표 cheatsheet 더보기 - 사용자 중심 성능 지표를 4가지로 구성해서 설명하고, 목표해야 하는 점수를 나열 ㅤ→ 진행여부 : TTFB, FP, FCP ㅤ→ 유용성 : LCP, VC, SI ㅤ→ 사용 가능 여부 : FID, mFID, TBT, TTI ㅤ→ 쾌적함 : CLS, Frame Rate - Cheatsheet ㅤ→ Time to First Byte (TTFB)
디자인 시스템 컴포넌트를 만드는 경우 혹은 커스텀 컴포넌트를 만들어 사용하는 경우에 css property를 props로 전달하는 경우가 있다. 이 때 해당 css property에서 지원하는 값들을 일일히 type 지정해주고는 하는데 CASE1. 기본 속성값을 지정해주는 경우 export interface ComponentProps { ... maxHeight?: "inherit" | "auto" | "max-content" | "min-content" | (...) ; } CASE2. string. number응 Data type으로 지정해주는 경우 export interface ComponentProps { ... maxHeight?: string | number; } 이 때 property typ..
