Written by Jieun

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

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.

JavaScript, TypeScript

이 글을 보기 전에 [JS] HTTP와 REST API에 관한 글을 이해하고 보면 좋다! 1. Fetch API Fetch API는 웹 브라우저에서 제공하는 자바스크립트 인터페이스로, 네트워크로 요청을 보내고 응답 처리를 하는 기능을 제공한다. 기존 XMLHTTPRequest를 대체하며 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 함수 XMLHTTPRequest와 비슷하지만, fetch()는 promise 기반으로 구성되어 더 간편하게 사용 가능 2. Fetch API 사용해서 데이터 가져오기 (GET 요청) 통신이 가능한 더미 웹 서비스 JSONPlaceholder: https://jsonplaceholder.typicode.com/ JSONPlaceholder 위 사이트에서 fetc..

2023. 4. 15.

JavaScript, TypeScript

TypeScript는 타입 변환을 용이하게 하기 위해 전역으로 사용 가능한 유틸리티 타입을 제공한다. Partial 프로퍼티를 선택적으로 구성하여 일부만 사용 가능. 주어진 타입의 하위 타입 집합을 나타내는 타입 반환 interface User { name: string; age: number; } let person: Partial = { name: 'john' } //Partial는 아래와 같다. interface User { name: string; age?: number; } Partial 를 사용하면 age 프로퍼티가 없어도 에러가 발생하지 않는다. Required T의 모든 프로퍼티가 필수로 설정된 타입 구성. Partial과 반대 interface User { name: string; age..

2023. 4. 2.