Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned semantic tag 시멘틱(semantic) 태그 의미가 부여된 태그라는 뜻 입니다. 사용해야 하는 이유와 종류를 알아봅니다. 시맨틱 태그란? - HTML 태그에서 가장 기본적으로 쓰이는 태그는 태그 입니다. - HTML5 부터 등장 했습니다. 예를 들자면 같은 태그가 있습니다. 이 태그를 보면 직관적으로 태그라는 것을 알 수 있습니다. 시맨틱 태그를 사용해야 하는 이유 - HTML 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않고 태그를 활용하여도 무방합니다. 하지만 우리가 시멘틱 태그를 사용해야 하는 이유를 설명 드리겠습니다. 1. 가독성과 유지보수가 쉬워집니다. 모든 태그가 div라고 한다면 한눈에 파악하기 어렵고 태그 영역이 햇갈립니다. 2...

❤️‍🔥TIL : Today I Learned Stack, Queue 자료구조인 스택과 큐를 비교하여 설명합니다. Stack - 스택은 직역하면 더미, 퇴적, 쌓아 올림 이라는 뜻을 가지고 있다. 자료를 쌓았다고 하여 stack이다. - 스택은 후입선출(LIFO) 구조를 갖는 자료구조 이다. 마지막으로 추가된 요소가 제일 먼저 제거된다. - 자바스크립트에서는 배열을 이용하여 push 메서드를 사용하여 요소를 추가하고 pop 메서드를 사용하여 요소를 제거할 수 있습니다. - Javascript 에서 함수 실행 콘텍스트들이 쌓이는 Call stack 또는 브라우저의 방문 기록이 쌓이는 History stack 이 대표적이다. + 스택은 서로 관계가 있는 여러 작업을 연달아 수행하면서 이전의 작업 내용을 저..

❤️‍🔥TIL : Today I Learned props, state 리액트(React)에서 props와 state는 둘 다 컴포넌트(Component)에서 데이터를 다루는 데 사용되는 중요한 요소입니다. 그러나 이 둘은 약간의 차이점이 있습니다. Props 란? - props는 컴포넌트에서 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. props는 읽기 전용(Read-only)이며, 부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 변경할 수 없습니다. + ESLint State 란? - state는 컴포넌트 내부에서 관리되는 데이터입니다. 컴포넌트가 렌더링될 때 생성되며, 컴포넌트의 생명주기(Lifecycle) 동안 변경될 수 있습니다. sta..

❤️‍🔥TIL : Today I Learned 순수 함수 순수 함수를 설명하고, 불변성과 사이드 이펙트를 부가적으로 설명합니다. 순수 함수란? 자바스크립트에서 순수함수(Pure Function)는 입력값에 대해 항상 동일한 결과값을 반환하고, 함수 내부에서 외부에 영향을 주는 부작용(Side Effect)이 없는 함수를 말합니다. 즉, 함수의 실행에 어떤 외부 환경도 영향을 주지 않으며, 실행 결과도 항상 일정합니다. + 순수함수의 특징은 불변성(Immutability)과 사이드 이펙트 부재(Side Effect-Free)가 있습니다. 불변성 (immutability) - 순수함수는 입력이나 함수 내부의 상태를 변경하지 않습니다. 함수가 실행되는 동안에는 함수 내부의 값들이 변하지 않고, 입력으로 받은 ..

❤️‍🔥TIL : Today I Learned 연결 리스트 링크드 리스트라고 부르기도 하고, 연결 리스트라고 부르기도 합니다. 연결 리스트란? - 연결리스트(Linked List)는 리스트의 항목들을 노드(node)에 저장하는 데이터 구조이다. - 각 노드는 데이터 필드와 다른 노드의 주소를 포함하는 링크 필드로 구성된다. - 연결 리스트를 사용하는 이점에는 쉬운 삽입 및 삭제 처리 기능, 크기 제한 없음, 비연속 메모리 공간 사용 기능 등이 있다. - 그러나 구현이 까다롭고 번거로우며 오류가 발생하기 쉽다. 데이터 필드 : 리스트의 원소, 즉 데이터 값을 저장하는 곳 링크 필드 : 다른 노드의 주소값을 저장하는 장소(포인터) Linked List에서 가장 앞 쪽 시작부분을 Head, 가장 마지막 부분..

❤️‍🔥TIL : Today I Learned Expires, Max-Age 본 포스팅에서는 프론트엔드 개발자가 알아야 할 가장 중요하다고 생각하는 두 가지 옵션만 설명합니다. 쿠키 생선 옵션 쿠키는 생성할 때 몇가지 옵션을 줄 수 있다. + HTTP 헤더에 들어간 쿠키 옵션 예제 Set-Cookie: =; Expires= Set-Cookie: =; Max-Age= Set-Cookie 헤더의 쿠키값 설정 뒤에 ; 옵션1=xx; 옵션2=yy 형태로 적용이 가능하다. Expires=(Optional) 쿠키가 언제까지 유효한지 명시한다. HTTP-date timestamp 형식에 맞추어야 한다. 자바스크립트 Date 객체에서 toUTCString() 메서드를 쓴 결과를 이용하면 쉽다. new Date().to..

❤️‍🔥TIL : Today I Learned useRef React에서 DOM 노드, react 엘리먼트에 접근하는 방법인 useRef를 설명합니다. useRef 란? - Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. useRef는 컴포넌트의 라이프사이클 동안 유지되는 가변 변수를 생성하는 React Hook입니다. 이는 일반적으로 DOM 요소나 컴포넌트 내부 또는 자식 요소에서 엑세스 또는 업데이트해야하는 값을 저장하는 데 사용됩니다. 이를 통해 다시 렌더링을 트리거하지 않고도 해당 값에 접근하거나 업데이트 할 수 있습니다. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때...

❤️‍🔥TIL : Today I Learned 삽입 정렬, 병합 정렬 정렬 알고리즘 중에서 삽입 정렬과 병합 정렬의 이해와 방법을 설명합니다. 삽입 정렬(Insertion Sort)란? - 배열의 모든 요소를 앞에서 차례로 비교합니다.(이미 정렬된 노란색 부분과) - 자신의 위치를 찾아서 삽입하여 정렬 합니다. Big O : O(n^2) 삽입정렬의 장단점 장점 : Stable한 정렬, 대부분의 원소가 거의 정렬되어 있는 경우에 매우 빠르다 단점 : 원소 수가 많은 경우 적합하지 않고 비교적 많은 원소의 이동을 필요로 한다. const array = [5, 3, 8, 1, 2, 9, 4, 7, 6]; // 배열 const insertionSort = (arr) => { for (let i = 1; i < ..