전체 글29 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. React의 최적화 전략 목차- 프롤로그- 렌더링 최적화 기법- 상태 관리 및 업데이트 최적화- 로딩 성능 최적화프롤로그 지난번에는 리액트를 왜 쓰는지에 대해 브라우저의 렌더링 원리부터 리액트의 특징까지 알아보았다. 이렇게나 잘 만든 라이브러리인데 장점을 최대한 살려 코드를 짜야하지 않을까? 이번에는 최적화를 어떻게 하는지 알아보자! 프로젝트 5개 하고 돌아보는 React를 쓰는 이유목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용hwanheejung.tistory.com렌더링 최적화 기법#불필요한리렌더.. 2024. 4. 11. React의 원칙: Immutable Data Pattern 목차- 프롤로그- JavaScript 복습- React는 어떻게 state 변화를 감지하는가? - Immutable Data Pattern이란? - TypeScript + Immutable Data Pattern - 정리 프롤로그React의 핵심에는 컴포넌트 기반 아키텍처가 있다. 이를 통해 개발자는 재사용 가능한 UI 조각을 만들어 레고처럼 조립한다. React는 선언적 UI를 통해 애플리케이션의 상태가 변경될 때 자동으로 변경사항을 감지하고, 필요한 컴포넌트만을 효율적으로 리렌더링함으로써 개발자가 명시적으로 조작할 필요가 없도록 한다. 이러한 프로세스는 불변성 원칙을 통해 최적화된다. state를 직접 변경하지 않고 setState를 사용해야 하는 이유.. react에서 변경된 값을 감지하는 방법... 2024. 4. 11. JavaScript가 비동기를 다루는 방법 목차- 프롤로그- 자바스크립트의 실행 모델- Callback: 비동기 처리의 기본- Promise: 비동기 처리의 진화- async/await: 비동기 처리의 현대적 접근- 병렬 비동기 작업 처리 - 이벤트 루프와 비동기 프로그래밍의 깊은 이해- Web Workers와 멀티 스레딩- 결론프롤로그요즘 시간이 남을 때마다 기술면접에 대한 답변을 써보고 있는데 내가 얼마나 이론이 부족한 채로 코드만 치고 있었는지를 체감하고 있다.. 프로젝트를 하며 async/await를 수백, 수천번 썼지만 "Promise가 뭐예요?", "promise와 async/await의 차이가 뭐죠?"와 같은 질문에 대답이 술술 나오지 않는 나 자신을 보고 약간의 충격에 빠졌다. 잘 알지도 못하면서 별생각 없이 기계처럼 쓰고 있었구나.. 2024. 4. 5. 프로젝트 5개 하고 돌아보는 React를 쓰는 이유 목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용한 팀프로젝트만 5개를 했더라. 프로젝트를 하면 확실히 해당 기술의 숙련도를 빠르게 향상할 수 있고, 무엇보다 재밌다. 그리고 해당 프레임워크의 장단점을 몸으로 느끼며 그 단점을 보완하기 위해 어떤 또 다른 기술이 등장했는지 흐름을 파악하기에는 프로젝트만 한 것이 없다. 하지만 눈앞에 놓인 기능 구현에만 집중하다 보면 "진짜 공부"를 놓칠 때가 많다. 예를 들어 React의 렌더링 과정에 대해 알고 코드를 치는 사람과 모르고 치는 사람.. 2024. 4. 4. 이전 1 2 3 4 5 다음
