본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

자바스크립트

 (25)
[TypeScript] 제네릭 (Generics) 목차 1. "제네릭"이란?2. 제네릭의 기본 문법3. 제네릭의 동작 원리 4. 제네릭 타입 변수5. 제네릭 인터페이스6. 제네릭의 타입 제한 - 정의된 타입 이용하기7. 제네릭의 타입 제한 - keyof로 객체의 속성 제약하기8. 제네릭을 사용하는 이유   타입스크립트의 제네릭에 대해서 알아보자!        1. "제네릭"이란?   * 제네릭: 타입을 미리 지정하지 않고 사용 시점에 구체적인 타입을 지정할 수 있게 해주는 타입스크립트의 기능     2. 제네릭의 기본 문법  function getText(text: T): T { return text;} - 함수의 이름 바로 뒤에  라는 코드를 추가한다. → 는 함수가 제네릭이며 타입 매개변수 T를 받을 수 있음을 나타낸다. - 함수의 인자와 반환 값..
[JavaScript] HTTP 프로토콜의 개념, 특징, 상태 코드, 통신 방법 (GET, POST, PUT, PATCH, DELETE) 완벽 총정리 목차 1. 'HTTP'2. HTTP의 특징3. HTTP 상태 코드4. HTTP 통신 방법의 종류    GET, POST, PUT, PATCH, DELETE  → 용도, 특징, 적용예시, 코드 예시    프론트엔드에서 서버에 데이터를 요청하는 것은 웹 애플리케이션을 개발할 때는 물론 백엔드와의 협업을 위해서도 매우 중요한 부분이다. 이를 이해하기 위해서 먼저 프로토콜과 기본적인 통신 방법에 대해서 알아보자!        1.  'HTTP' (HyperText Transfer Protocol : 하이퍼텍스트 전송 프로토콜)  HTTP 는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다.프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식 (데이터의 형식)을 정의하는 규..
[JavaScript] 클래스 정적 메서드와 정적 프로퍼티 목차 1. 정적 메서드란? 2. 정적 메서드 사용법 3. 일반 클래스로 정의된 메서드와 정적 메서드를 비교해보기 4. 정적 메서드의 특징 5. 정적 메서드를 사용하는 경우 6. 정적 메서드를 사용하면 안되는 경우 7. 정적 메서드를 사용한 예제 정적 메서드와 정적 프로퍼티에 대해서 알아보자! 1. 정적 메서드란? 정적(static) 메서드는 클래스의 인스턴스가 아닌 클래스 자체에 속하는 메서드이다. 즉, 해당 클래스의 모든 인스턴스에서 공유되는 메서드이다. 정적 메서드는 인스턴스의 상태를 변경하지 않으며, 주로 클래스와 관련된 유틸리티 기능을 제공하거나, 클래스의 동작을 수행하는 데 사용된다. 2. 정적 메서드 사용법 정적 메서드는 아래와 같이 클래스 안에서 static 키워드를 붙여 만들 수 있다. c..
[JavaScript] 클래스 상속을 이용한 확장(extends) 클래스 상속을 이용해서 확장하는 법을 알아보자! 클래스 상속을 이용한 확장 class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`); } stop() { this.speed = 0; alert(`${this.name} 이/가 멈췄습니다.`); } } let animal = new Animal("동물"); 객체 animal과 클래스 Animal의 관계를 그림으로 나타내면 다음과 같다. Animal을 상속받는 또다른 클래스 Rabbit를 만들어볼 것이다. 토끼는 동물이므로 Rabbit은 동물 ..
[JavaScript] 클래스 (Class) 목차 1. "클래스"란?2. 클래스의 기본 문법3. 클래스의 prototype4. 생성자 함수 vs 클래스 5. 클래스 표현식  클래스.. 너란 녀석.... 미루고...미루고... 미뤄왔다... 클래스를 알려면 생성자 함수, 프로토타입, this를 다 알아야했다.그리고 난... 난..... class를 쓰고 싶지 않았다...그저 생성자 함수만 고집해왔다...타입스크립트를 공부하는데도 클래스에 대한 언급이 있어서잊을만 하면 자꾸 나오니 안되겠다 싶어서 그냥 제대로 짚고 알고 넘어가야겠다 생각했다.이 글을 쓰기 위해서 생성자함수, 프로토타입, this에 대한 게시글 작성도 완료했고, 야무지게 공부해왔다.평소답지 않게 서론이 길었다...ㅎ드디어! 클래스에 대해서 알아보자!     1. "클래스"란?  클래스는..
[JavaScript] 생성자 함수 (new 연산자, 인스턴스) 쉽게 이해해보기 목차 1. "생성자 함수"란? 2. "인스턴스"란? 3. 생성자 함수의 내부 작동 원리 (알고리즘) 4. 붕어빵 비유로 이해해보기 5. 생성자 함수를 사용했을 때 이점 생성자 함수에 대해서 알아보자! 1. "생성자 함수"란? * 생성자 함수: 객체 인스턴스를 만들고 초기화하는 함수 * 초기화: 해당 객체의 상태나 속성을 초기값으로 설정하는 것 생성자 함수는 일반 함수와 유사하지만, 일반 함수와 달리 보통 첫 글자를 대문자로 시작하여 이름을 지정하며, "new" 키워드와 함께 호출된다. 예시 1) this에 프로퍼티 정의하기 // 생성자 함수 (User) 정의 function User(name, age) { // name과 age라는 두 개의 매개변수를 받아서 객체의 프로퍼티로 설정함 this.name =..
[JavaScript] this 목차 1. this란? 2. 런타임에 결정되는 this 3. this를 사용하는 이유 4. this가 없는 화살표 함수 this에 대해서 알아보자! 1. "this"란? * this: 메서드를 호출할 때 사용된 객체 (즉, 현재 객체) let user = { name: "John", age: 30, sayHi() { alert(this.name); // 여기서는 this가 user임 } }; user.sayHi(); // John // user.sayHi()가 실행되는 동안에 this는 user를 나타냄 * 참고) 메서드 단축 구문 // 아래 두 객체는 동일하게 동작한다. user = { sayHi: function() { alert("Hello"); } }; // 단축 구문 user = { sayHi(..
[JavaScript] 나머지 매개변수(...), arguments 객체, 스프레드 문법 목차 1. 나머지 매개변수 (rest parameter) 2. arguments 객체 3. 스프레드 문법 (전개구문, spread syntax) 4. 점 삼총사 간단 비교 (구조분해할당, 나머지 매개변수, 스프레드문법) 정해지지 않은 수의 인수를 받는 방법과 함수의 매개변수에 배열을 전달하는 방법을 알아보자! 나머지 매개변수 나머지 매개변수에 대해서 설명하기 전에, 우선 나머지 매개변수가 왜 필요한지에 대해 알아보자. 아래의 예시와 같이 함수에 넘겨주는 인수의 개수엔 제약이 없다. function sum(a, b) { return a + b; } console.log( sum(1, 2, 3, 4, 5) ); // 3 함수를 정의할 때는 인수를 두개(a, b)만 받도록 하고, 실제 함수를 호출할 때는 이보..

티스토리툴바