본문 바로가기

📂 기술 면접20

JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 👩🏻‍💻 JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 알림창 Open 💁🏻‍♀️ 요약하자면 , 페이지 로딩 속도를 향상시킬 수 있고, DOM 조작 및 이벤트 처리가 효율적으로 이루어질 수 있기 때문입니다. 1. 로딩 순서 웹 브라우저는 HTML 문서를 위에서 아래로 파싱하며 로딩하는데, HTML 문서 내에 있는 요소들을 만나면 해당 요소들을 순서대로 처리하게 됩니다. 따라서 HTML 문서에 포함된 JavaScript 코드도 순차적으로 처리됩니다. 만약 JavaScript 코드가 HTML보다 위에 위치한다면, HTML 파싱 중에도 JavaScript 코드를 만나게 됩니다. 이 경우 브라우저는 JavaScript 코드를 실행하려면 HTML 파싱을 중단하고 코드를 처리해야 하.. 2023. 8. 29.

TypeScript는 정확히 무엇이며 JavaScript와 어떻게 다른가요? 👩🏻‍💻 질문 💁🏻‍♀️ 요약하자면 , TypeScript는 Microsoft에서 개발한 프로그래밍 언어로, JavaScript의 확장된 버전입니다. TypeScript는 정적 타입을 지원하는 언어로, 개발자에게 타입 안정성과 코드의 가독성을 높여주는 기능을 제공합니다. JS vs. TS JavaScript는 동적 타입 언어로, 변수의 타입을 선언하지 않고 사용할 수 있습니다. 이는 유연성과 간편함을 제공하지만, 타입 에러의 가능성이 높아질 수 있고, 대규모 프로젝트에서 코드 유지보수의 어려움을 야기할 수 있습니다. 반면에 TypeScript는 변수, 함수, 객체 등에 명시적인 타입을 지정할 수 있습니다. 이를 통해 컴파일러가 코드를 분석하고 타입 체크를 수행할 수 있어, 타입 관련 에러를 사전에 방지할.. 2023. 6. 8.

Virtual DOM이란? 그리고 사용 시 장점은? 👩🏻‍💻 Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요? 💁🏻‍♀️ 요약하자면 , React의 가상 DOM은 실제 DOM과 유사한 내용을 담고 있는 복사본이며, 이를 활용하면 렌더링을 최적화할 수 있습니다. 가상 DOM을 먼저 설명하자면, React는 변경 이전과 변경 이후의 두 개의 가상 DOM을 유지합니다. 첫 번째 가상 DOM은 변경 이전의 내용을, 두 번째 가상 DOM은 변경 이후에 보여질 내용을 담고 있습니다. 변경된 내용이 화면에 새롭게 그려지기 전, 즉 실제 DOM이 변경되기 이전에 React는 두 개의 가상 DOM을 비교하여 어떤 부분이 변경되었는지 효율적으로 찾아내는 작업(또는 Diffing)을 수행합니다. 이때, React는 부모 요소의 타입이 변경되면 .. 2023. 6. 8.

재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. 👩🏻‍💻 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 재귀 함수(Recursive function)는 자기 자신을 호출하는 함수입니다. 재귀 함수를 사용하면 반복적인 작업을 간단하고 효율적으로 처리할 수 있습니다. 재귀 함수를 사용하기 좋은 상황은 세 가지 정도로 이야기해볼 수 있을 것 같습니다. 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 하위 문제의 해결이 상위에 있는 문제 해결에도 이어지는 경우 재귀 함수를 사용할 수 있습니다. 예를 들어, 피보나치 수열의 n번째 수를 구하는 문제가 있다고 했을 때, 피보나치 수열의 n번째 수는 n-1번째 수와 n-2번째 수를 합한 값이므로, 몇 번째 수를 구하든 동일한 구조의 작은 문제로 나눌.. 2023. 5. 9.

Semantic HTML의 필요성을 예시를 들어 설명해 주세요. 👩🏻‍💻 Semantic HTML의 필요성을 예시를 들어 설명해 주세요. 💁🏻‍♀️ 요약하자면 , Semantic HTML은 웹 페이지의 각 요소에 의미를 부여하는 HTML 마크업 방법입니다. 이는 웹 페이지의 구조와 의미를 더 명확하게 전달하며, 결국 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 기여합니다. 예를 들어, HTML 안에 제목, 내용, 푸터로 내용이 나눠져 있음에도 불구하고 모든 요소를 태그로 씌운다면 코드를 보는 개발자 입장에서 웹 페이지 구조와 의미가 정확하게 보이지 않을 뿐 아니라, 우리가 애써 만든 웹 사이트가 검색 엔진에 최적화되지 않을 것입니다. 제목 내용 따라서, HTML의 각 영역은 각 영역의 의미에 맞게 요소는 웹 페이지의 제목, 요소로는 섹션을 정의, 요소로는 .. 2023. 5. 9.

HTTP 메세지 구조에 대해 설명해 주세요. 👩🏻‍💻 HTTP 메세지 구조에 대해 설명해 주세요. 💁🏻‍♀️ 요약하자면 , HTTP 메시지는 크게 start line, HTTP header, empty line, body로 나뉩니다. 메시지의 구조 1. start-line 요청이나 응답의 상태를 나타내며 항상 첫 번째 줄에 위치합니다. 어떤 프로토콜을 사용하는지, 어떤 HTTP 메서드인지, 상태 코드는 무엇인지 등을 나타냅니다. 2. HTTP header 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다. 3. empty line 헤더와 본문을 구분하는 빈 줄이 있습니다. 4. body 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용되는데요. GET, DELETE,.. 2023. 4. 10.

GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 👩🏻‍💻 GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 💁🏻‍♀️ 요약하자면 , GET은 서버에서 데이터를 조회할 때 쓸 수 있는 메소드고, POST는 서버에서 데이터를 추가할 때 사용하는 메소드 입니다. GET과 POST 요청에는 각각 어떻게 정보를 담을 수 있나요? GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이기에 query parameter나 path parameter를 씁니다. POST 요청에서는 추가하고자 하는 데이터를 HTTP body에 담아 전달합니다. 각 요청의 특징은 어떻게 되나요? GET은 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성을 가지고 있습니다. 반면 POST는 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받게.. 2023. 4. 10.

useEffect의 dependency array에 대해서 설명해 주세요. 👩🏻‍💻 useEffect의 dependency array에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , useEffect란, 컴포넌트 내에서 사이드 이펙트를 실행할 수 있게 하는 훅입니다. useEffect는 첫 번째 인자로 콜백함수를 받고, 두 번째 인자로 배열을 받는데, 이 배열을 dependency array 라고 합니다. dependency array란 무엇인가요? 종속성 배열이라 부르는 이유는 useEffect의 실행이 화면에 처음 렌더링 될 때 그리고 종속성 배열의 value 값이 바뀔 때마다 실행되기 때문입니다. 만약 빈 배열이 전달된다면 첫 렌더링될 때만 실행됩니다. useEffect에 dependency array를 주지 않으면, 상태가 변경될 때마다 컴포넌트가 리렌더링이 됩니다. .. 2023. 4. 10.

React 컴포넌트의 key 속성에 대해 설명해 주세요. 👩🏻‍💻 React 컴포넌트의 key 속성에 대해 설명해 주세요. React에서 리스트 형태로 컴포넌트를 렌더링 할 때, key 값을 넣어달라는 console 에러가 자주 뜨는데요. 이때 이 key 값이 어떠한 역할을 할까요? 💁🏻‍♀️ 요약하자면 , key는 React가 어떤 항목을 변경하거나 추가할지 또는 삭제할지 구별하도록 돕는 역할을 합니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. key 속성은 같은 컴포넌트를 여러 번 렌더링할 때, 다른 컴포넌트임을 구분하기 위해 사용하는 속성인데요. 예를 들어, 10개의 트윗 중 하나의 트윗만 변경되었을 때 해당 트윗만 재렌더링하고, 다른 9개의 트윗은 그대로 둘 수 있습니다. 이렇게 key 속성을 활용하.. 2023. 4. 10.

Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 👩🏻‍💻 Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 💁🏻‍♀️ 프로미스란, 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말합니다. 프로미스가 필요한 이유는 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 활용하는데, API가 실행되어 데이터를 받아오기도 전에 데이터를 다 받아온 것처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이때 문제를 해결하기 위한 방법이 프로미스입니다. 즉, 쉽게 말하자면 프로미스는 최종 결.. 2023. 4. 10.

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요. 👩🏻‍💻 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 순수함수란 사이드 이펙트가 없는 함수, 즉 함수의 실행이 외부에 영향을 끼치지 않는 함수를 뜻하고, 입력으로 전달된 값을 수정하지 않는 불변성을 가지고 있습니다. 따라서 순수함수는 어떠한 전달인자가 주어지더라도 항상 똑같은 값이 리턴됨을 보장합니다. 사이드 이펙트란? 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인 입니다. 대표적으로 네트워크 요청, API 호출이 Side Effect입니다. 순수함수 개념이 중요한 이유는? 사이드 이펙트를 줄이고, 모듈화 수준을 높이는 함수형 프로그래밍의 특징, 즉 순수함수는 평가 시점이 무관하다는 특징으로 인해 효율적인 로직을 구성할 수 있습니다. 데이터의 .. 2023. 4. 10.

SOP와 CORS에 대해서 설명해 주세요. 👩🏻‍💻 Same-Origin Policy와 CORS에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , SOP는 '동일 출처 정책'으로, 같은 출처의 리소스만 공유가 가능하다는 정책이며, CORS는 '교차 출처 리소스 공유' 입니다. 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS 설정을 통해 접근 권한을 얻을 수 있습니다. SOP(Same-Origin Policy) SOP의 출처는 프로토콜, 호스트, 포트의 조합으로 되어 있는데, 이 중 하나라도 다르면 동일한 출처로 보지 않습니다. 덕분에 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 해킹 등의 위협으로부터 안전해질 수 있습니다. 기본적으로 모든 브라우저는 SOP 정책을 사용하고.. 2023. 4. 5.

이전 1 2 다음

티스토리툴바