![]()
# 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부터)
![]()
# 문제( 전체 코드가 아닌 일부분입니다 )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 { // 취소 // 취소 후 처리 로직}
![]()
# 지정한 횟수만큼 반복하고 index 수로 link 이동10번 반복하고 div의 키값은 각 인덱스 (0번째면 0으로...)링크 클릭했을 때 인덱스 값 이용해 이동 -> ex) 0번째면 /posts/0으로 이동 {[...Array(10)].map((e, index) =>( 게시글 {index} ))}# 정의한 배열로 div 반복 생성첫 번째 예시 응용배열 생성 후 그 배열만큼 반복 생성import './App.css';import { useState } from 'react';function App() { let [title, setTitle] = useState(['남자 코트 추천1', '강남 우동 맛집2', '파이썬 독학3']); retu..
