React38 [React] 환경변수(.env 파일) 사용하는 방법 1. 프로젝트 루트 경로에 .env 파일 생성 2. 변수명은 항상 맨 앞에 REACT_APP_ 까지 붙힌 후에 작명한다. REACT_APP_KAKAO_API_KEY = API 키 REACT_APP_URL = URL // "", '', ; 는 사용하지 않는다. 문자열 그대로 작성 3. 사용할 때에는 process.env.REACT_APP_변수명으로 사용한다. (import 필요 X) 4. .gitignore에 .env 파일 추가한다.( git에 안올라가게 ) 2024. 1. 23. [React] axios 통신 중 mysql의 timestamp 타입 데이터 가져와서 한국 시간으로 변환하는 방법 아래는 원하는 데이터가 들어있는 mysql 테이블이다. createdAt 컬럼의 데이터들은 글로벌 표준시(UTC)이기 때문에 유저가 보기 좋게 한국 시간으로 바꿔야 한다. 변환 방법 // axios 통신중 부분 코드 .then((res) => { console.log(res.data.items); const userData = res.data.items.map(user => ({ userId: user.userId, userNickname: user.userNickname, userEmail: user.userEmail, postingId: user.postingId, imageUrl: user.imageUrl, content: user.content, createdAt: new Date(user.cre.. 2024. 1. 8. [React] 로그인하지 않은 유저가 로그인이 필요한 path로 못들어오게 막는법 첫 화면 첫화면(localhost:3000)에서 로그인 시, JWT토큰을 응답받고 localstorage에 저장하고 /main 으로 이동하게 로직을 짰는데, 로그인을 하지 않았을 때는 /main으로 들어오지 못하게 하려고 한다. 막는 법 "/main"에 해당하는 컴포넌트 에 가서 const jwtToken = localStorage.getItem("jwtToken"); useEffect(() => { if (jwtToken == null) return nav("/"); fetchData(); }, []); Main 컴포넌트가 첫 마운트 됐을 때 안에 코드를 실행하게 했다. 로그인 시 localStorage에 넣은 토큰을 가져와서 null인 경우에 첫 화면으로 돌아가게 했다. 다른 방법도 여러가지 있을텐데.. 2024. 1. 4. [React] axios 요청할 때 http Method 별로 JWT 토큰을 headers에 넣어 보내는 방법 1. GET 요청 axios.get('https://example.com/api/data', { headers: { 'Authorization': 'Bearer yourAccessToken', 'Content-Type': 'application/json', // 예시 다른 헤더 추가 }, }) .then(response => { // GET 요청 성공 처리 }) .catch(error => { // 오류 처리 }); get()의 두번째 인자에 넣는다. 2. POST 요청 axios.post('https://example.com/api/data', { data: 'someData', }, { headers: { 'Authorization': 'Bearer yourAccessToken', 'Content-T.. 2024. 1. 4. [React] 서버와 통신 중 jwt 토큰을 응답 받았을 때 사용하는 법, 만료 하는 법 웹에서 JWT 토큰을 관리하는 방법으로는 localStorage 또는 sessionStorage에 저장하는 것이다. localStorage를 이용) // jwt 토큰을 받아온다. const jwtToken = res.data.access_token; // localStorage에 저장한다. localStorage.setItem("jwtToken", jwtToken); localStorage.setItem("nickname", res.data.nickname); // 필요 시에 토큰을 꺼내온다. localStorage.getItem("jwtToken") 위는 로그인에 성공 시 실행 코드들이다. 로그아웃 시 클라이언트에서도 제거, 서버에서도 제거한다. .then((res) => { localStorage.c.. 2024. 1. 3. [React] react-fontawesome 패키지 사용법 npm i @fortawesome/react-fontawesome npm i @fortawesome/fontawesome-svg-core 위 라이브러리 설치 npm i @fortawesome/free-regular-svg-icons npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/free-brands-svg-icons 무료 아이콘용 npm 패키지는 Regular, Solid, Brands 3개가 있다. 사용할 아이콘이 속한 패키지만 골라 설치 { "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-brands-svg-icons": "^6.4.0", ".. 2023. 12. 29. [React] 웹으로 posting API 구현하기 전에 만든 포스팅하는 api를 이용해서 웹으로 구현해보려고 한다. 참고 : https://dongsu96.tistory.com/149 코드 import axios from "axios"; import { useState } from "react"; function Posting(){ let [content, setContent] = useState(""); let [file, setFile] = useState(null); let [img, setImg] = useState(""); function post(){ if(content == "" || file == null) alert("입력 후 버튼"); const formData = new FormData(); formData.append("conten.. 2023. 12. 23. [React] 웹으로 Object detection API 구현하기 전에 api를 만들었으니 웹으로 이용해보려고 한다. 참고 : https://dongsu96.tistory.com/148 코드 import axios from "axios"; import { useState } from "react"; function Detect(){ let [file, setFile] = useState(null); function filefunc(){ if (file != null){ const formData = new FormData(); formData.append("photo", file); axios.post("URL", formData) .then((res) => { console.log(res.data); }) .catch((e) => { console.log(e); }).. 2023. 12. 23. [React] 웹에서 flask 서버로 통신해 검색 기능 구현하기 Postman에서 영화 검색 API 개발 후 Docker Image로 배포해놨던 flask 서버에 웹으로 데이터 요청과 응답을 받아보려고 한다. 코드 import { useState } from 'react'; import axios from 'axios'; function App() { let [search, setSearch] = useState(""); function func(){ axios.post(`https://도메인주소/movie?keyword=${search}&offset=0&limit=25`) .then((res) => { console.log(res.data); }) .catch((e) => { console.log(e); }) } return ( setSearch(e.target.v.. 2023. 12. 23. [React] localhost:3000 -> flask 서버 통신 시 CORS 에러 해결 과정 리액트로 만든 웹 -> Docker Image로 배포한 flask 서버로 데이터를 주고 받으려고 한다. -> 참고 https://dongsu96.tistory.com/132 라이브러리 axios를 이용해 해당 url로 요청을 보냈는데 오류가 뜬다. F12를 눌러 개발자도구의 console 탭에서 내용을 확인해보니 이런 에러 메세지가 떴다. Access to XMLHttpRequest at 'https://q42up841da.execute-api.ap-northeast-2.amazonaws.com/movie/15' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header.. 2023. 12. 23. 이전 1 2 3 4 다음
