![]()
# 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 에..
![]()
# 문제( 전체 코드가 아닌 일부분입니다 )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(prevTe..
![]()
# 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..
![]()
Node.js 연동 [React] React생성부터 Node.js 연동까지 - 4) Node.js 연동Router 설정 [React] React생성부터 Node.js 연동까지 - 3) Router 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) Red0u0b.tistory.com# 시작더미데이터 Hi가 아닌 db에서 데이터 조회 후 그 정보 출력db는 postgreSQL 사용# 모듈 설치npm install pg# 테이블 생성필요한 text 테이블 생성test_seq_no 는 시퀀스 이용해서 값 넣을거라 sq_test 시퀀스 생성CREATE TA..
