본문 바로가기

코딩/개념 정리

(5)
매일메일) 45, 46, 47 문제 요약 오늘의 문제 1.자바스크립트에서 어떻게 호이스팅이 가능한지에 대해서 설명해주세요. 키워드) 컴파일 단계, 실행 단계더보기자바스크립트 엔진이 코드를 실행하기까지 컴파일 단계와 실행 단계 두 단계를 거치기 때문입니다. 컴파일 단계에서 함수와 변수 선언이 메모리에 먼저 할당되고, 실행 단계에서 실제 코드가 실행됩니다. 여기에서 변수가 할당된 값을 가지게 되고, 함수가 호출되면 그 안의 코드가 수행됩니다. 이를 통해 코드 내에서 선언 위치와 상관없이 변수를 사용할 수 있는 호이스팅이 가능한 것입니다.오늘의 문제 2.useEffect와 useLayoutEffect의 차이점에 대해서 설명해주세요. 키워드) 실행 타이밍, 비동기 vs 동기, DOM 업데이트 시점더보기`useEffect`와 `useLayoutEffec..
매일메일) 31, 32, 33 문제 요약 오늘의 문제 1.자바스크립트 호이스팅(Hoisting)에 대해서 설명해주세요. - 호이스팅은 변수와 함수가 초기화되기 전에 메모리 상에 먼저 올라가있는 상황을 말하며, 그렇기 때문에 마치 위로 끌어올려진 것처럼 보입니다.- 변수 호이스팅은 `var`의 경우 함수 레벨 스코프를 가지고 있고 `undefined`로 초기화되어 호이스팅이 명확하게 관찰됩니다.`let`과 `const`도 호이스팅이 발생하지만 TDZ에 머무르기 때문에 초기화 전에 참조하면 에러가 발생하여 호이스팅이 발생하지 않는 것처럼 보입니다.- 함수 호이스팅에서는 함수 선언식이 전체가 호이스팅됩니다. 반면 함수 표현식과 화살표 함수는 변수 호이스팅과 동일하게 동작하므로, 변수 선언만 호이스팅되고 함수 내용은 호이스팅되지 않습니다. TDZ(Te..
매일메일) 20, 21, 30 문제 요약 오늘의 문제 1.인터넷 창에 www.google.com를 입력하면 무슨 일이 일어나는지 설명해주세요. - DNS 조회 -> TCP 연결 수립 -> HTTP 요청 -> 서버의 응답 -> 브라우저 렌더링 파이프라인- 브라우저에 주소를 입력하면 DNS 조회로 도메인을 IP 주소로 변환하고, TCP 3-way handshake로 연결을 수립합니다. 그다음 HTTP/HTTPS 요청을 보내고 서버로부터 HTML, CSS, JS 등의 응답을 받은 후, 브라우저 렌더링 파이프라인을 통해 화면에 웹페이지를 표시합니다. DNS 조회"구글이 어디에 있는지 주소록에서 찾기"www.google.com → 142.250.196.142 (실제 주소) 변환TCP 연결"구글 회사에 전화 걸어서 연결하기"TCP(Transmission..
매일메일) 17, 18, 19 문제 요약 오늘의 문제 1.리액트의 Controlled Component와 Uncontrolled Component의 차이점에 대해서 설명해주세요. - Controlled Component는 리액트 state로 입력값을 관리하는 방식이고, Uncontrolled Component는 DOM에서 직접 입력값을 관리하는 방식입니다. Controlled는 실시간 검증이 필요한 복잡한 폼에, Uncontrolled는 단순한 폼에 적합합니다. - Controlled Component는 리액트 state로 입력값을 관리하는 방식으로, useState와 onChange 이벤트를 통해 값을 제어합니다. 입력할 때마다 상태가 업데이트되어 실시간 검증이 가능하지만 리렌더링이 발생합니다.Uncontrolled Component는 DOM..
React와 Next.js로 알아보는 CSR과 SSR 이전에 React 프로젝트를 블로그를 개발하다가 기능을 더 확장시켜 다른 프로젝트로 변경하게 되어 개발을 멈추게 된 적이 있습니다. 멈추게 된 김에 이 React 프로젝트를 Next.js로 바꾸면서 간단하게 CSR과 SSR의 차이를 비교해 보았던 경험을 이야기하고자 합니다. 또한 개인 프로젝트 몇 개가 '실은 SSR이 더 적합한 사이트일 수도 있지 않을까?'라는 생각이 들게 되었고 그 차이에 대해 이번 기회에 알아보는 게 좋을 것 같다는 생각이 들었습니다. 물론 React로 SSR 구현이 가능하고, Next.js로도 CSR 구현이 가능합니다만, 간략하게나마 그 차이를 알아보고 싶어 작성하게 되었습니다. 🔍 CSR과 SSR의 이해1. CSR(Client Side Rendering)서버에서 빈 페이지를 최..