Interview Questions

내가 출제한 문제 컴포넌트에 여러 요소가 있을 경우, 하나의 부모 요소로 감싸야 하는 이유는 무엇입니까? > Virtual DOM에서 컴포넌트 변화를 효율적으로 감지하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 되어 있어야 한다는 규칙 때문입니다. name이라는 변수가 '리액트'일 경우 '리액트입니다'라는 문자열을 반환하고, 아닐 경우 '리액트...

내가 출제한 문제 Ref는 언제 사용하나요? > DOM에 직접적으로 접근할 때 사용합니다. focus나 text selection 또는 애니메이션을 직접적으로 제어할 때 ref에 접근하려는 DOM 요소를 담아두고, ref의 current 프로퍼티를 통해 그 DOM에 접근할 수 있습니다. 클래스 컴포넌트에서 ref를 사용할 경우, ref의 current ...

1. Is React library? or framework? React는 user interface(UI)를 만들기하기 위한 JavaScript 라이브러리입니다. 1.1 library와 framework의 차이점에 대해 얘기해주세요. library는 필요할 시점에 필요한 기능을 사용할 수 있는 반면에, framework는 정해진 규칙대로 코드를 짜야...

1. useState의 set 함수는 동기적으로 동작하나요? 비동기적으로 동작하나요? useState의 set 함수는 비동기적으로 동작합니다. React는 상태를 일괄적으로(batch) 업데이트합니다. 모든 이벤트 핸들러가 실행된 이후, 상태가 업데이트됩니다. 1.1 set 함수가 비동기로 동작할 때의 이점이 무엇입니까? set 함수가 ...

1. 제어 컴포넌트와 비제어 컴포넌트에 대해 설명해주세요. value props를 전달받아서 React에 의해 제어되는 input 컴포넌트를 제어 컴포넌트라고 합니다. React는 제어 컴포넌트가 항상 전달받은 value를 갖도록 강제합니다. value prop를 전달받지 않는 전통적인 HTML form input을 비제어 컴포넌트라고 합니다. ...

1. px, em, rem의 차이에 대해 설명해주세요. px는 픽셀 단위를 말합니다. 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖습니다. 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식합니다. em은 요소에 지정된 크기에 대한 상대 단위를 말합니다. typographical properties...

1. Box model에 대해 설명해주세요. box model은 block box에 적용되는 모델로, content box, padding box, border box, margin box로 구성되어 있습니다. 1.1 box-sizing 속성에서 content-box와 border-box의 차이에 대해 설명해주세요. 100px로 지정되어 있을 때 여백...

1. Array와 Linked List의 차이에 대해 설명해주세요. 배열은 인덱스를 통해 요소에 접근이 가능하므로 시간 복잡도가 O(1)입니다. 반면에 연결 리스트는 순차적으로만 접근이 가능하므로 시간 복잡도가 O(N)입니다. 배열에서의 삽입과 삭제는 시간 복잡도가 O(N)인 반면에, 연결 리스트에서의 삽입과 삭제는 시간복잡도가 O(1)입니다. 배열을 저...

1. 브라우저 검색창에 URL을 입력하면 어떤 일이 발생하는지 설명해주세요. (네트워크 관점) 부라우저 주소창에 URL을 입력합니다. 브라우저가 URL의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다. 캐시에 요청한 URL이 없으면, ISP의 DNS 서버가 DNS 쿼리로 URL을 호스팅하는 서버의 IP 주소를 찾습니다. 브라우저가 해당 서버와 ...

1. 프로세스와 스레드에 대해 설명해주세요. 프로세스는 OS에 메모리를 할당 받아서 실행 중인 프로그램을 말합니다. 프로세스는 각각 독립된 메모리 영역으로 code, data, stack, heap을 할당받습니다. 프로세스는 각각 별도의 메모리 주소 공간에 할당되기 때문에 다른 프로세스의 자원에 접근할 수 없습니다. 스레드는 프로세스가 할당된 자원을 이용...

1. JavaSctipt는 무슨 언어인가요? 웹 브라우저에서 동작하는 언어 인터프리터 언어(interpreter language) 기계어로 컴파일하지 않고 즉시 실행되는 프로그래밍 언어 멀티패러다임 프로그래밍 언어 명령형, 함수형, 프로토타입 기반의 객체 지향 프로그래밍을 지원하는 언어 동적 타이핑 언어 런타임에 값의 타입이 결정되는...

1. AJAX에 대해 설명해주세요. AJAX는 Asynchronous JavaScript and XML의 약어로 JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. AJAX는 브라우저에서 제공하는 Web API인 XMLHttp...

1. 깊은 복사와 얕은 복사에 대해 설명해주세요. 객체가 중첩되어 있을 때, 얕은 복사는 1단계까지 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 모든 객체를 복사하는 것을 말합니다. 얕은 복사 방법은 slice, Object.assign, spread 연산자를 사용하는 방법이 있습니다. 깊은 복사 방법은 JSON.stringfy와 parse 메...

1. Closure에 대해 JavaScript, React 관점으로 각각 설명해주세요. (React 설명시 useState를 예시로 들어 설명해주세요) JavaScript에서는 함수가 생성될 때 자신의 상위 스코프를 기억하고 있기 때문에, 상위 스코프인 외부 함수의 생명 주기가 끝나도 내부 함수는 외부 함수의 변수를 참조할 수 있습니다. 이렇게 상위 스코...

1. JavaScript에서 일어나는 데이터 형변환에 대해 설명해주세요. JavaScript에서 일어나는 형변환에는 명시적 형변환과 암시적 형변환이 있습니다. 명시적 형변환은 개발자가 의도적으로 값의 타입을 변환하는 것을 말하고, 암묵적 형변환은 개발자의 의도와는 상관 없이 표현식을 평가하는 도중에 JavaScript 엔진에 의해 암묵적으로 값이 ...

1. React의 장점에 대해 아는대로 말씀해주세요. React는 컴포넌트 단위로 화면을 구성하므로, 기능별로 컴포넌트를 나누어 관리하기 쉽고 재사용성이 높습니다. React는 Virtual DOM을 사용하여 DOM 업데이트를 하기 때문에 DOM 처리 연산 회수가 최소화되어 업데이트 속도가 빠릅니다. React는 커뮤니티가 크고, React와 관련된 다양...

1. 생명 주기 메서드에 대해 설명해주세요. 컴포넌트 생명주기는 컴포넌트가 생성되고 사용되고 소멸될 때까지의 과정을 말합니다. 이 생명주기 안에서 특정 시점에 자동으로 호출되는 메서드를 생명주기 메서드라고 합니다. 1.1 생명 주기 메서드의 종류에 대해 설명해주세요. 생명 주기 메서드는 componentDidMount, componentDidupdat...

1. React에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지 설명해주세요. React는 상태를 불변성을 유지하면서 변경시킵니다. 그러므로 상태 정보를 가진 객체의 주소값이 변경되면 변화 되었다는 것을 알 수 있습니다. 2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요. 제어 컴포넌트는 React에서 값이 제어됩니다. 그래서 새로...

1. key props를 사용하는 이유에 대해 설명해주세요. 배열에서 요소를 다른 형제 요소들과 구분짓기 위해 key props를 사용합니다. 1.1 key props의 규칙에 대해 설명해주세요. key는 형제 요소들 사이에서 고유해야 합니다. 다른 배열의 요소에 같은 key를 사용해도 됩니다. key는 바뀌지 않아야 합니다. 렌더링하는...

1. Describe what 'this' is in JavaScrtipt. this is a self reference variable. this points the object including itself or the object creating an instance. this binding is connecting between this and o...

1. What is the difference between ‘==’ and ‘===’? the equality operator and the strict equality operator check whether their two operands are equal and return a boolean result. While the equality ope...

1. TypeScript를 사용하는 이유에 대해 설명해주세요. TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있다는 장점이 있습니다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있으므로, 코드의 가독성을 높이고 예측할 수 있게 하여 디버깅이 쉽습니다. TypeScript는 IDE에 타입 정보를 ...

1. Flux 패턴에 대해 알고 계신가요? flux 패턴은 단방향 데이터 흐름으로 애플리케이션을 만드는 아키텍쳐입니다. 먼저 사용자 입력을 기반으로 Action을 만들고 Dispatcher에 전달합니다. Dispatcher에서 Action에 대한 dispatch를 실행하여 Store의 데이터를 변경한 뒤 View에 반영합니다. 이러한 방식으로 데이터가 흐...

1. Webpack이 무엇인지, 어떤 문제를 해결하는지 설명해주세요. webpack은 다양한 모듈을 하나의 파일로 묶어주는 번들러입니다. wepack을 도입함으로써 식별자의 유효 범위 문제를 해결할 수 있습니다. 또한 여러 모듈을 하나의 파일로 묶어서 한번에 불러오기 때문에 로딩 속도가 빨라집니다. 2. Webpack의 loader, plugin에 대해...

1. Explain the difference between Async/Await and Promises. Syntax: Promises use a chaining syntax with '.then' and '.catch' to handle asynchronous operations. On the other hand, 'async/await' provid...

1. 브라우저 렌더링 과정에 대해 설명해보세요. (Critical Rendering Path) 브라우저는 HTML, CSS, JavaScript, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버에 요청하고 서버로부터 리소스들을 응답받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이...

1. 객체 지향형 프로그래밍(OOP)에 대해 설명해주세요. 객체 지향형 프로그래밍은 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다. 객체 지향형 프로그래밍에서 객체는 상태 데이터인 프로퍼티와 동작인 메서드를 가진 복합적인 자료구조입니다. 객체는 다른 객체와 메세지를 주고 받거나 데이터를 처리할 수 있습니다. 또한 다른 객체의 프로퍼티나 메...

1. 명령형 프로그래밍과 선언형 프로그래밍의 차이에 대해 설명해주세요. 명령형 프로그래밍은 프로그램이 어떻게 실행되는지에 중점을 두는 패러다임이고, 선언형 프로그래밍은 프로그램이 무엇을 하길 원하는지에 중점을 둔 패러다임입니다. 명령형 프로그래밍은 코드의 실행에 대해 단계별 과정을 묘사하기 때문에 코드가 더 많고 복잡해보여서 가독성이 떨어집니다. 반면에 ...

1. Atomic Design Pattern에 대해 알고 계신가요? 아토믹 디자인 패턴은 화학적 관점에서 영감을 얻은 디자인 시스템입니다. 모든 것은 atom으로 구성되어 있고 atom들이 서로 결합하여 molecule이 되고, molecule은 더 복잡한 organism으로 결합하여 궁극적으로 모든 물질을 생성합니다. 아토믹 디자인 패턴에서는 이 개념을...

1. Git이 무엇인지와 장점에 대해서 설명해주세요. git은 오픈 소스 버전 관리 시스템입니다. git은 서로 완전히 독립적인 여러 로컬 브랜치를 가질 수 있도록 허용하고 권장합니다. git의 장점 브랜치 간 이동이 자유롭습니다. 브랜치 별로 역할을 다르게 해서 역할별로 개발할 수 있습니다. 새로운 브랜치에서 실험하고, 잘 작동하면...

1. 크로스 브라우징에 대해 설명해주세요. 크로스 브라우징이란 표준 웹 기술을 채용하여 다른 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말합니다. 1.1 크로스 브라우징 이슈를 해결했던 경험을 말씀해주세요. range 태그의 모습이 브라우저별로 달...

1. 시간 복잡도가 무엇인지 설명해주세요. 시간 복잡도는 입력값의 크기가 증가함에 따른 알고리즘의 런타임 소요시간을 말합니다. 1.1 공간 복잡도가 무엇인지 설명해주세요. 공간 복잡도는 알고리즘 코드를 실행시키기 위해서 할당되어야 하는 메모리 크기를 말합니다. 1.2 Big O Notation이 무엇이고 왜 필요한가요? Big O Notation은...

1. 인증과 인가에 대해 설명해주세요. 인증은 사용자의 신원을 검증하는 프로세스이고, 인가는 사용자에게 특정 리소스에 접근할 수 있는 권한을 부여하는 프로세스입니다. 성공적인 인증이 된 후에 인가가 실행됩니다. 인증은 일반적으로 ID 토큰을 통해 정보를 전송하고, 인가는 Access 토큰 통해 정보를 전송합니다. 1.1 사용해본 인증 방식에 대해 설명해...

1. React에서 코드 재사용에 있어서 가장 많이 사용되는 방법이 컴포넌트를 통한 재사용이고, 커스텀 훅을 통한 재사용이 있는데 해당 방식의 차이점에 대해 설명해주세요. 컴포넌트을 통한 재사용은 UI 요소를 재사용하는 데 중점을 두는 반면, 훅을 통한 재사용은 범용적인 논리나 기능을 공유하는데 중점을 둡니다. 같은 로직을 여러 UI에서 사용하고 싶을 때...

1. Agile에 대해 설명해주세요. 애자일은 프로젝트의 생명 주기 동안 반복적인 개발을 하는 개방 방법론입니다. 애자일은 일정한 주기를 가지고 끊임없이 프로토 타입을 만들어내며 그때마다 필요한 요구 사항에 맞게 수정하여 개발해나가는 적응형 스타일이라고 할 수 있습니다. 애자일의 장점은 지속적으로 배포하므로 변경되는 요구사항에 따른 배포를 빠르게 할 수 ...

1. 웹 프로토콜에 대해 설명해주세요. 웹 프토토콜은 웹 클라이언트와 웹 서버 간의 통신 규약을 말합니다. 가장 기본 웹 프로토콜로 HTTP가 있습니다. HTTP와 함께 작동하는 다른 웹 프로토콜로 DNS, TCP/IP, WebSocket, FTP가 있습니다. DNS (Domain Name System) : 도메인 이름을 ...

1. React의 원리, 특징, 장단점에 대해 설명해주세요. React의 원리와 특징 React는 JavaScript UI 라이브러리입니다. React에서 컴포넌트라고 불리는 개별 조각을 사용하여 사용자의 인터페이스를 구현할 수 있습니다. React는 컴포넌트의 상태값이 변경했을 때, Virtual DOM을 사용하여 변경된 부분의 UI만 효율적...

1. CRP(Critical Rendering Path)에 대해 설명해주세요. Critical Rendering Path는 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 바꾸는 단계별 과정을 말합니다. critical rendering path는 DOM, CSSOM, render tree, layout을 포합니다. HTML을 ...

z-index가 무엇인지, 스태킹 컨텍스트(쌓임 맥락)이 형성되는 방식을 설명해 주세요. z-index는 position이 static이 아닌 요소와 그 후속 요소들 또는 flex 아이템들의 z축의 순서를 정하는 CSS property입니다. stacking context는 사용자를 기준으로 가상의 z 축을 따라 HTML 요소들을 3차원으로 개념화한 것입...

1. 브라우저 주소창에 URL을 입력하면 어떤 일이 발생하는지 설명해주세요(네트워크 + CRP) 브라우저 주소창에 URL을 입력합니다. 브라우저가 URL의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다. 캐시에 요청한 URL이 없으면, ISP의 DNS 서버가 DNS 쿼리로 URL을 호스팅하는 서버의 IP 주소를 찾습니다. 브라우저가 해당 서버와...

1. 함수 컴포넌트의 장점에 대해 설명해주세요. 함수 컴포넌트는 훅을 사용하여 상태 관리하므로 상태 관리 로직을 재사용하기 쉽고 유지보수하기 편합니다. 1.1 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpda...

1. HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요. HTML에서는 이벤트 핸들러를 문자열로 전달하는 반면에, React에서는 JSX를 사용하여 이벤트 핸들러를 함수로 전달합니다. HTML의 이벤트는 이벤트 핸들러에서 false를 반환하여 브라우저 기본 동작을 막을 수 있는 반면에, React의 이벤트는 이벤트 핸들러에서 preventDe...

1. 마진 병합 현상이 무엇인가요? 어떤 조건을 가지고 있어야 마진 병합이 되나요? 마진 병합은 여러 블록 요소 중 위쪽과 아래쪽 margin이 경우에 따라 단일 margin으로 결합되는 동작을 말합니다. 인접한 형제 요소 간의 margin은 서로 상쇄됩니다. 부모와 자식을 분리하는 컨텐츠가 없을 때 부모와 자식의 margin이 서로 상쇄...

1. 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요? react-router-dom 패키지입니다. router를 객체 형태로 손쉽게 구현할 수 있고, NavLink를 통해 Link가 활성화 상태의 스타일을 줄 수 있으며, useNavigate를 통해 다른 페이지로 이동할 수 있고, useLocation, useSearchParam를 ...

1. JavaScript의 Closure에 대해 설명해주세요. React에서는 Closure를 어디서 사용하고 있나요? JavaScript에서 중첩 함수가 외부 함수보다 더 오래 유지되는 경우, 중첩 함수는 상위 스코프인 외부 함수를 기억하고 있기 때문에 외부 함수의 변수를 참조할 수 있습니다. 이러한 중첩 함수를 closure라고 합니다. React의 ...

1. CSR과 SSR의 차이점은 무엇인가요? CSR는 Client Side Rendering의 줄임말로 클라이언트에서 페이지를 렌더링하는 것을 말합니다. 서버에 페이지에 필요한 데이터만 요청하므로 새로고침이 발생하지 않고, 요청받은 데이터를 바탕으로 클라이언트에서 페이지를 렌더링합니다. SSR은 Server Side Rendering의 줄임말로 서버에서 ...

1. 사용자와 애플리케이션은 이벤트, 이벤트 핸들러를 사용해서 상호작용할 수 있는데, 이 과정에 대해 설명해주세요. (브라우저 이벤트 발생 과정) 브라우저가 사용자의 액션을 감지하여 이벤트가 발생시킵니다. 이벤트가 발생하면 브라우저는 이벤트 객체를 만듭니다. 이벤트 객체에 이벤트에 대한 상세한 정보를 넣은 다음, 해당 이벤트 핸들러에 이벤트 객체를 인수 ...

1. 웹 접근성과 관련하여 고려해야 할 요소를 설명해주세요. 이와 관련하여 경험이 있나요? 웹 접근성과 관련하여 고려해야 할 요소로 image 태그의 alt 속성, 페이지 내의 heading 태그, 시맨틱 태그, aria 관련 속성 등이 있습니다. 저는 웹 접근성을 위해 img 태그에 alt 속성을 넣어주어 스크린 리더기가 대체텍스트를 읽을 수 있...

1. React의 컴포넌트가 화면에 그려지기까지의 렌더링 과정을 단계(phases)별로 설명해주세요. 컴포넌트는 화면에 그려지기까지 렌더링을 유발하는 trigger 단계, 컴포넌트를 렌더링하는 render 단계, DOM에 반영하는 commit 단계로 구성됩니다. trigger 단계에서 컴포넌트의 첫 렌더링일 때와 컴포너트의 상태가 업데이트했을 때...

1 React-Query를 사용해보셨나요? 네, 서버의 상태를 관리할 때 React-Query를 사용했습니다. 1.1 React-Query에 대해 설명해주세요. React-Query는 React를 위한 비동기 상태 관리 라이브러리입니다. React-Query는 웹 애플리케이션의 서버 상태를 fetching, caching, 동기화, 업데이트 해줍니다....

1. useEffect에 있는 디펜던시 배열의 역할과 의미에 대해서 설명하고 주의해야 할 점에 대해서 설명해보세요. useEffect의 dependencies 배열은 effect의 실행 여부를 결정해줍니다. dependencies 배열의 요소가 변경되었을 때 effect가 실행됩니다. 주의해야할 점은 dependencies 배열이 들어갈 2 번째 매개변수...

1. 본인이 생각하는 좋은 컴포넌트란 어떤 것인가요? 최근에 작성한 컴포넌트 중에서 좋은 컴포넌트라고 생각될 만한게 있나요? 어떤 이유로 그렇게 생각하시나요? 제가 생각하는 좋은 컴포넌트는 하나의 책임을 가지고 있으면서 재사용하기 쉽도록 비지니스 관련 로직을 props로 받는 컴포넌트입니다. 그 이유는 하나의 책임을 가지고 있기 때문에 유지 보수...

1. CSR이 SEO-friendly하지 않은 이유를 브라우저 렌더링과 연관지어 설명해주세요. CSR은 처음에 서버로부터 리소스를 받아올 때 먼저 빈 HTML을 먼저 받아오고 그 후 JavaScritpt, CSS 파일을 받은 후에 페이지가 채워지기 때문에, 검색엔진 크롤러가 페이지에 방문했을 때 빈 페이지만 보이므로 검색 노출이 되지 않아서 SEO-fri...

1. 최근에 React 18에서 많은 변화가 있었습니다. 혹시 어떤 것들이 추가 되었는지 내용이나 방향성에 대해서 대답해주실수 있으실까요? React 18 버젼부터 상태 업데이트에 대한 자동 배칭을 지원합니다. React 18 버전 이전에는 이벤트 핸들러 내부에서 발생하는 상태 업데이트만 배치 처리를 지원한 반면에, React 18 버전부터는 상태...

1. React가 렌더링을 한다고 했는데, 어떤 경우에 렌더링이 발생하는지 설명해주세요. 컴포넌트의 state나 props가 변경되었을 때 리렌더링이 발생합니다. 2. React로 개발을 하다보면 자식 컴포넌트가 업데이트가 되었을때 부모 컴포넌트도 같이 업데이트를 해야하는 경우가 발생합니다. 이때는 어떤 방식을 사용할 수 있을까요? 자식 컴포넌트에 부...

1. preload, prefetch, preconnect의 차이를 설명해주세요. preload, preconnect, prefetch 모두 리소스를 빠르게 가져와서 렌더링 과정을 앞당기는데 사용됩니다. preload는 리소스의 우선순위를 높여 초기 렌더링 과정에 필요한 리소스를 빠르게 불러올 때 사용합니다. preconnect는 해당 출처...

1. 패키지 매니저란 무엇이고 어떤 것들을 사용해보셨는지 설명해주세요. package manager는 package를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 도구입니다. 저는 package manager로 npm, yarn berry를 사용해봤습니다. NPM과 Yarn에 차이에 대해 설명해주세요. NPM은 Node Package Man...

1. 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까? 점진적 향상법과 우아한 성능 저하법은 접근성을 위해 웹을 디자인하는 방식을 말합니다. 점진적 향상법은 레이어를 하나씩 쌓아 올리면서 단순한 것부터 복잡한 것까지 동작하도록 발전시키는 방법입니다....

1. Float가 어떻게 동작하는지 설명해주세요. float된 요소는 문서의 정상 흐름에서 벗어나서 요소를 포함하고 있는 컨테이너 박스의 끝에 도달하거나 또 다른 float 요소를 만날 때까지 왼쪽이나 오른쪽으로 이동합니다. 요소가 문서의 정상 흐름에서 벗어난다는 것은 기본적으로 페이지의 다른 요소가 해당 요소의 존재를 더 이상 알지 못하므로 해당 요소에...

1. 웹 접근성의 중요성과 주요 원칙은 무엇인가요? 웹 접근성은 다양한 장치, 환경, 장애를 가진 사람도 웹을 이용할 수 있도록 서비스 및 컨텐츠 제작을 하는 것입니다. 웹 접근성은 모든 사람들이 차별 없이 정보 및 서비스를 손쉽게 활용할 수 있게 한다는 점에서 중요합니다. 한국현 웹 컨텐츠 접근성 지침은 크게 4가지 원칙을 가지고 있습니다. ...

1. 개발을 하면서 새로운 기술이나 도구에 도전해본 경험이 있으신가요? 네, 이번 프로젝트를 진행하면서 이전 프로젝트에서 사용했던 styled-components 대신에 tailwind CSS를 사용했습니다. 초반에는 tailwind CSS의 문법이 생소해서 사용하는데 시간이 걸렸지만, 익숙해지니 스타일에 대한 클래스명이나 컴포넌트명을 짓지 않아도 되서 ...

1. 어제/이번주에 무엇을 공부하셨나요? CSS Box model에 대해 복습했습니다. 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. 하나의 박스는 네 영역인 content, padding, border, margin으로 이루어집니다. CSS에는 크게 블록...

1. 브라우저가 한 번에 1개의 도메인에서 내려받는 자원은 몇 개인가요? 대부분의 브라우저는 한 도메인에서 내려 받을 수 있는 최대 자원 개수는 6개입니다. 1.1 예외에는 어떤 것들이 있나요? 한 도메인에서 내려 받을 수 있는 최대 자원 개수를 브라우저 설정에서 변경할 수 있습니다. 또한 한 도메인을 여러 개의 서브도메인으로 쪼개는 domain sh...

1. doctype이 무엇을 하는 것인가요? 브라우저는 doctype을 사용하여 페이지에서 quirks 모드를 사용할지 standard 모드를 사용할지 결정합니다. quirks 모드의 레이아웃은 W3C에서 만든 웹 표준이 적용되기 전 Netscape Navigator와 Internet Explorer 4의 동작을 흉내냅니다. stanard 모드의 ...

1. OAuth가 무엇인지와 왜 사용하는지를 설명해주세요. OAuth는 구글, 페이스북, 트위터와 같은 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제 3자 클라이언트가 사용자의 접근 권한을 위임받을 수 있는 인증 표준 프로토콜을 말합니다. 기존의 클라이언트-서버 모델의 문제점 기존의 클라이언트-서버 모델에서 제 3자 클라이언트가 제한된...

1. class와 id의 차이점에 관해서 설명해주세요. id selector는 중복될 수 없는 유일한 값이고, class selector는 중복될 수 있는 값입니다. id selector는 중복될 수 없는 값이므로 요소를 특정할 때 주로 사용합니다. class selector는 중복될 수 있으므로 여러 개의 요소에서 스타일을 재사용할 수 있습니다. cla...