반응형 React5 React 효과적인 비동기 처리 이번글은 해당 영상 보고 정리한 글입니다. https://youtu.be/FvRtoViujGg 아직까지도 웹 서비스 다루기에 가장 까다롭고 어려운 부분이 아무래도 비동기라고 말씀을 하신다. 이런 비동기 처리를 React에서 어떻게 효과적으로 비동기 처리 하는지 다루는 정말 감명 깊게 본 영상이어서 회고하는 글을 쓰기 시작했다. 비동기 선행학습이 필요함 (callback, Promise, async await, 체인메서드 then, try, catch, finally 등) 비동기 프로그래밍이란(Asynchronous): 비동기방식은 현재 작업의 요청과 해당작업의 응답이 동시에 진행되지 않아도 되는 것으로 응답에 관계없이 바로 다음 동작이 실행되는 것을 말한다. 다음 동작을 순차적으로 실행하면서 해당 비동기.. 2023. 2. 11. 기존 프로젝트 React 17에서 React 18로 업그레이드하기 현재 회사 웹사이트가 Next12 버전에 React17 버전을 사용하고 있다. React18도 출시한 지 꽤 되기도 했고 요즘 React 공식문서 공부하면서 React18 버전 이후에 나온 새로운 강력한 기능 Suspense도 실무에 적용해보고 싶어서 React17버전에서 18로 이전하기로 결정했다 이전하기 전에 걱정이 많았다. 이유는 현재 맞춰 저 있는 라이브러리들이 다 React17에 맞춰져 있기 때문에 React18 버전으로 업그레이드했을 때 호환성 문제가 생길까 봐 무서웠지만. 프로젝트가 점점 커지기 전에 하는 게 맞다고 생각해서. 더 늦어지기 전에 프로젝트 업그레이드 하기로 결정했다. 이미 있는 프로젝트이다 보니깐 업그레이드 가 목적이기 때문에 @latest로 최신 버전 react, react-.. 2023. 2. 2. [React 공식문서 공부] React로 생각하기 React는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리이지만 이해하고 유지보수하기 쉬운 방식으로 앱을 구성하고 구축하는 방법을 이해하는 것은 까다로울 수 있습니다. 공식문서 “React로 생각하기” 챕터에서 React에서 생각하는 과정을 정리했습니다. 1단계: 목업으로 시작하기 앱을 만들기 전에 최종 제품이 어떻게 생겼는지 명확하게 이해하는 것이 중요하다고 나온다. 그래서 목업을 미리 알고 설계하는 것이 React로 생각하기 첫 번째 단계라고 생각한다. JSON API 반환되는 데이터 형식을 미리알고 설계하는 게 좋은 방법이다. 데이터 형식을 알고 미리 모의는 최종 제품을 시각적으로 표현한 것으로 필요한 개별 구성 요소를 정의하고 함께 맞출 방법을 정의하는 데 도움이 됩니다. 예를 들어 JSON.. 2023. 1. 29. [React 공식문서 공부] JSX란? JSX란? JSX라고 불리는 이 구문은 string도 아니고 HTML도 아닙니다. JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트의 extension 입니다. JSX는 근본적으로 React.createElement 함수를 편하게 사용하기 위해서 나온 자바스크립트 확장문법이다. HTML 스러운 문법과 함께 JS를 표현할 수 있어 편리하고 가독성이 높고 작성하기 쉽습니다. JSX는 객체로 변환이 됩니다. Babel은 JSX를 React.createElement() 호출로 컴파일합니다 // 1, 2는 동일한 결과다 //1 const element = ( Hello, world! ); //2 const element = React.createElement( 'h1', {className:.. 2023. 1. 29. 이전 1 2 다음 반응형
