그의 시작 그의 시작

1. Semantic HTML의 필요성을 예시로 들어 설명해주세요. Semantic HTML은 구조를 만드는 것을 넘어 의미를 갖게 만드는데 필요합니다. 시맨틱 요소의 예시로는 header, main, nav, footer tag 등이 있습니다. HTML에는 많은 종류의 요소가 있지만, div와 span tag 두 가지 요소만 알아도 충분히 화면의 구조를 만들 수 있습니다. 하지만, 이 두 요소의 이름에는 의미가 없기 때문에 요소의 이름으로는 각 요소가 어떤 역할을 하는지 알 수 없습니다. 하지만 시맨틱 요소를 사용하면 요소의 이름만 보고도 해당 요소가 어떤 역할을 하는지, 요소가 가진 의미를 통해 파악할 수 있게 됩니다. 시맨틱한 HTML을 작성하면 개발자간 소통, 검색 효율성, 웹 접근성에 효과를 볼..

1. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 순수 함수란 사이드 이펙트를 일으키지 않는 함수를 의미합니다. 즉 동일한 input에 대해 동일한 output을 리턴합니다. 사이드 이펙트가 일어났을 때 어떤 동작이 일어날지 예측할 수 없기 때문에 순수 함수를 지향해야 합니다. 예기치못한 사이드이펙트를 방지하기 위해서는 불변성을 지켜야 됩니다. (불변성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미합니다.) 순수 함수의 특징 중 하나는 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장합니다. 그래서 예측 가능한 함수이기도 합니다. 순수 함수가 아닌 함수의 예: Math.random(), fetch API를 이용한 AJAX 요청이 있습니다. 항상 똑..

1. useRef가 필요한 상황을 예시를 들어 설명해주세요 React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있지만, React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다든지, 스크롤바 위치를 가져오거나 설정해야된다든지, 또는 포커스를 설정해줘야된다든지 등 정말 다양한 상황이 있을 것입니다. →React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다. 2. Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요. Expires : 쿠키가 삭제되는 만료 날짜를 설정합니다..

1. require와 import 차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? require() CommonJS를 사용하는node.js문이지만 import()는 ES6에서만 사용됩니다. require()는 파일 (어휘가 아님)에 들어있는 곳에 남아 있으며import()는 항상 맨 위로 이동합니다. require()는 프로그램의 어느 지점에서나 호출 할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 있습니다. 마지막으로 require()문을 사용하는 모든 파일은.js파일로 저장되는 반면 import()가있는 파일은.mjs파일로만 저장할 수 있습니다. 일반적으로 import()는 사용자가 필요한 모듈 부분 만 선택하고로드 할 수 있기 때문에 더 선호됩니다. require()보다..

1. this가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? (1) This 동작 원리 this는 현재 실행 중인 함수의 객체를 참조하고 this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다. 따라서 this의 값은 실행 컨텍스트에 따라 동적으로 결정되며, 함수를 호출하는 방법에 따라 달라집니다. 1. 일반 함수 호출에서 this는 전역 객체를 가리킨다. 2. 객체의 메소드로 호출된 함수에서 this는 해당 객체를 가리킨다. 3. 생성자 함수에서 this는 생성된 객체를 가리킨다. 4. call() 또는 apply() 메소드를 사용하여 명시적으로 this를 지정할 수 있다. (2) This의 용법 객체의 메소드에서 this를 사용하여 ..

1. HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜입니다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 됩니다. HTTP 메세지에는 Request Message와 Response Message가 있습니다. Request Message 가장 첫 번째 라인은 Request Line 이라고 하고, 2번째 줄에서 6번째 줄까지는 Request Header라고 합니다. 그리고 이 Line과 Header를 다 합쳐서 Request Message..

1. 프레임워크와 라이브러리 차이점에 대해 설명해주세요. 프레임워크는 개발자가 개발을 쉽게 할 수 있도록 뼈대를 제공해준다고 생각하면 되고 ex) next.js , spring 라이브러리는 개발에 필요한 것들을 미리 구현해놓은 도구라고 할 수 있습니다. ex) react swiper 프레임워크는 라이브러리를 포함합니다. 프레임워크 위에 개발자가 작성한 애플리케이션 코드가 올라가게 되고, 이 애플리케이션 코드에서는 라이브러리를 호출할 수 있습니다. 프레임워크와 라이브러리의 가장 큰 차이점은 제어 흐름이 어디에 있는가입니다. 프레임워크는 전체적인 흐름을 쥐고 있으며 애플리케이션의 코드는 프레임워크에 의해 사용됩니다. 애플리케이션 코드는 프레임워크가 짜놓은 틀 안에서 수동적으로 동작하기 때문에 제어의 흐름은 ..