티스토리

Will's Log

검색하기

블로그 홈

Will's Log

jsdnl123.tistory.com/m

개발자가 되고픈 비전공자의 발악

구독자: 0

방명록 방문하기

반응형

주요 글 목록

[Typescript] 타입 가드란? 타입 가드 개념과 쓰는 이유 예시로 파헤치기 안녕하세요, 윌입니다. 오늘은 타입 가드에 대한 설명과 사용 이유에 대해 파헤쳐 보겠습니다. 타입 가드에 대해 이해하기 위해선 먼저 Interface, 유니온 타입( | 연산자) 등에 대한 선행 학습이 필요합니다. 아래와 같은 2개의 interface가 있습니다. Developer와 Person은 name을 가지지만 각 skill, age를 가진다는 점에서 다릅니다.interface Developer { name: string; skill: string;}interface Person { name: string; age: number;} tony라는 객체를 만들어보겠습니다. tony는 age, skill을 모두 가지는 객체입니다. 그러나 tony.skill 또는 tony.age로 접근 시 타입에.. 공감수 0 댓글수 0 2024. 10. 6.
[JavaScript] '==' 와 '==='의 차이? (비교 연산자 파헤치기) 안녕하세요, 윌입니다. 이번엔 비교 연산자에 대한 정리입니다. 자바스크립트에서 비교 연산자는 두 값의 관계를 비교하여 결과를 반환하는 연산자입니다. 비교 연산자는 주로 조건문이나 반복문에서 많이 사용됩니다. 자바스크립트에는 여러 가지 비교 연산자가 있으며, 각각의 의미와 용법은 다음과 같습니다: 1. 동등 연산자 (==)두 값이 같은지 비교하며, 필요에 따라 형 변환을 수행합니다. console.log(5 == '5'); // true (숫자와 문자열을 비교하며 형 변환이 발생)console.log(0 == false); // true (숫자 0과 불리언 값을 비교하며 형 변환이 발생) 2. 일치 연산자 (===)두 값이 같은지 비교하며, 형 변환을 수행하지 않습니다. 값과 자료형이 모두 같아야 합니.. 공감수 0 댓글수 0 2024. 7. 10.
[JavaScript] undefined vs null vs NaN 파헤치기 안녕하세요, 윌입니다. undefined, null, NaN에 대해 정리해봅니다. 자바스크립트에서 undefined, null, NaN는 각각 고유한 의미와 용도를 가진 특수한 값입니다. 이 값들은 각각의 상황에서 다르게 동작하며, 그 차이점을 이해하는 것이 중요합니다. 1. undefinedundefined는 선언되었지만 값이 할당되지 않은 변수에 자동으로 할당되는 값입니다. 또한, 함수가 명시적으로 값을 반환하지 않을 때도 undefined가 반환됩니다. 특징선언은 되었지만 초기화되지 않은 변수의 기본 값:let a;console.log(a); // undefined객체의 존재하지 않는 프로퍼티에 접근할 때:let obj = {};console.log(obj.property); // undefined.. 공감수 0 댓글수 0 2024. 7. 9.
템플릿 리터럴(Template Literal)이란? 안녕하세요, 윌입니다. 이번엔 템플릿 리터럴에 대한 정리를 해보려고 합니다. 템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 문자열 리터럴의 한 형태로, 백틱(backtick)(```)으로 감싸여 있으며, 보간(interpolation)과 여러 줄 문자열을 지원하는 것이 특징입니다. 템플릿 리터럴을 사용하면 가독성이 높고 유연한 문자열 처리가 가능합니다. *참고 리터럴이란? https://jsdnl123.tistory.com/31#google_vignette 리터럴(Literal)과 변수(Variable)의 차이는 무엇인가?안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와.. 공감수 0 댓글수 0 2024. 7. 5.
리터럴(Literal)과 변수(Variable)의 차이는 무엇인가? 안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와 비교하여 사용이 되는데요, 리터럴과 변수는 모두 프로그래밍에서 값을 다루는 중요한 요소이지만, 둘 사이에는 분명한 차이가 있습니다. 아래에서 리터럴과 변수의 정의, 역할, 차이점을 설명하겠습니다. 리터럴(Literal) 정의: 리터럴은 소스 코드에서 직접 값을 나타내는 표현식입니다. 리터럴 자체가 값을 의미하며, 프로그램 실행 시 그 값이 변하지 않습니다.42 // 숫자 리터럴"Hello" // 문자열 리터럴true // 불리언 리터럴[1, 2, 3] // 배열 리터럴{ name: "Alice", age: 30 } // 객체 리터럴 변수 (V.. 공감수 0 댓글수 0 2024. 7. 5.
JavaScript 표현식과 문 *아직 작성 중입니다. '문(statement)'에 대한 내용 추가 예정 자바스크립트를 배우며 맞이하게되는 용어는 자바스크립트만의 것이 아니라 컴퓨터 공학 대부분에서 사용되는 용어다. 용어에 대한 개념 이해는 개발자 간 커뮤니케이션 뿐만 아니라 문서 및 매뉴얼 작성에도 상당한 도움이 된다. 요즘 공부를 하며 용어에 대한 이해가 부족한 듯 싶어 정리하고자 한다. 개념을 이해한다는 것은 용어를 정확히 이해하고 설명할 수 있다는 것이다. 1. 값 값(value)은 식(표현식, expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것이다. 아래 예제의 식은 평가되어 수자 값 30을 생성한다. 10+20; // 30 변수는 하나의 값을 저장하기 위.. 공감수 0 댓글수 0 2022. 11. 23.
JavaScript forEach로 배열 데이터 제어 안녕하세요, Will 입니다. 오늘은 배열(Array)의 forEach를 설명하도록 하겠습니다. 1. forEach 사용법 아래 코드를 보자 1 2 3 4 5 6 var arr = [1,2,3,4,2]; arr.forEach(function(element, index, all){ console.log(`${element}: ${index} :${all}`); console.log(this.ten); },{ten:10}); Colored by Color Scripter cs forEach문은 위와 같이 function을 Parameter로 가지며, 콜백 함수라고 한다. 콜백 함수는 배열의 element 하나 씩 읽어가며 호출된다. 즉 element 수(Length) 만큼 호출된다. 콜백 함수의 Parame.. 공감수 0 댓글수 0 2022. 11. 22.
함수와 일급 객체 일급 객체 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미. - 즉 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문) 이라면 어디든지 리터럴로 정의할 수 있음. 런타임에 함수 객체로 평가됨. - 일급 객체로서 함수의 가장 큰 특징은 일반 객체와 같이 함수의 매개변수로 전달 가능하며, 함수의 반환 값으로 사용 가능하는 점임. 이는 함수형 프로그래밍을 가.. 공감수 0 댓글수 0 2022. 10. 31.
JavaScript continue 문 continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다. 아래는 string 값을 for문으로 돌며 search 값이 몇 개 있는지 확인해보는 코드이다. 'Hello World' 내 'l'이 3개 있으므로 count는 3이 된다. const string = 'Hello World.' const search = 'l' let count = 0 // 문자열은 유사 배열이므로 for문으로 순회할 수 있다. for(let i=0; i 공감수 1 댓글수 1 2022. 10. 4.
JavaScript break 문 오늘은 JavaScript Break 문에 대해 작성해보겠다. 앞서 포스팅한 반복문 페이지에서 switch 문과 while 문에서 살펴보았듯이 break 문은 코드 블록을 탈출한다. 좀 더 정확히 표현하자면 코드 블록을 탈출하는 것이 아니라 레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch 문의 코드 블록을 탈출한다. 그 외 break 문 사용 시 SyntaxError(문법 에러)가 발생한다. 아래와 같이 if문에 break를 사용하면 Syntax에러가 발생한다. if(true){ break; // Uncaught SyntaxError: Illegal break statement } 참고로 레이블 문이란 식별자가 붙은 문을 말한다. // .. 공감수 1 댓글수 1 2022. 10. 4.
JavaScript 반복문(for, while, do...while) 안녕하세요, Will 입니다. 오늘은 Javascript 반복문 개념에 대해 설명하겠습니다. 반복문 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다. 자바스크립트는 for, while, do...while 문을 제공한다. 1. for 문 for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다. 가장 일반적으로 사용되는 for 문의 형태는 다음과 같다. 1 2 3 4 5 for(변수 선언문 또는 할당문; 조건식; 증감식) { 조건식이 참인 경우 반복 실행될 문; } cs 다음 예제는 for문이 동작하는 동안 로그를 찍는다. 0, 1은 조건식을 만족하고, 2가 되.. 공감수 2 댓글수 1 2022. 10. 4.
JavaScript Switch 문 switch 문 switch 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. case 문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다. switch 문의 표현식과 일치하는 case문이 없다면 실행 순서는 default 문으로 이동한다. default 문은 선택사항으로, 사용할 수도 있고 사용하지 않을 수도 있다. switch(표현식){ case 표현식1: 표현식과 표현식1이 일치하면 실행될 문; break; case 표현식2: 표현식과 표현식2가 일치하면 실행될 문; break; default: 표현식과 일치하는 case문이 없을 때 실행될 문; } if...else문의 조건식은 불리언 값으로 평가되어야 하지만 switch 문의 표현식은 불리언 .. 공감수 0 댓글수 0 2022. 10. 4.
JavaScript if...else문 if...else 문 if...else 문은 주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행 할 코드 블록을 결정한다. 조건식의 평가 결과가 true일 경우 if 문의 코드 블록이 실행되고, false일 경우 else 문의 코드 블록이 실행된다. if (조건식) { // 조건식이 참이면 이 코드 블록이 실행된다. } else { // 조건식이 거짓이면 이 코드 블록이 실행된다. } *if문의 조건식은 불리언 값으로 평가되어야 한다. 만약 if문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 실행할 코드 블록을 결정한다. *조건식을 추가하고 싶은 경우 else if문을 사용한다. if(조건식 1) { // 조건식 1이 참이면 .. 공감수 0 댓글수 0 2022. 10. 2.

반응형

문의안내

티스토리
로그인
고객센터

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