Front-end

# 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..

Router 설정 [React] React생성부터 Node.js 연동까지 - 3) Router 설정React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성 Node.js 설치된 상태에서 진행(없는 사람들은d0u0b.tistory.com# Node.js 연동기존에는 npm start로 3000 포트의 리액트 실행화면이 출력되면 필요한 데이터를 DB에서 조회해서 가져오고 싶은 경우 Node.js로 연동해서 사용서버 설정하면 리액트는 3000, 노드는 8008 혹은 자신이 설정한 포트로 시작리액트 시작 : npm start서버 시작 : se..