Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned position CSS position에 대해 설명합니다. position ? - CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top , right , bottom , left 속성이 요소를 배치할 최종 위치를 결정합니다. 구문 - static : 기본값으로 요소들이 겹치지 않고 상 -> 하로 배치 됩니다. - relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치합니다. - absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치합니다. - fixed : 웹 브라우저 화면 전체를 기준으로 배치합니다. 스크롤을 하더라도 위치가 고정되는 특징이 있습니..

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 ❤️‍🔥TIL : Today I Learned HTTP & HTTP messeage HTTP에 대해 설명하고, HTTP 메세지 구조에 대해 설명합니다. HTTP란? - HTTP는 HyperText Transfer Protocol의 약자로 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. - 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부릅니다. 특징: 비연결성, 무상태성 비연결성: 리소스 응답이 정상적으로 받아지면 연결을 끊음 → 리소스 요청 때마다 연결해야하는 오버헤드 비용 ..

❤️‍🔥TIL : Today I Learned DOM DOM (Document Object Model )은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 1. 노드 - HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 위와 같은 요소들의 집합으로 이뤄지며, 요소 간에는 중첩 관계에 의해 계층적인 부자(부모)관계가 형성 된다. 이러한 관계를 반영하여 모든 노드 객체들을 트리 자료구조로 구성하며 이것을 DOM 또는 DOM 트리라고 한다. 최상위의 부..

❤️‍🔥TIL : Today I Learned React v18.0 원티드 프리온보딩 프론트엔드 챌린지 질문에 대한 답변입니다. 1. React Lifecycle에 대해 간단히 설명해주세요 React Lifecycle은 컴포넌트 생성, 업데이트, 소멸할 때 일어나는 과정입니다. ( Mount - Update - Unmount ) Mount componentDidMount : 컴포넌트가 마운트 된 후에 호출됩니다. DOM 노드에 접근하거나 외부 데이터를 가져오는 등의 초기화 작업에 사용됩니다 Upadate componentDidUpdate: 컴포넌트가 업데이트 된 후에 호출됩니다. 이전과 현재의 props나 state를 비교하여 필요한 업데이트를 수행합니다. Unmount componentWillUnmo..

❤️‍🔥TIL : Today I Learned Cache 캐싱은 자주 사용하는 데이터를 메모리나 디스크에 저장해 성능을 향상 시키기 위해 소프트웨어 개발에 사용되는 기술입니다. 캐시(cache) 의 장점 - 더 빠른 성능 : 캐싱은 데이터를 가져오고 처리하는 데 필요한 시간을 줄여 성능을 크게 향상 시킬 수 있습니다. - 서버 부하 감소 : 데이터를 캐싱함으로써 서버는 더 적은 수의 요청을 처리할 수 있으므로 서버의 부하를 줄이고 잠재적으로 비용을 낮출 수 있습니다. - 확장성 증대 : 캐싱은 서버의 부하가 줄어들고 성능이 향상되어 애플리캐이션을 개발하는데 있어 더욱 범위를 확장해 개발 할 수 있겠습니다. 캐시(cache) 의 단점 - 캐시 무효화 : 캐싱의 가장 큰 문제중 하나는 캐시를 무효화하고 새 ..

❤️‍🔥TIL : Today I Learned 프레임워크와 라이브러리 프레임워크란 무엇이고 라이브러리란 무엇일까 둘의 차이가 뭘까 프레임워크란? 소프트웨어 특정 문제를 해결하기 위해 상호 협력하는 클래스와 인터페이스의 집합 - 프레임워크는 뼈대나 기반구조를 뜻하는데, application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공합니다. 그래서 뼈대 위에 우리가 코드를 작성해 application을 완성 시켜야 합니다. 라이브러리란? 단순 활용이 가능한 도구들의 집합 - 라이브러리는 특정 기능에 대한 도구나 함수들을 모은 집합입니다. 또 우리가 개발하는데 필요한 것들을 모아둔 것 입니다. 개발자라면 누구나 한번쯤은 써봤을 것이고, 자기도 모..

❤️‍🔥TIL : Today I Learned 스프레드 문법 하나로 뭉쳐있는 여러 값들을 개별적인 값들의 목록으로 만든다. 스프레드 문법 - ES6에서 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. - 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다. console.log( ...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log( ...'Hello'); // H e l l o ..

❤️‍🔥TIL : Today I Learned parameter와 argument의 차이 Parameter : 매개변수, Argument : 인자, 둘 다 변수의 한 종류이다. Parameter (매개 변수)란? - 함수 선언의 일부로 나열되는 변수이며, 호출될 때 함수에 전달 될 것으로 예상되는 값을 나타낸다. Argument (인수)란? - 호출될 때 함수에 전달되는 실제 값 이다. 예시 function plus(x, y)에서 x와 y는 매개변수 이다. plus(2, 3)으로 호출되면 2와 3은 함수에 전달되는 인수이다. - 함수가 선언될 때 괄호 안에 하나 이상의 매개변수를 포함 할 수 있다. -매개변수는 호출 시 함수에 전달되는 값에 대한 자리 표시자 역할을 한다 최종 정리 Prameter는 함..