REACT

[React/Node.js/Express] React 프로젝트 Node.js Express로 서버와 연동하기

Express 서버에 React 프로젝트를 합쳐서 같이 서버를 돌리고 싶고, 딱히 Express 서버와 React 간의 Data 송수신이 일어나지는 않는 상황. 라우팅만 제대로 해서 localhost:8080/couponPage 에 react 페이지를 띄우고 싶었음.. 굉장히 오래 걸렸다.. 하고나니 별 거 아닌데.. 그리고 나는 메인 페이지("/") 에서 react를 띄우고 싶었던 게 아니라 서브 디렉토리("/couponPage") 에 띄우고 싶었고.. Express에서도 Routing을 이미 사용하고 있으며, React에서도 react-router-dom 으로 Routing을 하고 있었기에 이것을 해결하는 과정도 필요했다.. ^ㅁ^ 아무튼 시작 1. React 프로젝트 Build 우선 서브 디렉토리(..

[React] XD 파일 React 페이지로 변환하기 (Fireblade 플러그인 사용)

xd파일을 받고 웹페이지를 만들어야 했는데.. 픽셀 하나하나 옮겨가며 맞출 생각 하니까 짜증났는데 그럴 필요가 전혀 없었고.. 리액트는 신이고 어도비도 신이다. 1. react-router-dom 설치 $ npm install react-router-dom $ npm install @types/react-router-dom 라우팅 할 때 필요한 거라 이미 설치했을 가능성이 크지만.. ^ㅁ^ 2. Fireblade Adobe XD 앱을 켜고, 플러그인 검색에서 Fireblade를 찾아 설치해 준다. 설치 후 XD 앱에서 Ctrl+Shift+F (Cmd+Shift+F) 를 누르면 창이 뜨는데, 우선 회원가입을 해 준다. 3. React, CSS로 export Setup 버튼을 누르고, export할 파일을 ..

[React] React와 Firebase Firestore 연동하여 CRUD 구현하기

우선, Node.js Express로 Firebase Firestore DB와 연동하기 + CRUD 와 유사한 부분이 많으니 보다가 이해가 안된다면 참고하면 좋을 것 같고, Firebase 프로젝트 생성 등에서 어려움을 겪는다면, 본문 하단 Reference 부분의 유튜브 영상을 참고하여 따라하면 좋을 것 같다. 1. Firebase 프로젝트 생성 생성해주고.. 2. Firebase Web App 추가 Firebase 프로젝트에서 웹 앱 추가. SDK 정보를 다른 곳에 저장해놓자. 아래에서 이용함. 이미 창을 닫았더라도 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성 에서 확인 가능하다. 3. React 프로젝트에서 Firebase SDK 설치 $ npm install firebase 로 re..