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

Languages

 (46)
[TypeScript] 타입스크립트의 인터페이스(interface) 목차 1. 인터페이스란? 2. 인터페이스 적용 전 후 살펴보기 3. 변수에 인터페이스 활용하기 4. 함수에 인터페이스 활용하기 5. 함수 스펙에 인터페이스 활용하기 6. 배열 인덱스에 인터페이스 활용하기 7. 인터페이스 딕셔너리 패턴 8. 옵션 속성 9. 읽기 전용 속성 10. 인터페이스 확장 타입스크립트의 인터페이스(interface)에 대해서 알아보자! 1. 인터페이스란? * 인터페이스: 상호 간에 정의한 약속 혹은 규칙 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 2. 인터페이스 적용 전 후 살펴보기 적용 전 let person = { name: 'Ca..
[TypeScript] 타입스크립트의 함수 타입 - 파라미터, 반환값, 인자, 옵셔널 파라미터 목차 1. 함수의 "파라미터"에 타입을 정의하는 방식 2. 함수의 "반환값"에 타입을 정의하는 방식 3. 함수의 타입을 정의하는 방식 4. 함수의 인자 5. 함수의 옵셔널 파라미터 타입스크립트 함수 타입에 대해서 알아보자! 1. 함수의 "파라미터"에 타입을 정의하는 방식 파라미터의 개수와 인자도 개수를 맞춰줘야 한다. (1:1 mapping이 돼야한다.) function sum(a: number, b: number) { return a + b; } sum (10, 20); 2. 함수의 "반환 값"에 타입을 정의하는 방식 function add(): number{ return 10; } 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용하기! 3. 함수의 타입을 정의하는 방식 (가장 기본적인 모습..
[TypeScript] 타입스크립트의 기본 타입 타입스크립트에는 12가지 기본 타입이 있다. 1. String (문자열) 2. Number (숫자) 3. Boolean 4. Object 5. Array 6. Tuple 7. Enum 8. any 9. void 10. never 11. Undefined 12. null (1) String 자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언 let str: string = 'hi'; // 위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 함 (2) Number 타입이 숫자이면 아래와 같이 선언 let num: number = 10; (3) Boolean 타입이 진위 값인 경우에는 아래와 같이 선언 let show: boolean = tr..
[Javascript] 시간 변환 함수 (newDate, getTime, toLocaleString, , toLocaleDateString, toLocaleTimeString) 시간 변환 함수에 대해서 알아보자! new Date() - Date 생성자는 특정 지점을 나타내는 Date 객체를 생성한다. - Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다. console.log(new Date()); // Date {} getTime() - getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환한다. - 이 메서드를 사용하면 Date 객체에 날짜와 시간을 지정할 수 있다. - 1970년 1월 1일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자이다. console.log(new Date().getTime()); // 1704442186..
[CSS] 마우스 hover 시에 붕 뜨는 효과 넣기 (JS 사용X) CSS에서 많이 사용되는 효과 중에 마우스 hover하면 붕 뜨는 효과를 어떻게 넣는지 알아보자! 1. 우선 붕 뜨게 할 아이콘을 만들어준다. 필자는 파란색 박스를 만들었다. (CSS 탭을 누르면 CSS 코드를 확인할 수 있습니다.) See the Pen Untitled by Git ini (@hwanghaein) on CodePen. 2. .box에 transition: transform 0.5s ease; 속성을 추가하고 .box:hover에 transform: translateY(-20px); 속성을 추가한다. transition과 transform에 관련된 구체적인 설명은 아래의 mdn 문서를 참고하자! https://developer.mozilla.org/ko/docs/Web/CSS/transi..
[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)만 받도록 하고, 실제 함수를 호출할 때는 이보..
[JavaScript] 구조분해할당 (destructuring assignment) 목차 1. 구조분해할당 2. 배열의 구조분해할당 3. 객체의 구조분해할당 '구조분해할당'에 대해서 알아보자! 구조분해할당 의미 - 구조(배열이나 객체)를 분해해서 각각 변수에 할당한다. - 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이다. 사용하는 경우 - 함수에 객체나 배열을 전달해야하는 경우 - 객체나 배열에 저장된 데이터 일부만 전달해야하는 경우 사용하는 이유 - 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우에 유용하다. - 인덱스를 이용해 배열에 접근하지 않고도 변수로 접근 가능해진다. 배열의 구조분해할당 예시 let arr = ["Haein", "Hwang"] // 이름과 성을 요소로 가진 배열 let [firstName, surName] = arr; // 구조분해할당 ..
[JavaScript] map, reduce 배열 메서드 목차 1. map 메서드 - 개요 - 문법 - 자세한 설명 - 예제 2. reduce 메서드 - 개요 - 문법 - 예제 3. map을 reduce로 바꿔보기 React를 배울 때 많이 쓰일 메서드인 map, reduce 메서드를 알아보자! Array.prototype.map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. - 배열 각각의 element들을 다 바꾸고 새로운 array를 가지고 싶을때 - map은 매개변수 안에 함수를 넣을 수 있도록 해줌 - 이 함수는 배열의 모든 item에 대해 실행됨 - 이 함수에서 무엇을 return하든간에 그 return한 값이 새로운 array에 들어가 있게 됨 - 즉, map은 하나의 배열에 ..

티스토리툴바