728x90 반응형 웹/React3 [React] Redux 사용하기 (feat. TypeScript) 1. redux 1.1. 리덕스란?단일 저장소(store): 리덕스는 하나의 중앙 저장소를 통해 애플리케이션의 상태를 관리 -> 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 변경하는 것을 금지하고, 상태가 갱신될 때는 새로운 객체를 반환 -> 직접 상태를 변경하는 것이 아니기 때문에 예측 가능성을 높이고 상태 관리의 안정성을 제공액션(Actions) & 리듀서(Reducers): 상태를 변경할 때는 액션 객체를 디스패치하고, 리듀서는 이 액션에 따라 새로운 상태를 반환 -> 이를 통해 상태 변경 로직이 예측 가능하고 테스트하기 쉬움 - 리액트에서는 이미 state 랑 props 로 상태 관리 잘하고 있는데 (feat. 리덕스를 쓰는 이유)? 리액트에서 데이.. 2024. 11. 7. [React+JS/리액트] PWA 셋팅해서 앱으로 발행하기 (모바일앱인척하기) 구글이 밀고있는 PWA 것이 있다. Progressive Web App 이라는 것으로 웹 사이트를 안드로이드나 iOS 모바일 앱처럼 사용할 수 있도록 만드는 웹개발 기술이다. 모바일 앱처럼 만든 앱은 모바일 앱처럼 스마트폰 홈화면서 설치할 수 있다. 웹사이트를 PWA 화 시키는게 뭐가 좋을까? 1. 스마트폰, 태블릿 바탕화면에 웹사이트 설치가 가능 앱처럼 설치된 웹을 누르면 상단의 url 바가 제거된 크롬 브라우저가 뜬다. 일반 사용자는 이것이 웹인지 앱인지 구별하지 못한다. 2. 오프라인에서도 동작할 수 있음 service-worker.js 라는 파일과 브라우저의 Cache storage 덕분에 그렇다. (자바스크립트로 게임을 만들때 유용할 것 같다) 3. 설치 유도 비용이 매우 적음 앱 설치를 유도하.. 2024. 7. 30. [React/리액트] Vite 설치 및 사용 Vite 란? 모던 웹 프로젝트 개발에 초점을 맞춰 만들어진 빠르고 간결한 빌드 도구로, CRA 의 단점을 해결하기 위해 Esbuild 를 기반으로 만들어진 빌드툴이다. CRA 는 자바스크립트로 구성된 Wepack 을 사용하는데, 다소 속도가 느린 편이다. 평소에는 체감하지 못할 수 있지만, 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. (참고로 Esbuild 는 Go 언어로 작성된 자바스크립트 빌드툴로 속도가 빠르다.) Vite 사용하기 아래 순서대로 따라하면 된다. - $ npm init vite- 프로젝트 이름 설정 - 프레임워크 설정 - variant 설정 -> 타입스크립트를 선택할 것인지 여부 - $ cd 프로젝트 이름- npm install- npm run dev $ npm .. 2024. 6. 22. 이전 1 다음 728x90 반응형
