전체 글 (6) 썸네일형 리스트형 [React] + [Redux Toolkit]을 활용해 효율적인 재사용 모달을 만들어 보자 ! 개인 프로젝트를 진행하던 중 모달을 특정 지역에서 사용하다가 추가적으로 모달을 사용해야 하는 페이지들이 생기다 보니 복잡한 상태관리와 중복되는 로직 때문에 많은 불편함을 느껴 지역 상태관리가 아닌 전역 상태 관리로 모든 곳에서 사용해야겠음을 느꼈고, 리액트와 리덕스 툴킷을 사용하던 중이어서 전역으로 상태 관리를 하는 모달을 만들면 되겠다고 생각하고 기존에 만들어 놨던 구조에서 전부 수정하여 만들게 되었습니다. 첫 번째 : 사용하고 싶은 모달 컴포넌트를 만듭니다. 먼저, 사용할 모달을 만들어줍니다. 필요한 만큼 만듭니다. 아래 코드는 예시입니다. const Modal() => { return ( 모달 ); } 두 번째 : Redux Store에 ModalSlice를 만들어 줍니다. 모달을 전역에서 사용하려.. [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterS 리액트와 노드로 프로젝트를 진행하던 중 터미널에 이런 경고 메시지가 떴습니다. 번역을 해보니 [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] 사용 중단 경고: 'onAfterSetupMiddleware' 옵션이 사용되지 않습니다. 'setupMiddlewares' 옵션을 사용하십시오. (`node --trace-deprecation...`을 사용하여 경고가 생성된 위치를 표시하십시오.) (노드:78748) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] 사용 중단 경고: 'onBeforeSetupMiddleware' 옵션이 사용되지 않습니다. 'setupMiddlewares' 옵션을 사용하십시오. 와 같은 말이었다. .. MongoDB 를 Mongoose로 쉽게 사용 해보기 혹시 설치방법을 모르신다면 설치법에 대한 게시물이 있으니 보고 오시면 편합니다! 이 게시물은 node에 대한 기본 세팅이 다 끝났다는 가정하에 DB를 연결해 보는 글이니 참고 바랍니다. 먼저 database 메뉴에서 Connect 버튼을 클릭합니다. 그러면 아래와 같은 창이 뜨는데 여기서 노드 버전을 설정하고 터미널에 npm install mongodb@을 복사해서 설치합니다. 터미널에서 Mongoose를 설치해줍니다. 여기서!!! Mongoose는 Node.js와 MongoDB를 연결해 주는 ODM입니다. (ODM(Object Document Mapping) : 객체와 문서를 1대 1로 매칭하는 역할) MongoDB의 ODM은 다양하지만 Mongoose가 가장 유명합니다. 설치 npm install m.. MongoDB 간단 개념 및 가입,DB생성 들어가기 전... DB 에는 관계형 DB와 비관계형 DB가 있습니다. 간략하게 알아보고 들어가겠습니다. 관계형 데이터베이스(SQL)는 데이터를 테이블 형태로 저장하며, 테이블 간의 관계를 설정하여 데이터를 검색하고 처리할 수 있습니다. 하지만 이러한 방식은 데이터의 복잡성이 증가하면서 유지보수와 확장성이 떨어지는 단점이 있습니다. 또한, 테이블 간의 Join 연산에 대한 부하가 크고, 대용량 데이터 처리에는 적합하지 않은 경우도 있습니다. 관계형 데이터베이스에는 Oracle, MySQL, PostgreSQL, Microsoft SQL Server 등이 있습니다. 비관계형 데이터베이스(NoSQL)는 관계형 데이터베이스 모델이 아닌 다른 모델을 사용하는 데이터베이스를 말합니다. 관계형 데이터베이스 의 단점을.. React와 express 연동 및 concurrently package로 React 서버와node 서버 동시 실행 하기(2) React와 express 연동 및 concurrently package로 React 서버와 node 서버 동시 실행 하기(1) 게시물의 내용의 다음 step입니다. 6. 클라이언트 폴더 생성 npx create-react-app 위에 명령어를 터미널에 입력하여 client 폴더를 설치합니다. 이때 파일명은 server와 파일명을 구분 짓기 좋게 client로 작명해 줍니다. 설치 완료 하면? 이렇게 client 폴더 server 폴더의 경로를 잘 설정하여 설치 완료 했습니다. 7. 터미널에 npm install -D concurrently 명령어 입력 후 세팅 -D는 devDependencies에 설치한다는 것을 의미합니다. 설치가 잘 됐으면 루트 폴더에 있는 package.json 파일에 접근해서 s.. React와 express 연동 및 concurrently package로 React 와express 동시에 실행 하기(1) 이 게시물은 React와 node.js의 기초 지식을 가지고 따라 해 보시는 걸 추천합니다. 1. 프로젝트 파일 만들기 먼저 원하는 경로에 프로젝트를 만들 루트 폴더를 만듭니다. 2. npm init 루트 폴더에 접근해서 터미널에 npm init을 하고 엔터를 치다가 entry point 부분에서 서버를 실행시킬 때 실행될 메인 파일 경로 설정을 해줍니다. 저는 server 폴더를 만들고 그 안에 server.js 파일을 만들 것이기 때문에 server/server.js로 설정을 해놨습니다. 그 후 쭉 엔터를 쳐서 설치 완료를 합니다. 그러면 package.json 파일이 생성됩니다. 터미널 dv-yeop@ijun-yeob-ui-MacBookAir test % npm init This utility wi.. 이전 1 다음
