🧐 클래스는 어떻게 제어할까요? 프론트엔드 개발을 하다 보면 특정 요소에 클래스를 추가하거나 제거해야 하는 경우가 많습니다. 예를 들어 메뉴 열림 상태, 다크 모드, 애니메이션 트리거 같은 기능이 모두 클래스 제어와 관련이 있습니다. 예전에는 className 문자열을 직접 수정하는 방식도 많이 사용했지만, 지금은 classList API를 사용하...

🧐 JavaScript에서는 되는데 TypeScript에서는 왜 에러가 날까요? JavaScript에서는 DOM 요소를 선택한 뒤 바로 스타일을 바꾸는 코드를 자주 작성합니다. 그런데 TypeScript에서는 같은 코드에 빨간 줄이 생길 때가 있습니다. 대표적인 예가 querySelectorAll로 요소를 선택한 뒤 style에 접근하는 경우입니다...

🧐 TypeScript의 기본 타입을 알아볼까요? TypeScript를 사용하는 가장 큰 이유는 값의 타입을 명확하게 정해서 실수를 줄이기 위해서입니다. 변수나 함수에 어떤 값이 들어올 수 있는지 미리 정해두면, 잘못된 사용을 코드 작성 단계에서 발견할 수 있습니다. 이번 글에서는 TypeScript에서 자주 사용하는 기본 타입들을 예제로 정리해보...

🧐 TypeScript는 무엇일까요? TypeScript는 JavaScript에 타입 시스템을 추가한 언어입니다. JavaScript 문법을 기반으로 하면서, 변수나 함수 인자에 어떤 타입이 들어와야 하는지 미리 표시할 수 있습니다. 예를 들어 문자열이 들어와야 하는 곳에 숫자를 넣으면 TypeScript가 코드 작성 단계에서 에러를 알려줍니다. ...

🧐 브라우저에 데이터를 저장하려면? 웹 개발을 하다 보면 간단한 데이터를 브라우저에 저장해야 할 때가 있습니다. 예를 들어 테마 설정, 임시 입력값, 장바구니 정보 같은 데이터가 여기에 해당합니다. 이때 사용할 수 있는 대표적인 저장소가 localStorage와 sessionStorage입니다. 둘 다 브라우저의 Web Storage API에 속...

🧐 TypeScript에서 React Router를 사용할 때 무엇이 다를까요? React에서 페이지 이동을 구현할 때 react-router-dom을 자주 사용합니다. JavaScript 프로젝트에서는 바로 사용해도 큰 문제가 없지만, TypeScript에서는 URL 파라미터 같은 값의 타입을 함께 신경 써야 합니다. 예를 들어 /detail/:...

🧐 styled-components에서도 타입이 필요할까요? React에서 styled-components를 사용하면 컴포넌트처럼 스타일을 작성할 수 있습니다. 여기에 TypeScript를 함께 사용하면 styled component에 전달하는 props도 타입으로 안전하게 관리할 수 있어요. 예를 들어 버튼의 색상이나 크기를 props로 바꿔야 ...

🧐 for…in과 for…of는 뭐가 다를까요? JavaScript에서 반복문을 사용하다 보면 for...in과 for...of를 만나게 됩니다. 이름이 비슷해서 헷갈리기 쉽지만, 두 반복문은 사용하는 목적이 다릅니다. 간단히 말하면 다음과 같습니다. for...in → key를 순회합니다. for...of → value를 순회합니다. 이...

🧐 const, let, var는 어떻게 다를까요? JavaScript ES6 이전에는 변수를 선언할 때 주로 var를 사용했습니다. 하지만 ES6 이후에는 const와 let이 도입되면서 변수 선언 방식이 더 명확해졌습니다. 처음에는 셋의 차이가 헷갈릴 수 있습니다. const는 언제 쓰지? let은 언제 쓰지? var는 아직 써도 되나? ...

🧐 포트폴리오에 깃허브 잔디를 보여주고 싶다면? 개발자 포트폴리오를 만들다 보면 깃허브 잔디, 즉 Contribution Graph를 보여주고 싶을 때가 있습니다. 직접 GitHub API를 호출해서 데이터를 가져올 수도 있지만, 간단히 보여주는 목적이라면 react-github-calendar 라이브러리를 사용하면 편합니다. 이번 글에서는 re...