본문 바로가기

HTML&CSS&Javascript 📚53

[JS] for() / forEach() / map() 함수 비교 1) for() let str = ''; for (let i = 0; i console.log(element)); // Expected output: "a" // Expected output: "b" // Expected output: "c" 배열의 각 요소에 대해 인자로 전달된.. 2023. 8. 18.
[JS Deep Dive] 4장 변수 (식별자, 호이스팅, 식별자 네이밍 규칙, 네이밍 컨벤션) 4.1 변수란 무엇인가 ? 왜 필요한가 ? 변수는 '값을 저장하기 위해 확보한 메모리 공간 자체' 또는 '그 메모리 공간을 식별하기 위해 불린 이름'을 말한다. 사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 '연산'과 '기억'을 수행하는 부품이 나누어져 있다. 컴퓨터는 CPU를 사용해서 연산을 하고, 메모리를 사용해 데이터를 기억한다. 메모리란 ? 데이터를 저장할 수 있는 메모리 셀의 집합체 메모리 셀 하나의 크기는 1byte(8bit)이며, 컴퓨터는 메모리 셀의 크기인 1byte 단위로 데이터를 저장하거나 읽어들이고 각 셀은 메모리 주소를 갖는다. 메모리에 저장되는 데이터는 데이터의 종류와 상관없이 모두 2진수로 저장된다. 메모리 주소를 통해 값에 직접 접근하는 것은 치명적인 오류를 발생시킬 가.. 2023. 8. 15.
[Typescript] 타입 명시(Type Annotation) / 타입 추론(Type Inference) / 타입 표명(Type Assertion) 이란 ? 타입 명시(Type Annotation) 타입 명시란 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정하는 것을 의미한다. Annotate는 "주석을 달다" 라는 사전적인 뜻을 가지고 있다. 타입스크립트에서는 변수, 함수, 함수 반환값의 데이터 타입을 지정하기 위해 "타입 명시(Type annotation)"을 사용한다. 즉, 타입에 주석을 달아준다. 한 번 식별자를 특정 타입으로 annotated 하면 해당 타입만 사용할 수 있다. 다른 타입을 사용하게 되면 타입스크립트 컴파일러가 에러를 던진다. 1) 변수에 타입 지정하기 let a: number; //a라는 변수에는 number 타입의 값만 할당 및 재할당할 수 있다. a = "Mark"; //error a = 23; .. 2023. 8. 13.
[Typescript] 타입스크립트 Type 정리 In Typescript, a 'type' is a convenient way to refer to the different properties and functions that a value has. 타입이란 값이 가지고 있는 속성(프로퍼티)이나 함수(메서드)를 추론할 수 있는 편리한 방법이다. 서론 자바스크립트의 값들은 타입에 따라 각각의 프로퍼티와 메서드를 가지고 있다. 예를 들어 위와 같이 "apple" 이라는 값은 단순히 string 문자열이라고 설명할 수도 있지만, 조금 더 상세히 설명하자면 문자열이 가지는 프로퍼티와 메서드를 가지고 있는 값(Value)라고 할 수 있다. 자바스크립트의 문자열은 .length 와 같은 프로퍼티를 가지고, .toLowerCase()나 .split() 등과 같은 .. 2023. 8. 13.
[CSS] transition / transform 정리 1) Transition /* Apply to 1 property */ /* property name | duration */ transition: margin-left 4s; /* property name | duration | delay */ transition: margin-left 4s 1s; /* property name | duration | timing function | delay */ transition: margin-left 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-left 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease.. 2023. 7. 30.
[JS & React] 얕은 비교(Shallow Equal)란 ? / 리액트에서 컴포넌트가 리렌더링되는 경우 1) 얕은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 원시 타입 데이터의 경우 '값'이 동일한지만 비교하고, 배열과 객체과 같은 참조 타입 데이터의 경우 '참조값'만 비교한다. 2) 깊은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.st.. 2023. 7. 18.

티스토리툴바