본문 바로가기

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

전체 글

(236)
[TypeScript] 타입 추론(Type Inference) 목차 1. "타입 추론"이란?2. 타입 추론의 기본3. 가장 적절한 타입 (The Best Common Type)4. 문맥 상의 타이핑(Contextual Typing)5. 타입을 명시적으로 선언해야하는 이유6. 타입 추론 오류와 해결 방법- 초기화가 없는 경우의 타입 추론 오류 (암묵적 any)- 유니온 타입에서의 잘못된 추론- 함수 반환 타입 추론 오류 - 객체 속성 타입 추론 오류   타입 추론에 대해서 알아보자!     1. "타입 추론"이란?  * 타입 추론:  타입스크립트가 코드에서 명시적으로 타입을 선언하지 않아도, 코드의 문맥과 값을 바탕으로 변수, 함수, 표현식 등의 타입을 자동으로 추론하는 것을 말한다. 타입스크립트는 이러한 추론을 통해 코드의 타입 안정성을 유지하면서도, 개발자가 모든..
[TypeScript] 타입 가드 (Type Guard) 목차 1. "타입 가드"란?2. 타입 가드의 필요성3. 타입 가드의 사용 예시- typeof를 활용한 타입 가드- instanceof를 활용한 타입 가드- in을 활용한 타입 가드   타입스크립트의 타입 가드에 대해서 알아보자!     1. "타입 가드"란?  타입 가드란 여러 개의 타입 중 원하는 타입으로 타입을 좁히는 역할을 하는 함수나 조건문으로, 특정 조건을 만족할 때 타입스크립트가 값의 타입을 명확하게 추론할 수 있도록 돕는다. 이를 통해 코드 내에서 안전하게 타입에 따른 처리를 할 수 있다.     2. 타입 가드의 필요성  TypeScript는 컴파일 시점에서 타입을 체크하지만, 런타임에는 값의 타입을 정확하게 알 수 없을 때가 있다. 특히 유니온 타입이나 any 타입을 사용할 때, 코드의 ..
[TypeScript] 타입 단언 (Type Assertion) 목차 1. "타입 단언"이란?2. 타입 단언의 기본 사용법3. 타입 단언은 언제 쓰는가?  타입 단언에 대해서 알아보자!     1. "타입 단언"이란?  TypeScript에서 개발자가 특정 값이 원하는 타입임을 컴파일러에게 명시적으로 알리는 방법개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식다른 언어의 타입 캐스팅과 비슷한 개념이며 타입스크립트를 컴파일 할 때 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않는다.     2.  타입 단언의 기본 사용법  타입 단언은 기본적으로 as 키워드를 이용해서 정의할 수 있다. // 타입 단언 적용 전 const name: string = 'Capt'; 위 코드는 타입 표기 방식을 이용해 name 이라는 변수의 타입은 string ..
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 129 - flag에 따라 다른 값 반환하기) # 문제두 정수 a, b와 boolean 변수 flag가 매개변수로 주어질 때, flag가 true면 a + b를 false면 a - b를 return 하는 solution 함수를 작성해 주세요.# 답안// 1. 입력: 정수 a,b와 변수 flag// 2. 출력: flag ? a+b : a-bfunction solution(a, b, flag) { return flag ? a+b : a-b}
[TypeScript] 타입 건전성 (Soundness ) 목차 1. "Soundness"란?2. 타입 검증 과정3. Soundness의 예시4. 만약 Soundness하지 않다면?5. Soundness 관련하여, 타입스크립트를 사용하는 근복적인 이유    TypeScript의 Soundness에 대해서 알아보자!     1. "Soundness"란?  * Soundness(타입의 건전성) : 타입 시스템이 타입 오류를 잘 잡아내는 능력 - 즉, 코드가 타입 시스템을 통과하면 런타임에서도 타입 관련 오류가 발생하지 않을 것을 보장하는 성질을 가리킨다.  - 건전한(Sound) 타입 시스템은 잘못된 타입 간의 할당이나 사용을 런타임 전에(컴파일 또는 타입 검사 단계에서) 확실하게 막아준다. - 타입 시스템이 완전히 건전하다면, 타입 검사에서 오류가 없을 때 런타임..
[TypeScript] 제네릭 (Generics) 목차 1. "제네릭"이란?2. 제네릭의 기본 문법3. 제네릭의 동작 원리 4. 제네릭 타입 변수5. 제네릭 인터페이스6. 제네릭의 타입 제한 - 정의된 타입 이용하기7. 제네릭의 타입 제한 - keyof로 객체의 속성 제약하기8. 제네릭을 사용하는 이유   타입스크립트의 제네릭에 대해서 알아보자!        1. "제네릭"이란?   * 제네릭: 타입을 미리 지정하지 않고 사용 시점에 구체적인 타입을 지정할 수 있게 해주는 타입스크립트의 기능     2. 제네릭의 기본 문법  function getText(text: T): T { return text;} - 함수의 이름 바로 뒤에  라는 코드를 추가한다. → 는 함수가 제네릭이며 타입 매개변수 T를 받을 수 있음을 나타낸다. - 함수의 인자와 반환 값..
[JavaScript] 프로토타입 (Prototype) 목차 1. 프로토타입 (prototype)2. [[Prototype]]3. 프로토타입 상속 4. __proto__5. 프로토타입 메서드 6. 프로토타입 체인 7. 함수의 prototype 프로퍼티8. "prototype"과 [[Prototype]]의 차이9. constructor 프로퍼티10. 상속 트리    "어렵고 추상적인...(사실 프로토타입 개념이 넘 어려워서 미뤄왔다가 피할 수 없어서 이제야 씀 ㅎ..)프로토타입에 대해서 핵심 위주로 알아보자!"         1. 프로토타입(prototype)  - 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받는데, 이때 상속되는 정보를 제공하는 객체- "생성자 함수에만 존재하는 속성"이며, 해당 생성자 함수로부터 생성된 객체들이 공..
[React] 리액트로 서버에 데이터 요청하는 방법 (fetch, axios.then, async/await 사용하기) 목차 1. 서버 만들기 2. React 설치하기 3. 서버에 대이터 요청하는 방법 2가지4. fetch로 통신하기 5. 라이브러리(axios)를 사용해서 통신하기 6. async/await 이용하기7.  async/await과 axios.then() 차이점     리액트로 서버에 데이터를 요청하는 방법을 알아보자!       1. 서버 만들기  서버에 데이트를 요청하려면 서버가 있어야한다. 이해를 위해 직접 서버를 만들어보자! (express를 이용할 것이다)  1. 폴더 기본 구성하기  폴더 기본 구성은 아래와 같다.    2 . 터미널에서 server 폴더로 이동한다.      3. node.js 프로젝트를 하니까 npm init을 해서 package.json을 만들어준다.      4. npm i ..