본문 바로가기

📂 기술 면접20

React의 props와 state에 대해 설명해 주세요. 👩🏻‍💻 React에서 props와 state의 차이점은 무엇인가요? 💁🏻‍♀️ 요약하자면 , props와 state는 모두 JavaScript의 객체이며 두 객체 모두 렌더링 후 결과물에 영향을 주는 정보들을 가지고 있지만, 한 가지 차이가 있습니다. props는 외부로부터 전달받은 값으로 변할 수 없는 값인 반면, state는 함수 컴포넌트 내부에서 변화하는 값입니다. 각 특징으로는, (1) props - React에서 컴포넌트는 부모 컴포넌트로부터 props를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가합니다. - 데이터의 뿌리가 자기 자신이 아닌, 즉 외부로부터 전달받기에 함부로 변하지 않는 값인 읽기 전용 값입니다. (2) state - 자기 자신의 컴포넌트에서 만들어 낸 데이터이.. 2023. 4. 4.

JavaScript의 스코프에 대해 설명해 주세요. 👩🏻‍💻 스코프에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 스코프는 변수에 접근할 수 있는 범위를 의미합니다. 자바스크립트 스코프에는 두 가지 타입이 있는데, 하나는 global(전역)과 local(지역) 입니다. 두 가지 차이 전역 스코프는 말그대로 전역에 선언되어있어 어느 곳에서든 해당 변수에 접근할 수 있다는 의미이며, 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없다는 의미 입니다. 함수 스코프 자바스크립트에서는 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하는데요. 이때 함수 몸체 안에서 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있으며 이를 함수 스코프라고 합니다. 바로 함수 스코프가 지역 스코프의 예시라고 할 수 있습니다. 중요한.. 2023. 3. 13.

CSS box model에 대해서 설명해 주세요. 👩🏻‍💻 CSS box model에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , HTML 요소는 박스 영역의 형태로 되어 있는데, 이를 디자인적으로 표현하기 위해 box model 이라는 명칭을 붙여 놓은 것입니다. 이 박스는 content, padding, border, margin 총 4가지 요소로 구성됩니다. Content 요소의 텍스트나 이미지 등 HTML 태그 사이에 담긴 내용이 표현되는 영역입니다. width, height 프로퍼티를 갖습니다. Padding 테두리 안쪽에 위치하는 요소의 '내부 여백' 영역이며, border와 content 사이에 위치합니다. 기본적으로 투명색입니다. Border 테두리 영역으로, 박스의 경계를 표시하는 역할을 합니다. Margin 테두리 바깥에 위치하는 .. 2023. 3. 13.

HTML의 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 👩🏻‍💻 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 고유성의 차이 입니다. id는 고유한 값이므로, id를 가진 요소들 또한 고유하기 때문에 하나의 HTML 요소에만 사용할 수 있습니다. 이에 반해 class는 고유하지 않으므로 같은 class name을 여러 요소에 사용하는 것이 가능합니다. 더 자세히 설명하자면, id란 identification 즉 구별/식별 하고자 하기에 해당 요소가 '유일함'을 확인할 수 있는 수단입니다. 우리에게 주어지는 주민등록번호(identification number)과도 같다고 생각하면 됩니다. 마치 getElementById 메소드는 있어도 getElementsById는 없는 것처럼 말입니다. 협업 시에도 중요 id 값이 같은.. 2023. 3. 12.

HTML의 <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요? 👩🏻‍💻 요소는 왜 요소의 자식 요소여야만 하나요? home1 home2 home3 home4 💁🏻‍♀️ 요약하자면 , 요소는 말 그대로 list의 item들을 보여주기 위한 요소 이기에, 목록을 담는 요소의 자식 요소여야 합니다. 구슬과 주머니 요소는 주머니고, 요소는 주머니에 담긴 구슬들이라고 보면 됩니다. 따라서 주머니 안에 구슬인 가 담겨야 합니다. 협업 시 특히 중요 화면 상으로는 문제가 없어 보이더라도, 요소와 요소 각각의 의미에 맞게 sementic하게 HTML을 작성해야 협업 시 다른 개발자가 보더라도 쉽게 이해할 수 있기 때문에 위와 같은 규칙을 지키는 것이 중요합니다. 📎 내용 참조 - velog: 기술 면접 준비 - velog: Section 1 회고 2023. 3. 12.

일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? 👩🏻‍💻 일반적으로 CSS를 불러오기 위해 요소를 💁🏻‍♀️ 요약하자면 , CSS 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)을 향상시키기 때문이며, 요소가 요소가 끝나기 직전에 위치하는 경우, HTML과 CSS 로딩이 끝난 직후에 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있습니다. CSS 일반적으로 HTML과 CSS 정보가 담긴 정보들이 우선적 점진적으로 렌더링되기 때문에 유저에게 최대한 빠르게 정보가 담긴 화면을 전달할 수 있습니다. 만약 CSS 요소를 document의 위가 아닌 아래에 위치시킨다면, 몇몇 브라우저는 스타일이 변경될 때 페이지 요소를 처음부터 다시 그리는 것을 피하기 위해 점진적 .. 2023. 3. 12.

undefined와 null의 차이를 설명해 보세요. 👩🏻‍💻 undefined와 null의 차이를 설명해 보세요. 코딩을 하다보면 불분명한 값으로 추정되는 undefined와 null이 등장합니다. 그런데 이 둘의 의미는 각각 무엇이며, 각각 어떨 때 출력되는 것일까요? 차이점을 명확하게 설명해 주세요. 💁🏻‍♀️ 요약하자면 , undefined는 변수를 선언하고 값을 할당하지 않은 상태이며, null은 변수를 선언하고 빈 값을 할당한 상태 입니다. JavaScript에서 undefined와 null 둘 모두 개별적으로 아무 것도 나타내지 않는다는 공통점이 있으나, undefined는 암시적이고, null은 명시적이라는 것이 가장 큰 차이점입니다. undefined는 아무것도 모르는 경우를 암시적으로 나타내고, null은 "값 없음"을 명시적으로 딱 나타.. 2023. 3. 5.

HTML, CSS, JavaScript 차이점 간단히 알아보기 웹 페이지 제작을 집을 만든다고 가정해 봅시다. 1. HTML (Hyper Text Markup Language) 웹 페이지의 구조를 짜는 마크업 언어다. 집을 짓기 위해 도면을 그린다고 생각하면 된다. 마크업 언어란? 태그는 원래 텍스트와는 별개로 원고의 교정부호나 주석을 표현하기 위한 것이었으나, 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라고 하는데, 일반적으로 데이터를 기술하는 정도로만 사용 되기 때문에 자바스크립트와 같은 프로그래밍 언어와는 구별된다. (참고: 위키피디아) 예를 들어, 웹사이트 상의 로그인 페이지를 만든다고 해보자. 그렇다면 기본적으로 아이디와 비밀번호를 입력할 수 있는 입력폼이 필요하겠다. 또한 로그인으로 이어지는 버.. 2023. 2. 27.

이전 1 2 다음

티스토리툴바