Dev Diary

가상 DOM은 리액트와 같은 프레임워크에서 UI 업데이트를 효율적으로 관리하기 위해 만들어진 기술임.  가상 DOM의 정의가상 DOM은 웹 페이지의 실제 DOM 구조를 모방한 가벼운 버전임. 브라우저가 화면에 보이는 내용을 유지하는 데 사용하는 진짜 DOM은 변화할 때마다 업데이트가 복잡하고 시간이 많이 걸림. 이를 해결하기 위해, 가상 DOM은 메모리 안에서만 존재하는 가벼운 객체로, 실제 DOM과 비슷한 구조를 갖고 있지만 더 빠르게 조작할 수 있음.  가상 DOM의 동작 원리1. 렌더링 준비: React는 컴포넌트의 상태(state)나 속성(props)이 변경되면 새로운 가상 DOM 트리를 생성함. 2. 비교 과정: React는 이전 가상 DOM과 새로 생성된 가상 DOM을 비교하여 어떤 부분이 변..

this란? 현재 실행되는 코드의 문맥(context)에서 참조하는 객체를 가리킨다.쉽게 말해, this는 “누가 나를 호출했는가?”에 대한 답변이라 볼 수 있다.  this는 함수가 어떻게 호출되는지에 따라 참조하는 객체가 달라진다. 1. 일반 함수 호출2. 메소드 호출3. 생성자 함수4. 화살표 함수5. 명시적 바인딩  크게 이런 호출 방식에 따라 객체가 달라지는데, 우선은 명시적 바인딩은 다음에 자세히 살펴보는 것으로 하고 나머지 4개 호출 방식에서 this가 어떻게 동작하는지부터 이해하자.   1. 일반 함수 호출이 때 this 는 전역 객체를 가리킨다. 브라우저에서는 window를, Node.js 에서는 global을 가르킨다.  2. 메소드 호출this 는 메소드를 호출한 객체를 가리킨다. 해..

1. 매개변수와 인수매개변수: 함수를 정의할 때 어떤 정보를 받아 올 지를 지정하는 변수임. 인수: 함수를 호출할 때 매개변수에 실제로 전달되는 값.   2. 반환 값(return) 2-1) 값 반환 : 함수가 실행된 결과를 호출한 곳으로 반환.  2-2) 함수 종료: 함수를 즉시 종료하고, 그 다음에 있는 코드는 실행하지 않음. 2-3) 반환하는 요소들: 값, 객체, 배열   3. 스코프스코프는 변수와 함수가 접근할 수 있는 범위를 결정. 전역 스코프, 지역(함수)스코프, 블록스코프가 있으며, 자바스크립트는 렉시컬 스코프를 따름.스코프 체인은 변수의 검색 규칙을 정의하여, 현재 스코프에서 변수를 찾고 상위 스코프까지 거슬러 올라가는 구조를 가짐.렉시컬 스코프:함수가 정의된 위치에 따라 상위 스코프가 결..

❓궁금증 생성자 함수는 일반 함수랑 구문이 동일한데 왜 생성자 함수와 일반 함수와 구분지어 부를까? 구문이 동일하지만 new 키워드가 있을 때만 일반 함수를 생성자 함수라고 부르는 것인가? 1. 구문적 동일성: 생성자 함수와 일반 함수는 정의할 때 구문적으로 차이가 없습니다. JavaScript에서는 모든 함수가 잠재적으로 생성자 함수가 될 수 있습니다.2. new 키워드의 역할: 함수가 new 키워드와 함께 호출될 때만 해당 함수는 생성자 함수로서 동작합니다. 이때 새로운 객체가 생성되고, 함수 내의 this가 이 새 객체를 가리키게 됩니다.3. 호출 방식에 따른 구분: - new 키워드와 함께 호출: 생성자 함수로 동작- new 키워드 없이 호출: 일반 함수로 동작 예제: function User(n..

네, CSS 미디어 쿼리 없이 반응형 디자인을 구현하려면 vw(viewport width)나 rem 단위를 사용하는 것이 좋은 방법입니다. 이 접근 방식은 "fluid typography" 또는 "fluid design"이라고 불립니다. 각 단위의 특성과 사용 recommendation을 살펴보겠습니다: 1. font-size:    - vw 사용:       - 장점: 뷰포트 크기에 따라 자연스럽게 조절됩니다.      - 단점: 매우 큰 화면이나 작은 화면에서 텍스트가 지나치게 크거나 작아질 수 있습니다.      - 예: `font-size: calc(16px + 0.5vw);`    - rem 사용:      - 장점: 루트 요소의 font-size를 기준으로 하여 일관성 있게 조절됩니다.    ..

함수란?함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록. → 함수란 원하는 작업들을 나열한 것들의 주머니 1. 함수의 필요성재사용성, 코드 가독성, 유지보수 용이성, 추상화 1.재사용성: 동일한 코드를 여러번 반복할 필요가 없고, 한 번 작성한 코드를 반복해서 사용 2. 코드 가독성: 읽기 쉽게 만들어서 코드의 각 부분이 어떤 역할을 하는지 명확하게 구분할 수 있음. 3. 유지보수 용이성: 반복적으로 사용되는 부분을 함수로 묶어두면, 나중에 그 기능을 수정할 때, 일일이 코드를 전부 수정할 필요 없이 함수만 수정하면 됨. 4. 추상화: 함수는 복잡한 작업을 추상화 해서 그 작업을 하나의 단위로 다룰 수 있게 해줌. 복잡한 로직을 간단한 함수로 대체할 수 있어,..