Web - FrontEnd

[JavaScript] Uncaught SyntaxError: "[object Object]" is not valid JSON 오류

Error Message Uncaught SyntaxError: "[object Object]" is not valid JSON at JSON.parse () at Object.success ((index):19:40) at j (jquery-1.11.2.min.js:2:27295) at Object.fireWith [as resolveWith] (jquery-1.11.2.min.js:2:28108) at x (jquery-1.11.2.min.js:4:22061) at XMLHttpRequest.b (jquery-1.11.2.min.js:4:25980) 문제 상황 setInterval(() => { fetchCheatingHistory(); }, 1000); var fetchCheatingHistory ..

[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..

[React] React에서 모바일, PC버전 각각 다른 페이지로 라우팅하기

React로 작업하던 중, PC와 모바일에서 다른 형식으로 화면을 띄우고 싶어서 찾아봄! $ npm install react-device-detect 일단 패키지부터 설치. 이거 쓰면서 알게됐는데 npm 5버전부터는 --save 옵션이 기본 적용이라 쓸 필요가 없더라. 그리고 App.js 상단에 import { BrowserView, MobileView, isBrowser, isMobile, } from "react-device-detect"; 이거 추가해주고.. function App() { return ( ); } 원래 이랬던 애들을 function App() { return ( if(isMobile) { } else { } ); } 이런 식으로 바꿔주면 된다. 이용해서 해도 되고... 그건 알아서...

[React] React에서 dotenv 사용 시 오류. (Module not found: Error: Can't resolve 'fs' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib')

React 프로젝트에서 dotenv로 환경변수를 관리해주려고 할 때 생겼던 오류. .env파일은 루트 폴더 위치에, 환경변수를 사용하는 파일은 src 폴더 내에 존재할 때. Error Message ERROR in ./node_modules/dotenv/lib/main.js 1:11-24 Module not found: Error: Can't resolve 'fs' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib' ERROR in ./node_modules/dotenv/lib/main.js 3:13-28 Module not found: Error: Can't resolve 'path' in '/..

[HTML/CSS] 마우스 오버 시 커서 스타일 변경

태그 안에 sytle= 로 스타일 추가해주면 됨 커서 종류는 아래 링크 참조. Reference : MDN Web Docs

[React] React 설치하기. (M1 Mac 환경에서 React 설치)

1. Node.js 설치 Node.js를 LTS버전이나 최신 버전으로 우선 설치해주자. 나는 Latest(최신) 버전인 18.2.0 으로 가보겠다. 2. 작업 폴더 생성 알아서 폴더 생성해주고, VSCode에서 폴더 열어서 시작. 3. React 프로젝트 생성 터미널에 $ npx create-react-app [프로젝트명] 입력하면 쫘라라라라락 하고 프로젝트가 생성된다. (시간 좀 걸림) Test라는 프로젝트를 생성하고 싶으면 npx create-react-app Test 라고 입력하면 됨. 4. 폴더 다시 열기 [프로젝트명] 으로 생성된 프로젝트 폴더를 다시 VSCode에서 열어준다. 안 해도 되는데.. 터미널에서 명령어치고 이것저것 하기에 이게 편함 ^ㅁ^ 5. 끝! 이게 끝이다. React 설치 왤..