Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

JavaScript, TypeScript

01. 상황에 따라 달라지는 this자바스크립트에서 this는 함수가 호출되는 방식에 따라 가리키는 대상이 달라진다. 1) 전역 공간에서의 this브라우저 환경에서는 this가 전역 객체인 window를 가리키며, Node.js 환경에서는 전역 객체인 global을 가리킨다. 전역 실행 컨텍스트는 자바스크립트 코드가 실행되기 시작할 때 생성죄는데 그 안에서 this는 전역 객체를 참조하도록 설정 되어있음 2) 메서드로서 호출할 때 그 메서드 내부에서의 this함수: 독립적으로 동작하는 코드의 묶음, 함수로 호출하면 전역객체가 thisconst func = (x) => { console.log(this, x);};func(1); // this는 전역 객체 (브라우저에서는 window) 메서드: 객체의..

2024. 10. 16.

JavaScript, TypeScript

01. 데이터 타입의 종류타입 종류설명기본형(Primitive)- 값 그 자체를 저장하는 타입- 변경 불가능 하여 변수에 값을 저장하고, 변수간의 값 비교나 복사값이 그대로 복사(Number, String, Boolean, Undefined, Null, Symbol, BigInt)참조형(Reference)- 값이 아닌 저장된 위치(주소)를 저장- 변경 불가능하여 한 변수에서 객체의 값을 변경하면,그 객체를 참조하는 다른 변수에도 변경사항이 보이게 됨(Object, Array, Function, Date, RegExp) 02. 데이터 타입에 관한 배경지식1) 비트: 컴퓨터가 데이터를 처리하는 가장 기본적인 단위로, 컴퓨터는 모든 데이터를 0과 1비트 단위로 저장하지만, 비트만 사용하면 많은 데이터를 처리하..

2024. 10. 14.

JavaScript, TypeScript

ES6문법부터 그 이후의 최신 문법까지 정리하기 1. let / const 이전에 var를 사용해서 변수를 선언할 수 있었는데 let과 const는 블록 내에서만 유효한 변수를 생성할 수 있다. let은 재할당이 가능한 변수, const는 한 번 할당된 값이 재할당되지 않는 상수를 선언할 때 사용 let x = 10; x = 20; // 재할당 가능 const PI = 3.14; PI = 3.14159; // 에러 발생 [JS] var, let, const 차이점 2. 화살표함수 (Arrow function) function 키워드 대신 화살표 (=>)를 사용해서 함수를 정의할 수 있다. // 기존 함수 선언 방식 function add(a, b) { return a + b; } // 매개변수가 있는 화..

2024. 4. 8.

JavaScript, TypeScript

1. Generic이란? 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 말한다. 정적 Type 언어는 함수, 클래스 정의 시 type을 선언해야한다. 일반적인 정적 타입 언어는 함수나 클래스를 정의할 때 타입을 선언해야하지만, 제네릭을 이용해 코드가 수행될 때 타입이 명시되도록 한다. function sort(item: T[]): T[] { return item.sort(); } const nums: number[] = [1, 2, 3, 4]; const chars: string[] = ["a", "b", "c", "d"]; sort(nums); sort(chars); 위 함수는 제네릭타입 'T'의 배열 item을 매개변수로 받고 배열을 정렬 후 정렬된 배열을 반환한다. 여기서 'T'는 제네릭..

2023. 10. 27.

JavaScript, TypeScript

searchParams는 자바스크립트에서 URL 쿼리 스트링 부분을 쉽게 다룰 수 있게 도와주는 기능 1. 쿼리 스트링 URL에 정보를 넘겨줘야 할 때 주소 뒤에 '?' 물음표와 함께 붙는 쿼리 스트링에 담겨진다. 쿼리 스트링은 'key=value'로 구성되고 여러개를 묶을 땐 '&'로 구분한다. 예를 들어 https://tistory.com?page=1&category=blog 라는 URL이 있을 때 page는 key값이 되고, 1은 value값, 또 뒤에 category가 키, blog가 value값이 된다. 2. 메소드 const url = new URL("https://tistory.com"); const url = new URLSearchParams(window.location.search); ..

2023. 8. 24.

JavaScript, TypeScript

이전글 - [JS] 자바스크립트에 Fetch() 함수로 HTTP 요청하기 로그인 폼을 만들었다고 했을 때 입력된 값을 백엔드 서버로 전송 시 JSON 형태로 데이터를 전송하려고 한다. // index.html 이메일 비밀번호 로그인 label의 for과 input의 id를 일치시키면 한 세트로 만들 수 있다. 이제 로그인 버튼을 눌렀을 때 비밀번호가 일치하는지 아닌지 alert창을 띄우는 코드를 작성하려고 한다. // index.js const emailInput = document.querySelector("#emailInput"); const passwordInput = document.querySelector("#passwordInput"); const submitButton = document.q..

2023. 4. 16.