![]()
# Kakao Developers 설정 [React] Kakao Developers 애플리케이션 등록 및 설정# Kakao Developers 기본 설정Kakao API를 사용하기 위해서는 Kakao Developers에 내 앱등 등록 및 설정이 필요1. 애플리케이션 등록Kakao Developers에서 내 애플리케이션애플리케이션 추가하기 해당 항목 채우d0u0b.tistory.com # 리액트 설정1. env 파일에 JAVASCRIPT 키 등록우선 .env 파일을 만들어 api 호출 시 사용할 앱 키(JAVASCRIPT 키)를 저장 (하드코딩으로 넣게 되면 좋지 않음)파일은 프로젝트 루트 경로에 생성[.env ]REACT_APP_KAKAO_API_JS_KEY=jAVASCRIPT앱키2. Map.js 에..
![]()
# Kakao Developers 기본 설정Kakao API를 사용하기 위해서는 Kakao Developers에 내 앱등 등록 및 설정이 필요1. 애플리케이션 등록Kakao Developers에서 내 애플리케이션애플리케이션 추가하기 해당 항목 채우고 저장 → 생성된 애플리케이션 클릭앱 키라고 되어있는 4가지를 API 호출 시에 사용 2. 플랫폼 등록플랫폼 설정하기 혹은 좌측 메뉴에 플랫폼 선택 Android, iOS, Web 3가지 항목이 있는데 Web 플랫폼 등록 선택 (각자 만드는 프로젝트에 따라 선택하면 됩니다)위에서 발급된 키들을 사용할 수 있는 URL을 지정해 주는 작업으로 본인 사이트 URL 입력 (http부터)
![]()
# OpenSSL 설치[ MacOS - OpenSSL 설치 ] [MacOS] OpenSSL 설치 & 인증서 발급# OpenSSL 설치[ Windows에서 OpenSSL 설치 ] [Node.js] Windows - OpenSSL 설치부터 Node에 HTTPS 적용# OpenSSL 설치Windows용 OpenSSL 배포판 Shining Light Productions에서 제공하는 것을 사용해 설치 Shining Light Productions 링d0u0b.tistory.com Windows용 OpenSSL 배포판 Shining Light Productions에서 제공하는 것을 사용해 설치 Shining Light Productions 링크 들어가서 화면 내리면 설치 파일 다운로드원하는 버전, 윈도우 사양 ..
![]()
# 문제( 전체 코드가 아닌 일부분입니다 )1. front에서 로그인을 위한 요청 (post : /api/users/login)// 인증 코드를 사용하여 백엔드 서버로 요청axios.post(`${process.env.REACT_APP_API_BASE_URL}/api/users/login`, reqData) .then(res => { if (res.status !== 200) { alert(res.data.resultMsg); } // sessionStorage.setItem('loginUser', JSON.stringify(userInfo)); // 세션 저장 navigate(res.data.redirectUrl); })..
![]()
#문제아래의 코드는 server를 통해 tests의 목록을 가져와 화면에 출력하는 예시입니다 (server 쪽 코드는 생략)import { useEffect, useState } from 'react';export default function Test() { const [tests, setTests] = useState([]); useEffect(() => { fetch(`/api/tests`) .then(res => res.json()) .then(data => { const newItem = data.map(element => element.test_nm); setTests(prevT..
![]()
# confirm()사용자가 수행한 동작이나 입력 등을 확인하고 Yes/No 답에 따른 로직 처리 가능💡Ex- 게시글을 삭제할 때 "게시글을 삭제하시겠습니까?" 라는 메시지를 출력하고사용자가 [확인]을 선택하면 삭제 로직, [취소]를 선택하면 삭제 취소→ 이런식으로 "삭제" 동작에 대해 확인을 한번 더 하는 작업 # 사용 방법const confirmRes = window.confirm('메시지');if (confirmRes) { // 확인 선택 // 확인 후 처리 로직} else { // 취소 // 취소 후 처리 로직}
