프론트엔드 성능 최적화를 진행하기 전에 어떤 시기에 최적화를 진행해야 하며, 성능을 어떻게 측정하는지 알아보자. 🟢 make it work - 컴파일하고, 실행시키고, 대략적으로 올바른 종류의 출력물을 뱉어내는지 확인하라. 🟢 make it right - 테스트하고 올바르게 작동하는지 확인해야 한다. 🟢 make it fast - 올바르게 만들면 코드의 구조와 성능이 변경될 수 있으므로 완료되기 전에 속도를 최적화하는 것은 의미가 없다. 그리고 코드를 빨리 만들면 더 깔끔하지 않고 읽을 수 없게 되는 경우가 많다. 따라서 읽기가 가장 쉬울 때 최적화를 수행하는 것이 좋다. kent beck님이 하신 말이다. 나는 아직 2단계를 진행 중이기에 최적화를 할 단계는 아니라는 것을 인지하였다. 하지만 올바르게 ..
👉 1편 선행 ✅ 단방향 연결 리스트란? 연결 리스트는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조이다. 인덴스가 존재하지 않으며, 리스트에서 어딘가 접근하고 싶다면 첫 번째 노드부터 살펴봐야 한다. 지난 시간 단반향 연결 리스트 메서드인 Push(맨 뒤 추가), Pop(맨 뒤 제거), Shift(맨 앞 제거), Unshift(맨 앞 추가)를 구현하였다. 2편에서는 Get, Set, Insert, Remove, Reverse 메서드를 구현해 보고 Big O 복잡도를 알아보자. 🟢 5. Get 주어진 숫자(인덱스)만큼 리스트를 따라간 후 해당 위치의 노드를 반환한다. 인자로 찾으려는 노드의 index 값을 받는다. 인덱스가 음수이거나 리스트의 길이와 같거..
이력 홈페이지를 개발하던 중 친구에게 코멘트를 달아주기를 부탁하였고, 그 내용 중 여러 개의 명언이 슬라이드 되었으면 좋겠다는 조언(?)을 주었다!! 너무 고마웠고 이거 내가 직접 구현할 수 있겠는데? 라고 생각했다. 라이브러리를 사용하면 빠르게 구현할 수 있겠지만, 직접 구현해 보기로 한다. 1. 기능 나열 1. 매초마다 자동으로 슬라이드 된다. 2. 마지막에 도달하면 처음으로 돌아온다. Banner에서 감명 깊었던 명언들을 자동 슬라이드 시킬 예정이라 네비게이션, 이전, 다음 버튼은 따로 구현하지 않는다. 추후에 요일에 따라 다른 명언들이 슬라이드 되도록 기능을 추가하면 재밌을 것 같다. 2. 리스트 Mock 데이터 [ { id: 1, quote: "사람들이 꿈을 이루지 못하는 한 가지 이유는 그들이..
목표 단방향 연결 리스트의 정의 단방향 연결 리스트와 배열의 비교 단방향 연결 리스트에 삽입, 제거 및 순회 방법 구현 ✅ 단방향 연결 리스트(Singly Linked List)란? 연결 리스트는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조이다. 인덴스가 존재하지 않으며, 리스트에서 어딘가 접근하고 싶다면 첫 번째 노드부터 살펴봐야 한다. 🟢 노드(Node)란? 리스트에서 연결되는 하나의 데이터 정보를 말하는데 어떠한 데이터를 담을 공간과 자신의 다음 위치를 가리킬 포인터를 노드라고 한다. 이해하기 쉽게 아래의 그림을 떠올리면 된다. 🟢 리스트(List)란? 리스트는 위의 노드를 연결한 모양인데 꼬리에서 꼬리를 무는 형태로 그려진다. 수많은 구현 방법이..
2023년 01월 10일 Typescript 공식 문서를 기반으로 작성되었습니다. ✅ Type Alias(타입 별칭)란? 객체 타입이나 유니온 타입을 type annotation으로 직접 타입을 부여하는 것도 편하지만, 매번 타입 값을 부여해주어야 한다. type alias는 새로운 타입 값을 생성하는 것이 아닌 미리 정의한 타입을 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. 구문 // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; string, number와 같은 간단한 타입뿐만 아니라 모든 타입에 이름을 지정할 수 있다. type De..
✅Enums - 열거형 Enums은 Typescript에서 제공되는 몇 안 되는 자바스크립트의 타입 레벨이 아닌 확장이다. Enums는 명명된 상수 집합을 정의할 수 있으며 숫자형 또는 문자형 기반의 열거형을 제공해 준다. 🤔 주로 어떤 때에 사용될까? 첫 번째 예시 전자 상거래 사이트에서 주문을 할 경우, 아래 코드처럼 '대기 중, 발송됨, 배송 완료'라는 세 가지 상태가 있다. // TS를 사용하지 않을 경우 const PENDING = 0; const SHIPPED = 1; const DELIVERED = 2; if(status === DELIVERED) { // do something... } else 중요한 것은 숫자 2가 아닌 DELIVERED라는 명명된 상수를 사용하여 의미를 명확하게 하고 ..
✅ 클래스란? 사전에 정의된 속성 및 메소드들을 이용해 객체를 생성하기 위한 청사진과 같다. ES2015에서 도입되었으며 생성자의 기능을 대체한다. class 표현식을 사용하면, 생성자와 같은 기능을 하는 함수를 훨씬 더 깔끔한 문법으로 정의할 수 있다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다. // 클래스 선언문 class Person {} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; 일반적이진 않지만 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다. 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. ..
일급 객체란? 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능하다. 변수나 자료구조(배열, 객체)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환 값으로 사용할 수 있다. JavaScript의 함수는 위 조건을 모두 만족하므로 일급 객체이다. 예시를 보고 이해해 보자. // 1. 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, decrease }; // 3. 함수의 매개변수..