신입개발자_장민기

{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" }, "todos": [ { "id": 1, "title": "Read SitePoint article", "complete": false }, { "id": 2, "title": "Clean inbox", "complete": false }, { "id": 3, "title": "Make restaurant reservation", "complete": false } ] } npm run json-s..

npm install axios App import { useEffect, useState } from "react"; import { fetchUserList, insertUser } from "./http"; import UsersList from "./components/UsersList" import Error from "./components/Error"; import Box from "./components/Box"; /* 1. npm install axios 2. http.js 파일 수정 */ export default function App(){ const [usersList, setUsersList] = useState([]); const [isFetching, setIsFetching]..

App import { useEffect, useState } from "react"; import { fetchUserList, insertUser } from "./http"; //추가 import UsersList from "./components/UsersList" import Error from "./components/Error"; import Box from "./components/Box"; export default function App(){ const [usersList, setUsersList] = useState([]); const [isFetching, setIsFetching] = useState(false); const [error, setError] = useState();..

DOCTYPE html> Find ID $(function() { //*********userId 관련 JS********************* $("#findIdForm").submit(function(event) { //이름 공백 확인 if ($("#ID_userName").val().trim() === "") { alert("이름를 확인해주세요"); $("#ID_userName").focus(); return false; } //SSN 길이 확인 if ($("#ID_ssn1").val().length != 6 || $("#ID_ssn2").val().length != 7) { alert("주민등록번호를 확인해주세요"); $("#ID_ssn1").focus(); return false; } }) /..

http.js(동일) export async function fetchUserList(){ //데이터 요청 응답 수신 const response = await fetch("https://reqres.in/api/users?page=2", { method: "GET" //정상요청 //method: "PUT" //에러 출력을 위한 put 사용 }); //비동기 요청: promise 객체 리턴 => await 처리 //await 사용함수는 전체를 async 처리해주어야 함 if(!response.ok){ console.log("fetchUserList.Error"); throw new Error("UsersList 요청 예외"); } const resData = await response.json(); ret..

익명게시판이기 때문에 ID/PW로 조회수 / 추천 상태를 저장할 수 없음 --> 무언가 사람을 구분해줄 것이 필요함 --> Math.random을 통해 16자리 무작위 숫자를 만듦 ==> 게시판 / 글에 들어갔을 때 applicatoin.setAttribute로 저장되는 16자리 무작위 숫자에 아이디 역할을 부여한다. 글에서 추천 / 비추천 / 노말로 바꾸면 ajax를 통해서 값이 변경된다 --> 아이디에 어떤 번호가 어떤 상태인지를 저장한다. --> map에 번호를 key로 상태를 value로 넣는다 --> 다시 ID를 key로 번호+상태를 value로 넣는다(이중 Map) --> 이중Map을 application.setAttribute로 저장한다. 글에 들어갈 때 현재 글 번호 + 현재 유저에 맞춰서..

컨트롤러 //게시판 글 목록 보기 @GetMapping("/viewDBoardList/{orderBy}") public ModelAndView viewDBoardList(@PathVariable("orderBy") String orderBy, HttpServletRequest request) { //게시판으로 바로 들어왔을 경우, 사용자 식별을 위한 값 저장 ServletContext application = request.getServletContext(); String key = (String) application.getAttribute("save"); if(key == null) { key = getNum(); application.setAttribute("save", key); } List li..

게시판 글 리스트 jsp 정보 | 문제 보고 | 질문 | 정리 | 잡담 컨트롤러, 서비스, dao는 기존 게시판 정렬을 재활용 매퍼 내용 추가 WHERE category = '정보' ORDER BY boardNum desc WHERE category = '문제 보고' ORDER BY boardNum desc WHERE category = '질문' ORDER BY boardNum desc WHERE category = '정리' ORDER BY boardNum desc WHERE category = '잡담' ORDER BY boardNum desc jsp에 검색 기능 추가 제목 + 내용 제목 내용 닉네임 컨트롤러에 함수 추가 //게시판 글 검색하기 @PostMapping("/searchPost") publi..

http export async function fetchUserList(){ //데이터 요청 응답 수신 const response = await fetch("https://reqres.in/api/users?page=2", { //method: "GET" //정상요청 method: "PUT" //에러 출력을 위한 put 사용 }); //비동기 요청: promise 객체 리턴 => await 처리 //await 사용함수는 전체를 async 처리해주어야 함 if(!response.ok){ console.log("fetchUserList.Error"); throw new Error("UsersList 요청 예외"); } const resData = await response.json(); return res..

https export async function fetchUserList(){ //데이터 요청 응답 수신 const response = await fetch("https://reqres.in/api/users?page=2"); //비동기 요청: promise 객체 리턴 => await 처리 //await 사용함수는 전체를 async 처리해주어야 함 const resData = await response.json(); console.log(resData); return resData.data; } App import { useEffect, useState } from "react"; import { fetchUserList } from "./http"; import UsersList from "./com..