티스토리

Hi, Dev!

검색하기

블로그 홈

Hi, Dev!

dev-ini.tistory.com/m

프론트엔드 개발자의 블로그입니다.

구독자: 13

방명록 방문하기

주요 글 목록

[TypeScript] TypeScript 컴파일러(tsc)의 컴파일 과정 목차 1. "tsc"란?2. tsc 컴파일 과정3. 컴파일러 옵션 tsc의 컴파일 과정에 대해서 알아보자! 1. "tsc란?" tsc는 TypeScript Compiler의 약자로, TypeScript 코드를 JavaScript로 변환하는 명령줄 도구이다.tsc는 TypeScript 코드를 JavaScript로 변환하는 과정을 수행한다.이 과정에서 타입 검사를 통해 코드의 오류를 잡고, 다양한 옵션을 사용해 최종 JavaScript 코드가 어떻게 생성될지 제어할 수 있다.tsc는 필요 시 트랜스파일링을 통해 최신 JavaScript 기능을 구형 브라우저에서도 호환되게 변환하는 역할도 한다. 2. tsc의 컴파일 과정 1) 입력 파일 분석 컴파일러는 컴파일 대상 파일을 확.. 공감수 2 댓글수 3 2024. 12. 9.
[TypeScript] 타입 호환 (Type Compatibility) 목차 1. "타입 호환"이란?2. 타입 호환의 기준 3. 명목적 타이핑 vs 구조적 타이핑4. 덕타이핑 vs 구조적 타이핑5. 타입추론과 타입호환6. Enum 타입 호환 주의 사항7. Class 타입 호환 주의 사항8. Generics 타입 호환 타입 호환에 대해서 알아보자! 1. "타입 호환"이란? * 타입 호환: 타입스크립트 코드에서 특정 타입의 값을 다른 타입으로 사용할 수 있는지 여부를 결정하는 기준 2. 타입 호환의 기준 TypeScript에서 타입을 비교할 때, 객체의 구조나 모양이 일치하면 타입이 호환된다고 본다. 즉, TypeScript에서는 명목적 타이핑이 아니라 구조적 타이핑을 사용하기 때문에, 타입의 이름이 달라도 속성이 같으면 서로 호환된다. 3. 명.. 공감수 3 댓글수 11 2024. 10. 15.
[TypeScript] 타입 추론(Type Inference) 목차 1. "타입 추론"이란?2. 타입 추론의 기본3. 가장 적절한 타입 (The Best Common Type)4. 문맥 상의 타이핑(Contextual Typing)5. 타입을 명시적으로 선언해야하는 이유6. 타입 추론 오류와 해결 방법- 초기화가 없는 경우의 타입 추론 오류 (암묵적 any)- 유니온 타입에서의 잘못된 추론- 함수 반환 타입 추론 오류 - 객체 속성 타입 추론 오류 타입 추론에 대해서 알아보자! 1. "타입 추론"이란? * 타입 추론: 타입스크립트가 코드에서 명시적으로 타입을 선언하지 않아도, 코드의 문맥과 값을 바탕으로 변수, 함수, 표현식 등의 타입을 자동으로 추론하는 것을 말한다. 타입스크립트는 이러한 추론을 통해 코드의 타입 안정성을 유지하면서도, 개발자가 모든.. 공감수 1 댓글수 2 2024. 10. 1.
[TypeScript] 타입 가드 (Type Guard) 목차 1. "타입 가드"란?2. 타입 가드의 필요성3. 타입 가드의 사용 예시- typeof를 활용한 타입 가드- instanceof를 활용한 타입 가드- in을 활용한 타입 가드 타입스크립트의 타입 가드에 대해서 알아보자! 1. "타입 가드"란? 타입 가드란 여러 개의 타입 중 원하는 타입으로 타입을 좁히는 역할을 하는 함수나 조건문으로, 특정 조건을 만족할 때 타입스크립트가 값의 타입을 명확하게 추론할 수 있도록 돕는다. 이를 통해 코드 내에서 안전하게 타입에 따른 처리를 할 수 있다. 2. 타입 가드의 필요성 TypeScript는 컴파일 시점에서 타입을 체크하지만, 런타임에는 값의 타입을 정확하게 알 수 없을 때가 있다. 특히 유니온 타입이나 any 타입을 사용할 때, 코드의 .. 공감수 0 댓글수 0 2024. 9. 30.
[TypeScript] 타입 단언 (Type Assertion) 목차 1. "타입 단언"이란?2. 타입 단언의 기본 사용법3. 타입 단언은 언제 쓰는가? 타입 단언에 대해서 알아보자! 1. "타입 단언"이란? TypeScript에서 개발자가 특정 값이 원하는 타입임을 컴파일러에게 명시적으로 알리는 방법개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식다른 언어의 타입 캐스팅과 비슷한 개념이며 타입스크립트를 컴파일 할 때 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않는다. 2. 타입 단언의 기본 사용법 타입 단언은 기본적으로 as 키워드를 이용해서 정의할 수 있다. // 타입 단언 적용 전 const name: string = 'Capt'; 위 코드는 타입 표기 방식을 이용해 name 이라는 변수의 타입은 string .. 공감수 0 댓글수 0 2024. 9. 30.
[TypeScript] 타입 건전성 (Soundness ) 목차 1. "Soundness"란?2. 타입 검증 과정3. Soundness의 예시4. 만약 Soundness하지 않다면?5. Soundness 관련하여, 타입스크립트를 사용하는 근복적인 이유 TypeScript의 Soundness에 대해서 알아보자! 1. "Soundness"란? * Soundness(타입의 건전성) : 타입 시스템이 타입 오류를 잘 잡아내는 능력 - 즉, 코드가 타입 시스템을 통과하면 런타임에서도 타입 관련 오류가 발생하지 않을 것을 보장하는 성질을 가리킨다. - 건전한(Sound) 타입 시스템은 잘못된 타입 간의 할당이나 사용을 런타임 전에(컴파일 또는 타입 검사 단계에서) 확실하게 막아준다. - 타입 시스템이 완전히 건전하다면, 타입 검사에서 오류가 없을 때 런타임.. 공감수 0 댓글수 0 2024. 9. 29.
[TypeScript] 제네릭 (Generics) 목차 1. "제네릭"이란?2. 제네릭의 기본 문법3. 제네릭의 동작 원리 4. 제네릭 타입 변수5. 제네릭 인터페이스6. 제네릭의 타입 제한 - 정의된 타입 이용하기7. 제네릭의 타입 제한 - keyof로 객체의 속성 제약하기8. 제네릭을 사용하는 이유 타입스크립트의 제네릭에 대해서 알아보자! 1. "제네릭"이란? * 제네릭: 타입을 미리 지정하지 않고 사용 시점에 구체적인 타입을 지정할 수 있게 해주는 타입스크립트의 기능 2. 제네릭의 기본 문법 function getText(text: T): T { return text;} - 함수의 이름 바로 뒤에 라는 코드를 추가한다. → 는 함수가 제네릭이며 타입 매개변수 T를 받을 수 있음을 나타낸다. - 함수의 인자와 반환 값.. 공감수 2 댓글수 2 2024. 9. 28.
[JavaScript] 프로토타입 (Prototype) 목차 1. 프로토타입 (prototype)2. [[Prototype]]3. 프로토타입 상속 4. __proto__5. 프로토타입 메서드 6. 프로토타입 체인 7. 함수의 prototype 프로퍼티8. "prototype"과 [[Prototype]]의 차이9. constructor 프로퍼티10. 상속 트리 "어렵고 추상적인...(사실 프로토타입 개념이 넘 어려워서 미뤄왔다가 피할 수 없어서 이제야 씀 ㅎ..)프로토타입에 대해서 핵심 위주로 알아보자!" 1. 프로토타입(prototype) - 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받는데, 이때 상속되는 정보를 제공하는 객체- "생성자 함수에만 존재하는 속성"이며, 해당 생성자 함수로부터 생성된 객체들이 공.. 공감수 5 댓글수 4 2024. 8. 30.
[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 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다.프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식 (데이터의 형식)을 정의하는 규.. 공감수 4 댓글수 2 2024. 8. 30.
[JavaScript] 클래스 정적 메서드와 정적 프로퍼티 목차 1. 정적 메서드란? 2. 정적 메서드 사용법 3. 일반 클래스로 정의된 메서드와 정적 메서드를 비교해보기 4. 정적 메서드의 특징 5. 정적 메서드를 사용하는 경우 6. 정적 메서드를 사용하면 안되는 경우 7. 정적 메서드를 사용한 예제 정적 메서드와 정적 프로퍼티에 대해서 알아보자! 1. 정적 메서드란? 정적(static) 메서드는 클래스의 인스턴스가 아닌 클래스 자체에 속하는 메서드이다. 즉, 해당 클래스의 모든 인스턴스에서 공유되는 메서드이다. 정적 메서드는 인스턴스의 상태를 변경하지 않으며, 주로 클래스와 관련된 유틸리티 기능을 제공하거나, 클래스의 동작을 수행하는 데 사용된다. 2. 정적 메서드 사용법 정적 메서드는 아래와 같이 클래스 안에서 static 키워드를 붙여 만들 수 있다. c.. 공감수 0 댓글수 0 2024. 3. 20.
[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은 동물 .. 공감수 0 댓글수 0 2024. 3. 19.
[JavaScript] 클래스 (Class) 목차 1. "클래스"란?2. 클래스의 기본 문법3. 클래스의 prototype4. 생성자 함수 vs 클래스 5. 클래스 표현식 클래스.. 너란 녀석.... 미루고...미루고... 미뤄왔다... 클래스를 알려면 생성자 함수, 프로토타입, this를 다 알아야했다.그리고 난... 난..... class를 쓰고 싶지 않았다...그저 생성자 함수만 고집해왔다...타입스크립트를 공부하는데도 클래스에 대한 언급이 있어서잊을만 하면 자꾸 나오니 안되겠다 싶어서 그냥 제대로 짚고 알고 넘어가야겠다 생각했다.이 글을 쓰기 위해서 생성자함수, 프로토타입, this에 대한 게시글 작성도 완료했고, 야무지게 공부해왔다.평소답지 않게 서론이 길었다...ㅎ드디어! 클래스에 대해서 알아보자! 1. "클래스"란? 클래스는.. 공감수 1 댓글수 3 2024. 3. 19.
[JavaScript] 생성자 함수 (new 연산자, 인스턴스) 쉽게 이해해보기 목차 1. "생성자 함수"란? 2. "인스턴스"란? 3. 생성자 함수의 내부 작동 원리 (알고리즘) 4. 붕어빵 비유로 이해해보기 5. 생성자 함수를 사용했을 때 이점 생성자 함수에 대해서 알아보자! 1. "생성자 함수"란? * 생성자 함수: 객체 인스턴스를 만들고 초기화하는 함수 * 초기화: 해당 객체의 상태나 속성을 초기값으로 설정하는 것 생성자 함수는 일반 함수와 유사하지만, 일반 함수와 달리 보통 첫 글자를 대문자로 시작하여 이름을 지정하며, "new" 키워드와 함께 호출된다. 예시 1) this에 프로퍼티 정의하기 // 생성자 함수 (User) 정의 function User(name, age) { // name과 age라는 두 개의 매개변수를 받아서 객체의 프로퍼티로 설정함 this.name =.. 공감수 0 댓글수 0 2024. 3. 3.
[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(.. 공감수 0 댓글수 0 2024. 3. 2.
[TypeScript] 이넘 (Enums) 타입스크립트의 이넘에 대해서 알아보자! 1. 이넘(Enum) 이란? 이넘: 특정 값들의 집합을 의미하는 자료형 - 프로그래밍 언어에서 사용되는 데이터 유형(Data Type) 중 하나 - 명명된 상수(named constants)의 집합을 정의하는 데 사용 - 일반적으로 코드를 읽고 이해하기 쉽도록 특정 값들에 이름을 지정하여 사용하는데 유용 2. 이넘의 장점 - 명명된 상수 : 이넘을 사용하면 각각의 상수에 이름을 지정할 수 있다. → 가독성을 향상, 코드의 의도를 명확히 전달 - 유연성과 확장성 : 이넘을 사용하면 프로그램에서 사용되는 값들을 한 곳에 집중시켜 정의할 수 있다. 이는 만약 값이 변경되어야 할 경우, 해당 이넘만 수정하면 되기 때문에 변경에 대한 유연성과 확장성을 제공한다. → 변경이 .. 공감수 0 댓글수 0 2024. 2. 29.
[TypeScript] 연산자를 이용한 타입 정의 (Union Type, Intersection Type) 목차 1. 유니온 타입이란?2. 유니온 타입의 장점3. 유니온 타입을 쓸 때 주의할 점4. 인터섹션 타입이란?5. 인터섹션 타입 예시와 특징 타입스크립트에서 연산자를 이용해 타입을 정의해보자! 1. 유니온 타입 (Union Type) 이란? * 유니온 타입: 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입 function logText(text: string | number) { // ...} 위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있다.이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부른다. 2. 유니온 타입의 장점 any를 사용하는 경우와, 유니온 타입을 사용하는 경우를 비교하.. 공감수 0 댓글수 0 2024. 2. 24.
[TypeScript] 타입스크립트의 인터페이스(interface) 목차 1. 인터페이스란? 2. 인터페이스 적용 전 후 살펴보기 3. 변수에 인터페이스 활용하기 4. 함수에 인터페이스 활용하기 5. 함수 스펙에 인터페이스 활용하기 6. 배열 인덱스에 인터페이스 활용하기 7. 인터페이스 딕셔너리 패턴 8. 옵션 속성 9. 읽기 전용 속성 10. 인터페이스 확장 타입스크립트의 인터페이스(interface)에 대해서 알아보자! 1. 인터페이스란? * 인터페이스: 상호 간에 정의한 약속 혹은 규칙 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 2. 인터페이스 적용 전 후 살펴보기 적용 전 let person = { name: 'Ca.. 공감수 0 댓글수 0 2024. 2. 24.
[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. 함수의 타입을 정의하는 방식 (가장 기본적인 모습.. 공감수 0 댓글수 2 2024. 2. 24.
[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.. 공감수 0 댓글수 0 2024. 2. 24.
[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.. 공감수 8 댓글수 0 2024. 1. 5.
[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.. 공감수 18 댓글수 0 2023. 7. 30.
[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)만 받도록 하고, 실제 함수를 호출할 때는 이보.. 공감수 26 댓글수 2 2023. 7. 14.
[JavaScript] 구조분해할당 (destructuring assignment) 목차 1. 구조분해할당 2. 배열의 구조분해할당 3. 객체의 구조분해할당 '구조분해할당'에 대해서 알아보자! 구조분해할당 의미 - 구조(배열이나 객체)를 분해해서 각각 변수에 할당한다. - 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이다. 사용하는 경우 - 함수에 객체나 배열을 전달해야하는 경우 - 객체나 배열에 저장된 데이터 일부만 전달해야하는 경우 사용하는 이유 - 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우에 유용하다. - 인덱스를 이용해 배열에 접근하지 않고도 변수로 접근 가능해진다. 배열의 구조분해할당 예시 let arr = ["Haein", "Hwang"] // 이름과 성을 요소로 가진 배열 let [firstName, surName] = arr; // 구조분해할당 .. 공감수 29 댓글수 0 2023. 7. 9.
[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은 하나의 배열에 .. 공감수 34 댓글수 2 2023. 6. 29.
[JavaScript] hasOwnProperty를 쓰는 이유 hasOwnProperty를 써야하는 이유에 대해서 알아보자! hasOwnProperty() 메서드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값(true/false)을 반환한다. 즉, 객체가 특정 프로퍼티를 가지고 있는지에 대한 소유 여부를 반환한다. const obj = { a: 1 }; obj.hasOwnProperty("a"); // true obj.hasOwnProperty("b"); // false 해당 객체에 특정 프로퍼티가 존재하면 true, 그렇지 않으면 false 를 반환한다. 단, 프로토타입 체인은 확인하지 않고, 해당 객체가 스스로 정의한 프로퍼티만을 판단한다. obj.b = 2; // 해당 객체가 스스로 정의한 프로퍼티 Object.prototype.c = 3; //.. 공감수 28 댓글수 0 2023. 6. 29.
[JavaScript] 반복문 빠져나오기, 다음 반복으로 넘어가기, 중첩 반복문 한번에 빠져나오기 (break, continue, label) 목차 1. 반복문 빠져나오기 (break) 2. 다음 반복으로 넘어가기 (continue) 3. 중첩 반복문 한번에 빠져나오기 (label) 반복문을 컨트롤 하는 방법에 대해서 알아보자! 반복문 빠져나오기 (break) 원래는 반복문의 조건이 false가 될 때 반복문이 종료되어야한다. 그런데 특별한 지시자인 break를 사용하면 중간에도 언제든 원하는 때에 반복문을 빠져나올 수 있다. let sum = 0; while (true) { let value = +prompt("숫자를 입력하세요.", ''); if (!value) break; // (*) sum += value; } alert( '합계: ' + sum ); - 변수 sum은 값이 0이다. - while 반복문에서 조건을 (조건식 대신) tru.. 공감수 42 댓글수 2 2023. 6. 13.
[JavaScript] 반복문 while, for, for in, for of , for each 총정리, 비교, 차이점 완전정복 목차 1. while (문법, 예시) 2. do...while (문법, 예시) 3. for (문법, 예시) 4. for...in (문법, 특징, 용도, 배열x) 5. fot...of (문법, 특징, 예시, for...in과 차이점) 6. forEach (문법, 특징, 예시, for을 forEach로) 7. 모든 반복문 종류 차이점 알아보기 8. 결론 자바스크립트에서는 반복문이 정말 많이 쓰이기 때문에 모르면 안되는 개념이다. 그런데 비슷하게 생긴(for, while 등 단어가 들어간) 반복문 종류가 많아서 정말 혼란 그 자체였다. 그래서 이 모든걸 다 총망라해서 종류와 차이점까지 전부 정리를 해야겠다고 결심했다. MDN, 모던JS인포, 구글링 등등 정말 많은 자료를 보면서 총정리를 해보았다. 무려 이틀 .. 공감수 39 댓글수 0 2023. 6. 12.
[JavaScript] 배열(Array), 배열의 메서드 총정리 목차 1. 배열 선언 2. 인덱스 3. 배열 요소의 자료형 4. length 5. 배열의 메서드 - pop, push, shift, unshift - splice, slice - concat - indexOf, lastIndexOf, includes - find, findIndex - filter - map - sort - reverse - split, join 배열은 순서가 있는 컬렉션을 저장할 때 쓰이는 자료 구조이다. 배열 선언 빈 배열을 만드는 방법에는 2가지가 있다. let arr = new Array(); 위 방법은 여러 실수를 유발할 수 있는 단점이 있기 때문에 잘 사용이 안된다. let arr = []; 대부분 이 방법으로 배열을 선언한다. 인덱스 - 배열의 순서를 나타낸다. - 0부터 시.. 공감수 40 댓글수 0 2023. 6. 7.
[JavaScript] 콜백 함수 (callback function) 다음은 MDN에서 설명하는 콜백함수의 정의이다. A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. (콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수이다.) 콜백 함수 - "인자로 들어가는 함수"가 콜백함수 - 나중에 실행되는 함수 - 함수는 값이기 때문에, 어디든 할당 될수 잇고 어디든 내보내질 수 있다. - 따라서 인자(매개변수)안에도 할당될수 있다. function sum (a){ a=fu.. 공감수 37 댓글수 0 2023. 5. 25.
[JavaScript] 함수 (Function) 총정리 2탄 (함수 호출, 함수 복사 및 할당, 내부변수, 외부변수, 화살표함수) 1탄 못보신 분들은 보고 오세요~! https://dev-ini.tistory.com/40 목차 1. 함수 호출하기 2. 함수 복사해서 다른 변수에 할당하기 3. 내부변수, 외부변수 4. 화살표 함수 (함수 표현식) 함수 호출(실행)하기 새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있다. 함수 이름인 sayHi 옆에 괄호( )를 붙여 호출 →호출하면 함수 본문 alert(" Hello "); 가 실행됨 function sayHi() { alert( "Hello" ); } alert( sayHi() ); //함수의 값, 즉 ("Hello")알림창이 뜸 비교) 괄호 없이 함수 이름만 언급하기 자바스크립트는 괄호가 있어야만 함수가 호출된다. 따라서 괄호 없이 함수 이름만 언급하면, 함수가 실행.. 공감수 43 댓글수 0 2023. 5. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.