728x90 반응형 리액트26 [React+JS/리액트] 웹 스터디 11주차 성능개선1: 개발자도구 & lazy import props 를 보냈는데 출력이 안된다거나 이미지를 넣었는데 안보이는 버그같은게 생기면 개발자도구를 켜서 Elements 탭을 살펴보면된다.이 탭에서는 내가 짠 코드가 실제 html css 로 변환되어 보여지는데, 컴포넌트로 보고 싶다면 리액트 개발자도구를 설치해서 보면된다. - 크롬 확장 프로그램: React Developer Tools 설치하러가기 Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.com 크롬 웹스토어에 들어가서 React Developer Tools 을 검색하고 설치한 뒤에 개발자도구에 들어가면 Components 탭이 생기는데, 여기서 개발중인 리액트사이.. 2024. 7. 12. [React+JS/리액트] 웹 스터디 10주차 localStorage - 1 새로고침하면 모든 state 데이터는 리셋된다. 왜냐면 새로고침하면 브라우저는 html css js 파일들을 처음부터 읽기 때문이다. 이게 싫다면 state 데이터를 서버로 보내서 DB 에 영구저장하면 되는데, 서버가 없는 경우 차선책으로 localStorage 를 이용해도 된다. localStorage 는 유저의 브라우저에 정보를 저장하고 싶을 때 쓰는 공간으로 정보를 반영구적으로 저장이 가능하다. 저장된 정보는 크롬개발자 도구에서 Application 탭에 들어가면 확인할 수 있다. - localStorage 에는 사이트마다 5MB 정도의 문자 데이터 저장 가능 (문자만 저장가능)- object 자료와 비슷하게 key/value 형태로 저장- 유저가 브라우저 청.. 2024. 7. 11. [React+JS/리액트] 웹 스터디 9주차 Redux - 4 redux state 가 array/object 인 경우 변경하기 {name : 'kim', age : 20} 이렇게 생긴 객체의 'kim' 을 'park' 로 변경하고 싶을 때 두 가지 변경 방법이 존재한다. 1번 - 변경함수를 통해 return 오른쪽에 적은 데이터로 기존 state 를 갈아치워주는 방법2번 - state 를 직접 수정하는 방법 2 번처럼 state 를 직접 수정하는 문법 사용이 가능한 이유는 Immer.js 라이브러리가 state 사본을 하나 더 생성해주기 때문이다. ( (Immer.js 라이브러리는 Redux Tookit 에 내장되어 있어 Redux 설치시 자동으로 딸려온다)// 1let user = createSlice({ name : 'user', init.. 2024. 7. 4. [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 2 3 4 5 6 7 다음 728x90 반응형
