본문 바로가기

전체 글

(86)
230407 📌요소는 왜 요소의 자식 요소여야만 하나요? li태그는 'list item'으로 목록을 만드는 태그이다. 그래서 목록을 나타내는 ul 태그의 자식 요소로 들어가야 한다. 📌HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요 block 요소 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함할 수 있다. 가로 전체 넓이를 가진다. (기본값 100%) 줄바꿈이 일어난다. 크기 지정 가능 수직으로 쌓인다. 상하좌우 여백 사용 가능. (margin, padding) 레이아웃을 위한 용도로 사용 block 요소 종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcap..
230406 📌Semantic HTML의 필요성을 예시를 들어 설명해주세요. Semantic HTML이란? semantic 단어 뜻은 '의미의', '의미론적인' 이다. 따라서, Semantic HTML은 '의미론적 HTML'이 된다. HTML에서 Semantic element는 브라우저와 개발자 모두에게 명확하게 의미를 전달하는 요소(element). Semantic Tag란? 의미가 있는 태그. non-semantic semantic 더 자세한 건 여기서 참고 Semantic HTML의 필요성 검색엔진 최적화 (SEO) 검색엔진이 알맞은 결과를 내기 위해 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석하는데, 의미 있는 태그를 사용하면 그렇지 않은 태그를 사용했을 때 보다 더 적절한 키워드를 추출 할 수 있다...
230405 📌순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요. 순수함수란? 동일한 입력에는 항상 같은 값을 반환해야 하는 함수 side effect를 만들지 않으므로 외부 상태를 바꿀 수 없다. 사이드 이펙트(side effect)란? 의도하지 않게 외부 변수를 참조하거나 외부 변수를 변경하는 모든 종류의 코드를 의미. 즉, 함수 외부의 값, 상태를 변경시키는 것 순수 함수란 동일한 입력에 대해 언제나 동일한 결과를 리턴하는 함수이며, 사이드 이펙트를 일으키지 않는 함수이다. 변화를 예측할 수 없기 때문에 예기치 못한 오류를 발생시킬 가능성이 있다. 리액트에서는 단방향 데이터 흐름을 유지하기 위해 리액트 컴포넌트의 props를 직접 변경하지 않는 방법으로 순수 함수를 지향하고 있다. 💡참고 더보..
230404 📌useRef가 필요한 상황을 예시를 들어 설명해 주세요. useRef란? React 공식 문서에 따르면, .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook Ref는 reference, 즉 참조를 뜻함 useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 사용예시 컴포넌트에 focus를 위치시킬 필요가 있는 경우 특정 DOM에 접근해 focus를 주고 싶을 때 쓸 수 있다. const 변수명 = use..
230403 📌require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? 둘 다 모듈 키워드. 외부 파일이나 라이브러리를 불러올 때 사용 Babel같은 ES6 코드 변환 도구를 사용할 수 없다면 require 키워드를 사용해야함 require NodeJs에서 사용되고 있는 CommonJS 키워드 Ruby 언어 스타일과 비슷함 파일에 들어있는 곳에 남아있음 프로그램의 어느 지점에서나 호출 할 수 있음 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 함. 여러개의 객체를 내보낼 경우 -> export.변수의 개별 속성으로 할당, 딱 하나의 객체를 내보낼 경우 -> module.exports = 객체 자체에 할당. require로 가져오고, esports/module.exports로 내..
230331 📌this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? this란? 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. 현재 실행 중인 함수의 객체를 참조. this의 값은 함수 호출 방식에 따라 달라진다. this의 동작 원리 일반 함수 호출에서 this는 전역 객체를 가리킨다. 객체의 메소드로 호출된 함수에서 this는 해당 객체를 가리킨다. 생성자 함수에서 this는 생성된 객체를 가리킨다. call() 또는 apply() , bind() 메소드 사용 시 메소드에 첫 번째 인수로 전달하는 객체에 바인딩된다. 💡참고 더보기 https://velog.io/@wjddms0501/This-%EB%8F%99%EC%9E%..
230330 📌HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요. HTTP란? HyperText Transfer Protocol의 줄임말, 직역하면 하이퍼텍스트 전달 프로토콜 하이퍼텍스트는 인터넷 사용자가 필요한 정보의 자유로운 검색을 가능하도록 해주는 텍스트 전개 방식 HTTP는 이러한 하이퍼텍스트 방식의 정보를 교환하기 위한 하나의 규칙. 즉, HTML가 같은 문서를 전송하기 위해 사용되며 OSI 7 계층에서 응용 계층에 있는 프로토콜이다. 전통적인 클라이언트-서버 아키텍처 모델에서 클라이언트가 HTTP 메시지 양식에 맞춰 요청을 보내면, 이에 서버는 HTTP 메시지 양식에 맞춰 응답을 한다. 특정 상태를 유지하지 않는 무상태성(Stateless) HTTP 메세지 구조 클라..
230329 📌프레임워크와 라이브러리 차이점에 대해 설명해주세요. 프레임워크 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 커넥션 등의 기능등을 위해 뼈대(구조)를 제공 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합 즉, 특정 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램 예시 Java -> Spring Python -> Django JavaScript -> Node.js PHP -> Laravel 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임 여기에는 구성 데이터, 문서, 도움말 자료, 메시지 틀, 미리 작성된 코드, 함수, 클래스, 값, 자료형 사양을 포함 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는..