자바스크립트에서는 아무 문제 없던 HTML 조작 코드가 타입스크립트(TypeScript)에서는 빨간 줄을 띄우며 우리를 당황하게 하곤 합니다. 특히 querySelectorAll을 사용할 때 발생하는 타입 에러의 원인과 해결 방법을 정리해 보겠습니다. 문제 발생: Property ‘style’ does not exist 특정 클래스를 가진 요소...
[TypeScript] 타입스크립트 기본 타입 정리 (Primitive, Array, Enum, Any)
TypeScript를 사용하는 가장 큰 이유는 변수나 함수에 명확한 타입(Type)을 지정하여 에러를 사전에 방지하기 위함입니다. 오늘은 타입스크립트에서 가장 자주 사용되는 기본 타입들과 선언 방법을 정리해 보겠습니다. 📘 1. 기본 타입 (Primitive Types) 자바스크립트의 기본 자료형과 매핑되는 타입들입니다. number (숫자...
[TypeScript] 타입스크립트란? 자바스크립트와의 차이와 장점
3종류의 자바스크립트 자바스크립트 생태계를 이해하기 위해서는 크게 세 가지 분류를 알아야 합니다. ES5 (ECMAScript 5): 웹 브라우저에서 동작하는 표준 자바스크립트입니다. ESNext: 2015년(ES6) 이후 매년 새롭게 발표되는 자바스크립트의 새로운 버전을 통칭합니다. TypeScript: ESNext에 Type(타...
[HTML/JS] 브라우저 저장소 정리: localStorage vs sessionStorage 차이점
HTML5 이전에는 브라우저에 데이터를 저장하기 위해 주로 쿠키(Cookie)를 사용했지만, HTML5부터는 더 직관적이고 용량이 큰 웹 스토리지(Web Storage)가 등장했습니다. 웹 스토리지는 데이터의 지속성에 따라 localStorage와 sessionStorage 두 가지로 나뉩니다. 이 둘의 차이점과 사용법을 완벽하게 정리해 보겠습니다....
[TypeScript] 리액트 라우터(react-router-dom) 설치 및 타입 활용 가이드
TypeScript 환경에서 React 프로젝트를 진행할 때, 가장 먼저 마주치는 난관 중 하나가 외부 라이브러리의 타입 정의(Type Definition) 문제입니다. 대표적인 라이브러리인 react-router-dom 또한 자바스크립트 기반으로 만들어졌기 때문에, 타입스크립트가 이해할 수 있도록 별도의 타입 패키지를 설치해줘야 합니다. 이번 글...
[JavaScript] 자바스크립트 반복문 완벽 정리: for...in vs for...of 차이점
프로그래머스 등 코딩 테스트 문제를 풀다 보면 기본 for 문(for(let i=0; i<len; i++)) 대신 더 간결한 형태의 반복문을 마주치게 됩니다. 바로 ES6에서 도입된 for...of와 기존에 있던 for...in 입니다. 얼핏 보면 비슷해 보이지만 용도가 완전히 다르기 때문에 확실히 구분해서 사용해야 합니다. 🧐 이번 글에서는...
[JavaScript] 자바스크립트 반복문 정리: for...in vs for...of 차이점
프로그래머스 등 코딩 테스트 문제를 풀다 보면 기본 for 문(for(let i=0; i<len; i++)) 대신 더 간결한 형태의 반복문을 마주치게 됩니다. 바로 ES6에서 도입된 for...of와 기존에 있던 for...in 입니다. 얼핏 보면 비슷해 보이지만 용도가 완전히 다르기 때문에 확실히 구분해서 사용해야 합니다. 🧐 이번 글에서는...
[JavaScript] ES6 변수 선언 완벽 정리: const, let 그리고 var의 차이점
자바스크립트 ES6(ECMAScript 2015) 이전에는 변수를 선언할 때 var만 사용했지만, ES6부터는 const와 let이 도입되면서 변수 선언 방식이 완전히 바뀌었습니다. 아직도 var를 쓰고 계신가요? 혹은 const와 let을 언제 써야 할지 헷갈리시나요? 이번 글에서는 세 가지 키워드의 차이점과 올바른 사용법을 정리해 보겠습니다. 💡...
[React] 내 사이트에 깃허브 잔디 심기: react-github-calendar 사용법
개발자 포트폴리오를 만들 때 빠질 수 없는 것이 바로 ‘깃허브 잔디(Contribution Graph)’입니다. 🌱 처음에는 백엔드 API를 통해 User 정보를 받아와야 하나 고민했지만, 찾아보니 프론트엔드에서 react-github-calendar 라이브러리만 사용하면 아주 간편하게 잔디를 심을 수 있다는 것을 알게 되었습니다. 이번 글에서는 ...
[JavaScript] 자바스크립트 this의 동작 원리 정리 (일반 함수 vs 화살표 함수)
자바스크립트를 공부하다 보면 가장 헷갈리는 개념 중 하나가 바로 this입니다. MDN 공식 문서를 보면 “함수를 호출한 방법에 의해 결정된다”라고 적혀있지만, 글로만 봐서는 이해하기 어렵습니다. 😵 오늘은 코드를 직접 실행해보며 상황에 따라 변하는 this의 정체를 파헤쳐 보겠습니다. 1. 실습 준비 (기본 세팅) 테스트를 위해 HTML 파...