반응형 개발 Study49 [React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store Redux란? 상태 관리 라이브러리로 Component별로 props/state를 바꿔주는 복잡한 관계를 redux 하나로 외부에서 state들을 공용으로 관리하여 가져다 쓸 수 있다. 1. State(상태) State란 React Component 내에서 사용되는 데이터 집합을 말하며 이 상태 정보를 가지고 컴포넌트의 속성을 바꾸거나 어떤 event가 일어났을 경우 상태 값을 변경하여 Component를 변경된 상태로 렌더링할 수 있다. 이런 State를 변경하는 것이 (Action)이며 Action과 Store를 연결해주는 스토어 관리자가 (Dispatcher)다. Store는 State를 관리하는 저장소로 State는 다음과 같이 객체 형식으로 사용한다. 객체 내에서 카테고리 별로 관리가 가능하다... 2022. 8. 4. [Error] Redux createStore 에러 처리 (deprecated) 이제 좀 Redux를 배워서 써먹어볼까하고 인터넷에 돌아다니는 예제들을 응용하여 작성 중에 Store 생성시 필요한 함수 createStore()가 deprecated 되어 사용할 수 없다고 떴다. 정확하게 말하면 configureStore()를 쓰라고 나오는데.... 어 일단 내가 초보니까 인터넷에 도는 예제들을 이용해야하기때문에 ㅎㅎㅎ 바뀐지 얼마 안된 configureStore를 쓸 수는 없고 당황하여 해결 방법을 찾아보았다. 1. 취소선은 유지되지만 그냥 그대로 사용할 수 있다고 한다. (그냥 무시하면서 쓸 것) 2. Redux에서 제시하는 configureStore()를 사용해볼 것 3. 아래대로 명시적으로 변경하여 그대로 사용할 것 난 그냥 3번으로 사용했다. 취소선도 보기 싫고 나온지 얼마 .. 2022. 8. 1. [JavaScript] let/var/const의 차이 변수 선언 시 자주 쓰이는 let/var/const 의 차이는 무엇일까? 자바스크립트 초보인 내게 자문자답하며~ 개념을 정리해보자 1. var 선언 var로 선언하는 경우 자바스크립트는 호이스팅(변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징) 에 따라 선언된 변수에 undefined가 먼저 할당된다. console.log(name) // output : undefined var name = 'jiyoon'; console.log(name); // output : jiyoon 또한, var의 경우 같은 함수 내에서 변수 사용이 가능하며 변수에 값을 재할당 할 수 있다. 그리고 변수의 중복 선언이 가능하다. 2. let 선언 let으로 선언하는 경우 선언보다 전에 호출했을 때 name에.. 2022. 8. 1. [React] UseEffect, UseRef 사용법 React에서 사용하는 Hook 중에서 UseEffect와 UseRef에 대해서 좀 더 알아보고 정리해보는 시간을 갖고싶어서 이 글을 작성한다. https://ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org 1. UseEffect란? 의존값으로 Props나 State등을 배열로 받아 해당 값이 변할 경우 UseEffect()의 첫번째 인자로 받은 함수를 실행시킬 수 있다. 밑에 세 가지 방법으로 사용되는데 1-1. 최초 렌더링 시에만 실행시키고 싶은 경우 useEffect의 두번째 인자로 [] 빈 배열을 설정해주면 최.. 2022. 7. 29. [React] Material UI를 이용한 FormDialog 구현하기 React에서 자주 쓰는 UI Framework 중 내 마음에 끌리는대로? 그 중 자주 쓴다는 Material UI를 이용해 Javascript의 Prompt 같이 입력하고 그 값을 받을 수 있는 Dialog를 만들어 보도록 하자. 1. Material UI 설치 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications fas.. 2022. 7. 29. [React] 실시간 채팅 구현하기 - Login 페이지 생성 그냥 js로 채팅기능 예제만 실행해 봤으나 본격적으로 react도 공부해볼겸 react로 client 구현을 제대로? 시작해보려고한다. 우선 CRA (Create-React-App)으로 리액트 프로젝트를 생성한다. 프로젝트 생성은 이전 글을 참고한다. 2022.07.04 - [개발 Study/Node, js, react] - [React] npm으로 react 프로젝트 생성하기 [React] npm으로 react 프로젝트 생성하기 1. Node.js 를 설치하여 npm 라이브러리 설치하기 앞선 글에서 Node.js 를 설치하여 npm 및 관련 라이브러리들을 설치하는 방법을 작성했으므로 아래 글을 참조한다. https://chuun92.tistory.com/13 [Node.js] No.. chuun92.t.. 2022. 7. 25. [Node.js/Mongoose] 실시간 채팅 구현하기 - CRUD API 생성하기 및 Express 라우터 사용 오늘은 라우터를 사용하여 외부에서도 API를 통해 DB에 데이터를 Create/Read/Update/Delete 할 수 있는 기능을 구현하여 Postman으로 테스트하는 걸 해보겠다. 소스는 이런식으로 구성했다. db 폴더 안에 모델들을 넣어 놓고, index에서 db 연결을 해준다. 각 모델에 해당하는 controller들 생성하여 CRUD 기능들을 구현하였다. route.js 에서 express router로 라우터를 구현하였다. 1. Model 생성 총 4가지 모델을 생성했으며 생성 방법은 아래 글에 나와있다. 2022.07.12 - [개발 Study/Node, js, react] - [Node.js/MongoDB] 실시간 채팅 구현하기 - MongoDB 설치, 연동 및 모델 생성 { if (!re.. 2022. 7. 13. [Node.js/MongoDB] 실시간 채팅 구현하기 - MongoDB 설치, 연동 및 모델 생성 실시간 채팅 구현을 하려면 NoSQL 데이터베이스를 써야하므로 많은 DB 중 Node랑 잘 맞는 그리고 Socket.io와도 잘 맞는 MongoDB로 선택했다. *NoSQL이란 ? NoSQL 데이터베이스(일명 "SQL만을 사용하지 않는 데이터베이스")는 표 형식이 아니며, 관계형 테이블과는 다른 방식으로 데이터를 저장한다. NoSQL 데이터베이스는 데이터 모델에 따라 유형이 다양하다. 주요 유형으로는 문서, 키 값, 와이드 컬럼, 그래프가 있으며, 이들은 유연한 스키마를 제공하고, 대량의 데이터와 높은 사용자 부하에서도 손쉽게 확장이 가능하다. https://www.mongodb.com/ko-kr/nosql-explained NoSQL이란 무엇입니까? NoSQL Databases 설명 NoSQL은 먼저 .. 2022. 7. 12. [React/Error] React 버전 변경/다운그레이드 및 에러 해결 *create-react-app 설치 후 다른 모듈 설치 시 버전 호환 문제 실시간 채팅 프로젝트를 위해 react 개발환경을 다음과 같이 설치 했다. $npx create-react-app chat 그런 다음 react ui를 사용하기 위해 관련 모듈을 설치했는데 다음과 같은 에러가 떴다. @materail-ui/core 모듈을 지원하기 위해선 react 버전을 18.2.0(현재버전) => 16.8.0(이전버전) 으로 변경해야 하는 문제였다. 설치된 react 를 다운그레이드 하기 위해선 다음과 같이 하면 된다. $npm install --save react@^16.8.0 react-dom@16.8.0 변경했더니 여기서 또 문제가 발생하는데 경고라서 무시하고 넘어가고싶지만 testing library .. 2022. 7. 6. 이전 1 2 3 4 5 6 다음 반응형
