- 23/08/31 스터디 면접 질문 🙋 브라우저 렌더링 과정을 설명해주세요. 📚 브라우저 동작원리 브라우저 렌더링 과정 브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 1. 파싱 (Parsing) 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다. 파싱은 다운로드한 HTML와 CSS를 해석하여 DOM 트리, CSSOM 트리를 구성하는 단계. HTML 파서는 문서 구조를 파악하고 DOM(Document Object Model)을 생성함. CSS 파서는 스타일 규칙을 해석하고 CSSOM(CSS Object Model)을 생성함. 2. 스타일 (Style) 스타일 단계에서는 CSSOM과 DOM을 가지고 스타일을 매칭 시킴. 이 과정을 거쳐 렌더..
- 23/08/31 스터디 면접 질문 🙋 웹사이트 성능 최적화에는 어떤 방법이 있나요? 성능 최적화를 하는 이유와 어떻게 개선되는지를 이해하기 위해선 브라우저의 렌더링 과정을 알아야한다. 브라우저 렌더링 과정 https://imnayoung.tistory.com/25 📚 성능 최적화 성능 최적화를 위해서는 웹 사이트의 `로딩 성능(Loading Performance)`과 `렌더링 성능(Rendering Performance)`을 개선해야 한다. 1) 웹 페이지 로딩 최적화 1. 블록 리소스(CSS, 자바스크립트) 최적화 브라우저 로딩 과정에서 파싱이 일어날 때 CSS 또는 자바스크립트로 인해 파싱이 중단될 수 있는데, 이때 원인이 되는 리소스를 블록 리소스(Block resource)라고 한다. 블록 리..
- 23/08/31 스터디 면접 질문! 🙋 리액트에서 JSX 문법이 어떻게 사용되나요? 📚 React 엘리먼트 React 앱의 화면을 표시하는 가장 작은 구성 요소. React 엘리먼트는 React 컴포넌트의 반환 값으로`일반 객체(plain object)`이다. 엘리먼트가 모여 컴포넌트라는 구조를 갖는다. React 엘리먼트는 실제 DOM에 직접 렌더링되지 않음 📚 React.createElement() `React 엘리먼트를 생성`하는 역할. 가상 DOM에 리액트 엘리먼트가 생성되고, 실제 DOM으로 렌더링됨. 📚 JSX JSX는 리액트에서 사용되는 JavaScript 확장문법으로, UI를 구성하는 데 사용된다. JSX를 사용하면 HTML과 유사한 마크업을 사용하여 UI 요소를 정의할 수 있다. JS..
💡 JS Promise와 Callback 차이를 설명해주세요 동기식 코드와 비동기식 코드를 같이 사용하면 실행 순서를 보장할 수 없게 되고, 결국 원했던 결과와 다른 동작을 하게 됩니다. 이럴 때 콜백과 프로미스를 사용하면 비동기 처리의 실행 순서를 보장해줄 수 있습니다. 콜백 함수는 다른 함수의 인자로 사용되는 함수로, 비동기 처리가 끝난 후 데이터가 넘어오면 callback 함수에게 데이터를 넘겨 이전 작업이 완료됐음을 알리고, 그때 작업을 시작하는 방식으로 순서를 보장합니다. 하지만 순서대로 처리해야 할 작업이 많아질수록 콜백지옥으로 불리는 상황이 일어나게 됩니다. 이러한 콜백지옥은 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. 또한 비동기 로직의 결과값을 처리하기 위해선 callback 안에서만..
📚 타입 단언 타입 단언은 개발자가 직접 타입을 명시해 해당 타입으로 강제하는 방식. 타입스크립트를 컴파일 할 때 타입 검사를 하지 않고, 데이터의 구조도 신경쓰지 않는다. 컴파일러가 가진 정보를 무시하고 개발자가 원하는 임의의 타입을 값에 할당하고 싶을 때 사용한다. 📌 타입 단언은 왜 사용할까? 일례로 변수를 선언할 때 빈 객체에 인터페이스를 정의하면 다음과 같이 에러가 난다. 해당 객체가 Person 인터페이스와 맞게 초기화되지 않았기 때문이다. 타입 에러를 해결하는 방법으론 객체 선언 시점에 속성을 정의하면 된다. 하지만 이미 운영 중인 서비스의 코드나 누군가 만들어 놓은 코드라면 건드리기 까다로울 것이다. 이럴 때 타입 단언을 이용해서 기존 코드를 변경하지 않고도 타입 에러를 해결 할 수 있다...
[이넘] 1. 이넘을 선언할 때 const를 붙인 것과 붙이지 않은 것은 어떤 차이가 있는지 JS 변환 코드와 관련지어 설명해주세요. 이넘 코드가 자바스크립트 코드로 컴파일될 때 이넘의 속성 키와 값을 연결해 주는 즉시실행함수를 생성합니다. 반면 const 이넘은 이 함수 없이, 이넘이 사용되는 곳에서 속성 값을 바로 연결해 줍니다 따라서 const 이넘을 사용하면 컴파일 시 코드양을 줄일 수 있습니다. 2. TypeScript의 이넘은 어떤 상황에서 사용되나요? 그리고 어떤 장점과 단점을 가지고 있나요? 이넘의 장점 1. 생산성과 가독성의 증대 이넘은 열거형 코드로 의미있는 이름으로 부여할 수 있어 코드에 대한 이해와 가독성이 증대됩니다. 2. 타입 안정성 증대 이넘은 key-value 양방형 관계이기..
📚 타입추론(Type Inference) 타입추론(Type Inference) 이란 타입스크립트가 코드를 해석하여 적절한 타입을 정의하는 동작을 의미한다. 쉽게 말하면 타입을 지정하지 않더라도 자동으로 타입을 결정해준다. 타입추론의 장점은 코드 수동으로 명시해야 하는 구문의 수를 줄여주기 때문에, 코드의 전체적인 안정성이 향상된다. 타입추론이 어떤 과정을 거치는지, 언제 타입선언을 해야할 지를 알면 불필요한 타입선언을 줄일 수 있기 때문에 잘 알아두자! 😉 📌 변수의 타입 추론 let x = 10; // x는 number 타입으로 추론됩니다. 변수는 선언될 때 초기값에 따라서 타입이 추론된다. a라는 변수가 선언될 시점에 값이 할당되지 않아 어떤 값이 들어올지 모르기 때문에, any라고 추론하고 있다. ..
📚 제네릭(Generic) 제네릭(Generic)은 데이터 타입을 일반화(generalize)한다는 것을 뜻한다. 제네릭은 타입을 미리 정하지않고 사용하는 시점에서 타입을 정의할 수 있다. 즉, 선언 시점이 아니라 생성시점에 타입을 명시하기 때문에 하나의 타입만이 아닌 여러 타입을 사용할 수 있는 것이다. 📌 왜 제네릭을 사용할까? 선언시점이 아닌 생성 시점에 타입을 명시하기 때문에, 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. 제네릭을 사용하지 않는다면? 선언 시점에 타입을 미리 정하거나, any를 사용해야할 것이다. 1) 타입을 미리 정하면, 하나의 타입만 사용하기 때문에 코드의 범용성이 떨어진다. 2) any를 사용하면, 데이터 타입을 제한할 수 없으며 어떤 데이터가 리턴될 ..
📚 타입 별칭(Type alias) 특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미한다. type 키워드를 사용하여 타입을 부를 이름을 설정하는 것. 타입 별칭의 장점 타입이 어떤 역할을 하는지 의미있는 이름을 부여할 수 있음 반복되는 타입을 변수화해서 코드의 반복을 줄 일 수 있음 type MyMessage = string | number function logText(text: MyMessage) {} var message: MyMessage = '안녕하세요' logText(message) message의 타입 string | number 를 MyMessage 라는 타입이름으로 정의해서 사용할 수 있다. 📌 타입 별칭과 인터페이스의 차이점 타입 별칭과 인터페이스 둘다 객체 타입을 정의..
