본문 바로가기

분류 전체보기464

[6주차] 동기-비동기 코드 실행순서 / Virtual DOM 1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 1번) console.log(num); // 1 --> 변수 선언과 초기화가 됐기에 1이 출력된다. 2번) 비동기 함수이다. --> setTimeout 함수 안에서 console.log(num)을 작성하면 2가 출력된다. 3번) let의 재할당 --> 식별자 let은 재할당이 가능하므로, console.log(num)을 하면 3이 출력된다. 4번) 최종적으로 3번과 같다. --> 1번과 3번이 출력되고, 비동기 2번이 출력되는 형태로 착각할 수 있다. .. 2024. 4. 14.
JS Quiz 33-36. call, bind / 즉시실행함수 / falsy-truthy 값 / typeof 연산자 33. What's the output? const person = { name: 'Lydia' }; function sayHi(age) { return `${this.name} is ${age}`; } console.log(sayHi.call(person, 21)); console.log(sayHi.bind(person, 21)); 정답 D // call. bind 2024-04.12 공부 필요 다시 해석 달기! 34. What's the output? function sayHi() { return (() => 0)(); } console.log(typeof sayHi()); 정답 B // 즉시 실행함수와 typeof 연산자에 대한 문제 함수 sayHi는 즉시실행함수로 선언됐다. 값을 0을 반환하므로,.. 2024. 4. 13.
리액트 디자인 적용 프론트엔드 개발자에게는 개발 기능 못지 않게 디자인은 중요하다. 특히 CSS 스타일링과 이미지 처리가 중요하다. 이는 UX와 직접적으로 연결되어 있기 때문에 잘 관리하는 것은 필수적이라 말할 수 있다. 방법 1. 이미지 불러오기 import 구문을 통해 이미지 파일을 불어온 뒤, 주소를 src 속성으로 사용 import profileImg from '해당 경로'; function Profile() { return ; } export default Profile; 방법 2. 클래스네임을 통해 CSS 파일 불러오기 import 구문을 통해 CSS 파일을 불러올 수 있다. CSS 파일에 정의된 클래스를 사용하려면 className prop에 문자열로 놓오주면 된다. 재사용성을 위해서는 부모 컴포넌트에서 받는 .. 2024. 4. 11.
JS 스터디 모집 글 모임명 : JS Q.R 자바스크립트를 질문(Question)으로 재구조화(Rebuilding)하다. 2024. 4. 11.
JS Quiz 29-32. 객체 / 동기-비동기 / event.target / capturing-bubbling 29. What's the output? const a = {}; const b = { key: 'b' }; const c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); 정답 B // 다시 공부 필요 24-04-10 어떻게 정답이 나오는지 모르겠다. 아...직도 객체는... 어렵구나. 객... 체 하겠네 30. What's the output? const foo = () => console.log('First'); const bar = () => setTimeout(() => console.log('Second')); const baz = () => console.log('Third'); bar(); foo(); baz(); 정답 B // 동기 .. 2024. 4. 10.