Jun's TID

타입 스크립트 좋더라, 타입 스크립트 쓰세요. 런타임 에러가 확 줄어요..!라는 말을 종종 들으면서도 현재 회사에서 잡고 있는 프로젝트가 전부 JS로 되어 있는 것도 그렇고, 뭔가 JS도 잘 쓰고 있는 마당에 굳이...?라는 생각이 들어서 따로 쳐다보지를 않고 있었다. 이젠 리엑트로 프로젝트도 하고 있고, 조만간 RN으로도 하나 진행할 거 같아서 더는 미루지 말고 한번 사용이나 해보자! 라는 생각이 들어서 다뤄보려고 한다. 기본적인 내용부터 차근차근 공부해보자. - 그래서 타입 스크립트가 뭐야? 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 하는 언어로, 자바스크립트의 모든 기능을 포함하면서 타입 시스템을 추가해 준다는 것이 기본 콘셉트이다. 이로 인해 큰 규모의 애플리..

JavaScript의 reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열을 순회하면서 각 요소에 대해 실행되는데, 이 때 누적된 결과값과 현재 요소를 함수의 인자로 받아 처리한다. reduce 함수는 배열의 요소를 하나씩 처리하면서 최종적으로 단일 값(예를 들어, 합계, 평균, 객체 등)을 생성하는 데 사용된다. 바로 한번 알아보자. 우선, reduce 함수의 기본 구조는 다음과 같다. array.reduce(function(accumulator, currentValue, currentIndex, array) { // 로직 실행 }, initialValue); 여기서 accumulator는 누적값을 의미하며, current..

async와 await은 JavaScript의 비동기 프로그래밍을 위해 ES2017에 도입된 키워드이다. async 함수는 항상 Promise를 반환하며, 함수 내부에서 await 키워드를 사용하여 Promise의 결과를 동기적인 방식으로 처리할 수 있다. await 키워드는 async 함수 내에서만 사용할 수 있다. async 함수: 이 키워드를 사용하여 함수를 선언하면, 함수는 자동으로 Promise를 반환한다. 함수 내부에서 return 문을 사용하면, 이 값은 Promise가 이행(fulfilled)될 때의 값이 된다. await 키워드: Promise가 처리될 때까지 함수 실행을 일시 정지시키고, Promise가 이행되면 결과값을 반환한다. 오류가 발생하면 예외를 발생시킨다. // 1 + 1을 ..

Promise는 JavaScript에서 비동기 작업을 표현하고 다루는 데 사용되는 객체이다. 이는 비동기 작업의 최종 완료(또는 실패) 및 그 결과값을 나타낸다. Promise 객체는 세 가지 상태 중 하나를 가진다. 대기(pending): 초기 상태, 이행 또는 거부되지 않음. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Promise는 then, catch, finally 메소드를 제공하여, 이행 또는 거부 상태가 되었을 때 실행할 콜백 함수들을 연결할 수 있다. 비동기로 1 + 1을 계산하는 예제 코드와 함께 확인해보자. // 1 + 1을 수행하는 비동기 함수 const asyncAddition = new Promise((resolve, reject..

JavaScript의 비구조화 할당은 객체나 배열로부터 속성이나 요소를 변수에 쉽게 할당할 수 있도록 하는 표현식이다. 이 기능은 ES6(ECMAScript 2015)에서 도입되었으며, 코드의 간결성과 가독성을 향상시키는 데 도움이 된다. 객체 비구조화 할당 객체의 비구조화 할당을 사용하면 객체의 속성을 직접 변수로 할당할 수 있다. const obj = { a: 1, b: 2, c: 3 }; // 전통적인 방식 const a = obj.a; const b = obj.b; const c = obj.c; // 비구조화 할당 const { a, b, c } = obj; 추가 기능: 기본값 할당: 객체에 해당 속성이 없을 경우, 기본값을 할당할 수 있다. const { a, b, c, d = 4 } = obj..

input 태그의 onkeydown 속성을 이용하여, 키보드 키가 눌렸을 때 특정 동작이나 연산을 수행하게끔 할 수 있다. 예제는 keyHandler 함수를 작성하여 직전에 누른 키의 값과 코드를 출력하도록 구현했다. 텍스트 필드에 키보드 값 입력 눌린 키 : 눌린 키 코드:

location 객체가 가지고 있는 replace함수는 해당 페이지로 이동하는 것이 아닌 "변경"해준다. 따라서 브라우저에서 호출한 페이지로 이동하지만, 뒤로가기 버튼은 사용할 수 없다. 현재 페이지 네이버로 변경

navigator와 비슷하게, location 객체를 사용하여 해당 문서의 정보 또한 확인할 수 있다.

setInterval 함수를 사용하여 스크립트 내에서 특정 함수를 반복 호출할 수 있다. setInterval함수는 다음과 같이 사용한다. setInterval(함수명, 밀리초 시간) 즉, 다음과 같이 코드를 작성하여 현재 시간을 계속 업데이트하여 디지털 시계를 구현할 수 있다.

스크립트 내부의 브라우저 객체가 존재하기 때문에 navigator 메서드를 사용하여 현재 브라우저의 정보를 얻을 수 있다. 코드는 다음과 같이 작성했다. 결과는 보시다시피 각 브라우저마다 다른 값을 가지고 있다는 것을 확인할 수 있다. 이를 확인하여 적용할 css를 골라 적용시킬 수 있다.