REACT11 WebSocket+STOMP: 개념 이해부터 구현까지 [목차]- 프롤로그- STOMP- STOMP의 Prefix- 채팅 흐름을 이해해 보자 0. 프롤로그우선, 웹소켓이 처음이면 아래 글을 참고하자! [Network] Web Socket목차0. 프롤로그1. 다양한 통신 방법2. WebSocket 통신 원리 3. HTTP vs WebSocket4. WebSocket의 한계와 해결 방법 0. 프롤로그지금까지 프로젝트를 하면서 사용했던 통신은 클라이언트가 먼저 요청을 보내hwanheejung.tistory.com 프로젝트를 시작하기 전 구글링으로 다른 사람들의 채팅 프로젝트를 구경했는데 프로토콜, 라이브러리에 대한 전반적인 이해 없이는 깔끔하게 코드를 관리하기가 힘들겠다는 생각이 들었다. STOMP, 메시지브로커, 메시지큐... 등등 알아들을 수 없는 말들이 .. 2024. 5. 29. 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. 프로젝트 5개 하고 돌아보는 React를 쓰는 이유 목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용한 팀프로젝트만 5개를 했더라. 프로젝트를 하면 확실히 해당 기술의 숙련도를 빠르게 향상할 수 있고, 무엇보다 재밌다. 그리고 해당 프레임워크의 장단점을 몸으로 느끼며 그 단점을 보완하기 위해 어떤 또 다른 기술이 등장했는지 흐름을 파악하기에는 프로젝트만 한 것이 없다. 하지만 눈앞에 놓인 기능 구현에만 집중하다 보면 "진짜 공부"를 놓칠 때가 많다. 예를 들어 React의 렌더링 과정에 대해 알고 코드를 치는 사람과 모르고 치는 사람.. 2024. 4. 4. 이전 1 2 다음
