🧐 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...

🧐 this는 왜 헷갈릴까요? JavaScript를 공부하다 보면 this는 꽤 헷갈리는 개념 중 하나입니다. 어떤 코드에서는 this가 객체를 가리키고, 어떤 코드에서는 undefined가 나오기도 합니다. 핵심은 this가 대부분의 경우 함수가 어떻게 호출되었는지에 따라 달라진다는 점입니다. 이번 글에서는 일반 함수의 this와 화살표 함수...

🧐 origin null CORS 에러가 왜 발생할까요? HTML과 JavaScript만으로 간단한 예제를 만들다 보면 파일을 브라우저에서 바로 열어 확인하는 경우가 있습니다. 예를 들어 VS Code에서 HTML 파일을 바로 열거나, 파일을 더블 클릭해서 브라우저로 실행하는 방식입니다. 그런데 JavaScript 모듈을 사용할 때 다음과 같은 ...