react-quill 이란?- html editor를 활용할 . 수있는 라이브러리- 러닝커브가 낮아 많이 사용- next13에서 사용한 코드를 next14 App Router로 작성 중 build 시 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생 react-quill 사용방법1. react-quill 설치yarn add react-quill 2. 코드 작성//Next13import ReactQuill from "react-quill";import "react-quill/dist/quill.snow.css";const Editor = () => { const Quill = ReactQuill.Quill;..

문제상황 분리된 API 파일(StorePostApi.js)에서는 response 로그를 남길 경우 나오지만 react파일(StorePage.js)에서 res 값을 찍을 경우 나오지 않음 // StorePage.js API호출 부분 StorePostApi(data) .then(res =>{ console.log("res",res) if(res){ setUserCheck(true); setTimeout(() => { navigate('/signup/stores/pos'); }, 500); } else{ throw new Error("토큰이 없습니다") } }) .catch(err=>{ console.error('API 호출 또는 토큰 발급 실패:',err) }) 방법 (해결) StorePostApi 함수에서..

더보기 Recoil 특징 - 해당 상태를 구독하는 구성요소를 가진 함수가 리렌더링된다. 문제상황 회원가입 후 Recoil을 사용하여 회원의 유무를 판단하고 PrivateRoute와 PublicRoute에서 useRecoilState를 사용했더니 다음 페이지로 넘어가야 되는 부분이 렌더링 되고 나서 PrivateRoute와 PublicRoute가 또 실행되어 원하지 않는 페이지로 이동 과정 1. PublicRoute 와 PrivateRoute 에서 UserStateCheck Recoil 변수를 사용 x => token 값의 유무로 판단 // PublicRoute.js const userCheck = useRecoilValue(UserCheckState) return userCheck ? element : ..

문제상황 SSL 인증서를 붙혀서 통신 URI가 `https://api.salesync.site`로 변경됨 해당하는 URI에 맞춰 JS 요청 엔드포인트 변경 ./src/api/BaseUrl.js 변경 전 const URL = "[http://api.salesync.site"](http://api.salesync.site"); export default URL; 변경 후 const URL = "[https://api.salesync.site"](https://api.salesync.site"); export default URL; 오류 배포시 통신 오류가 뜨고 데이터를 조회할 수 없음 분명 `https`로 변경했으나 `http`로 통신이 감 # 해결시도1 😀참조 : [https://velog.io/@shin..

목표 front GitHub Action을 사용해 workflow 자동화 참고 https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS.git https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask { axios.get(`${process.env.REACT_APP_SERVER_URL}/boardlist/${boardId}/commentlist`) .then(response => { setComments(response.data) console.log(response.data) }).catch(error => console.log(error)); // eslint-disable-next-line react-hooks/exhaustive-d..

목표 - 온프레미스 및 클라우드 환경에서 서비스 인프라를 (자동) 구성 - 어플리케이션 코드를 자동으로 배포, 실행하는 환경을 구성 참고 backend - flask : https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS.git front - react : https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS.git #1 VPC 생성 VPC 구성 - Public Subnet 2개와 Private Subnet 2개를 생성 #2 RDS 생성 myRds - MySQL user : admin pw : Password 퍼블릭 액세스 - 아니요 vpc 내부에서만 접속할 수 있도록 하기 위해 #2-1 BastionHost 인스턴스 생성 - BastionH..

API( Application Programing Interface) : 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법 flask.py from flask import Flask, request import pymysql import json, datetime app = Flask(__name__) # 데이터 베이스 연결 def getCon(): return pymysql.connect(host="localhost", user="root", password="1234", db="testConnection", charset="utf8", cursorclass=pymysql.cursors.DictCursor) def json_default(value): if isinstance(value, datet..

1. 프로젝트 생성 react C:\react>npx create-react-app data-app C:\react>npm start Flask C:\react>mkdir server C:\react>pip install Flask DB workbench 사용하여 database를 만든 후 table을 생성했습니다. create database testConnection; use testConnection; CREATE TABLE `testTable` ( `id` int unsigned AUTO_INCREMENT NOT NULL , `name` int unsigned NOT NULL , `age` varchar(30) NOT NULL , PRIMARY KEY ( `id` ) ); 데이터 삽입 INSERT..