JavaScript,TypeScript4 Module System 목차1. JavaScript 모듈이 왜 등장했을까2. 모듈 시스템의 발전 흐름 (CommonJS > AMD -> UMD -> ESM)3. 마치면서.. (다음 글 예고) 1. JavaScript 모듈이 왜 등장했을까 모듈이 왜 등장했는지부터 알아보자. 그러려면 초창기 JavaScript가 어떤 식으로 사용되었는지부터 알아야 한다. 초기에는 작은 규모의 스크립트만 작성했기 때문에 전역 스코프가 기본적으로 적용되었다. 모든 변수와 함수는 기본적으로 전역 공간에 저장되었고, 이에 따라 서로 다른 스크립트에서 같은 이름의 변수나 함수를 정의하게 되면, 하나가 다른 것을 덮어쓰는 문제가 발생했다. 그러다 보니 유지보수가 심각하게 어려워졌다. 나도 vanilla js로 개발한 첫 프로젝트에서 같은 문제를 맞닥뜨린 .. 2024. 8. 20. TSC: 타입스크립트가 자바스크립트로 바뀌는 과정 목차- 프롤로그- TSC Architecture- Processing Overview- 에러 처리1. 프롤로그자바스크립트는 개발자가 실수를 해도 종종 에러를 명시적으로 표시하지 않는다. 아래 예시를 보자. let result = "5" + 1; // 결과: "51" let check = "5" == 5; // 결과: true (동등 연산자는 타입을 강제 변환함)let person = { name: "그냥하는거지뭐~" };console.log(person.age); // 결과: undefined (에러가 발생하지 않고 undefined 반환) 이처럼 예측 가능성이 너무 떨어진다. 특히 서버에서 클라이언트로 데이터를 전송할 때나 React에서 데이터 흐름을 설계할 때, 데이터의 타입을 정확히 관.. 2024. 4. 30. TypeScript 100% 활용하기 목차 - 프롤로그 - 1. 조건부 타입으로 타입 좁혀나가기 - 2. 매핑된 타입으로 깔꼼하게 - 3. 객체를 타입화할때 Record? Index Signature? - 4. 타입 가드 - 5. Redux + TS: configureStore.hooks.ts 프롤로그: 리액트와 타입스크립트의 케미 리액트의 렌더링 과정에서 데이터는 핵심적인 역할을 한다. 리액트의 동작 원리는 모두 데이터의 흐름을 기반으로 한다고 해도 과언이 아니다. 하지만 동적 타입 언어인 자바스크립트에서는 변수의 타입이 실행 시점에 결정되기 때문에, 개발자의 의도와 다르게 타입이 변환되어 예상치 못한 오류가 발생할 수 있다. 예를 들어, 숫자를 예상했지만 문자열이 전달될 경우, 불필요한 타입 변환으로 인한 성능 저하 또는 런타임 오류가 .. 2024. 4. 12. JavaScript가 비동기를 다루는 방법 목차- 프롤로그- 자바스크립트의 실행 모델- Callback: 비동기 처리의 기본- Promise: 비동기 처리의 진화- async/await: 비동기 처리의 현대적 접근- 병렬 비동기 작업 처리 - 이벤트 루프와 비동기 프로그래밍의 깊은 이해- Web Workers와 멀티 스레딩- 결론프롤로그요즘 시간이 남을 때마다 기술면접에 대한 답변을 써보고 있는데 내가 얼마나 이론이 부족한 채로 코드만 치고 있었는지를 체감하고 있다.. 프로젝트를 하며 async/await를 수백, 수천번 썼지만 "Promise가 뭐예요?", "promise와 async/await의 차이가 뭐죠?"와 같은 질문에 대답이 술술 나오지 않는 나 자신을 보고 약간의 충격에 빠졌다. 잘 알지도 못하면서 별생각 없이 기계처럼 쓰고 있었구나.. 2024. 4. 5. 이전 1 다음
