[해결됨]마지막 강의 내용 수정 화면이 기능을 못하네요.

해결했습니다.axios로 수정한 결과값을 넘겨주는 put부분의 URL과 입력값을 name의 값 설정에 문제가 있었는데, 그 부분을 수정하여 해결되었습니다.

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

해결되었습니다. /post/edit/${post.id}} className={"edit-button"}>로 수정해야 하더군요.

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

참고로 다른 화면간 이동은 다 되는데, 이 상세화면과 수정 화면.. 두 화면 사이가 제대로 이동이 안되네요.

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

PostDetail.js에서 수정화면으로 넘어가는 버튼에서값을 수정해봐도 잘 안들어가지네요./posts/edit/${post.id}} className={"edit-button"}>編集혹은/posts/edit/${id}} className={"edit-button"}>編集이 두 가지 방법 모두 화면 이동이 안되는 상황입니다.

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

import {Link, useParams, useNavigate} from "react-router-dom";import {useEffect, useState} from "react";import "./css/edit.css";import axios from "axios";let PostEdit = () =>{ const{id} = useParams(); // useParam : React RouterからURLパスのparameterを持って来る。 const navigate = useNavigate(); // Page이동에 사용함. let[title, setTitle] = useState(""); let[content, setContent] = useState(""); // let[post,setPost]=useState({ // title:"", // content:"" // }) let [post, setPost] = useState({ // useState：状態管理hook. 引数が状態 title:"", content:"" }); useEffect(()=>{ // setTitle(${id}'s name ); // setContent(${id}'s project ); // 最初はバックエンド側のApi側から値を呼び出す。 axios.get(${process.env.REACT_APP_API_URL}/posts/${id}) // REACT_APP_API_URL=http://localhost:8080/api .then(res=> { console.log('情報の呼出し成功',res.data); setPost(res.data); }).catch(err=>{ console.error('情報の呼出し失敗',err); // axios.get() -> サーバーへのapi要請 // -> 応答成功の場合 -> then() 実行 // -> 応答失敗の場合 -> catch() 実行 } // The end of catch ); // The end of axios.get() },[id]); const handleOnChange = (e)=>{ // 変化を反映するロジック const {name, value} = e.target; setPost({ ...post, [name]: value } ) } const handleSubmit = (e) => { e.preventDefault(); axios.put(${process.env.REACT_APP_API_URL}/posts/${id}, post) .then(res=>{ console.log(res.data); alert("編集が完了されました。"); navigate(/posts/${id}); }).catch( err=>{ console.log(err); alert("編集を失敗致しました。"); } ) alert("データが修正されました。"); // navigate("/post/edit/"+id); navigate(/post/${id}); } return ( Edit Posting Name // onChange={(e) => setTitle(e.target.value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"名前を入力してください。"} /> Project // onChange={(e) => // setContent(e.target.value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"参加中のプロジェクトを入力してください。"}/> {/**/} {/* Project*/} {/* setContent(e.target.value)}*/} {/* placeholder={"Enter Employee ID"}/>*/} {/**/} {/**/} {/* Project*/} {/* setContent(e.target.value)}*/} {/* placeholder={"Enter Other Information"}/>*/} {/**/} 編集 /post/${id} } className={"cancel-button"}> キャンセル );}export default PostEdit;

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

그 다음은 PostEdit.js입니다.import {Link, useParams, useNavigate} from "react-router-dom"; import {useEffect, useState} from "react"; import "./css/edit.css"; import axios from "axios"; let PostEdit = () =>{ const{id} = useParams(); // useParam : React RouterからURLパスのparameterを持って来る。 const navigate = useNavigate(); // Page이동에 사용함. let[title, setTitle] = useState(""); let[content, setContent] = useState(""); // let[post,setPost]=useState({ // title:"", // content:"" // }) let [post, setPost] = useState({ // useState：状態管理hook. 引数が状態 title:"", content:"" }); useEffect(()=>{ // setTitle(`${id}'s name ` ); // setContent(`${id}'s project ` ); // 最初はバックエンド側のApi側から値を呼び出す。 axios.get(`${process.env.REACT_APP_API_URL}/posts/${id}`) // REACT_APP_API_URL=http://localhost:8080/api .then(res=> { console.log('情報の呼出し成功',res.data); setPost(res.data); }).catch(err=>{ console.error('情報の呼出し失敗',err); // axios.get() -> サーバーへのapi要請 // -> 応答成功の場合 -> then() 実行 // -> 応答失敗の場合 -> catch() 実行 } // The end of catch ); // The end of axios.get() },[id]); const handleOnChange = (e)=>{ // 変化を反映するロジック const {name, value} = e.target; setPost({ ...post, [name]: value } ) } const handleSubmit = (e) => { e.preventDefault(); axios.put(`${process.env.REACT_APP_API_URL}/posts/${id}`, post) .then(res=>{ console.log(res.data); alert("編集が完了されました。"); navigate(`/posts/${id}`); }).catch( err=>{ console.log(err); alert("編集を失敗致しました。"); } ) alert("データが修正されました。"); // navigate("/post/edit/"+id); navigate(`/post/${id}`); } return ( Edit Posting Name setTitle(e.target.value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"名前を入力してください。"} /> Project // setContent(e.target.value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"参加中のプロジェクトを入力してください。"}/> {/**/} {/* Project*/} {/* setContent(e.target.value)}*/} {/* placeholder={"Enter Employee ID"}/>*/} {/**/} {/**/} {/* Project*/} {/* setContent(e.target.value)}*/} {/* placeholder={"Enter Other Information"}/>*/} {/**/} 編集 キャンセル ); } export default PostEdit;

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

import React from 'react';import {useNavigate, useParams} from "react-router-dom";import {Link} from "react-router-dom";import "./css/detail.css";import {useEffect, useState} from "react";import axios from "axios";let PostDetail = () => { const {id} = useParams(); // URL에 포함된 파라미터 값을 가져오는 hook // http://localhost:3000/users/1 : このURLへ移動後、idが1 の場合に含まれるデータを持って来る。 let navigate = useNavigate(); let [post, setPost] = useState({ // useState：状態管理hook. 引数が状態 title:"", content:"" }); const getPost = () =>{ // axios : 非同期Api 呼出し 処理 library axios.get(${process.env.REACT_APP_API_URL}/posts/${id}) // REACT_APP_API_URL=http://localhost:8080/api .then(res=> { // console.log('情報の呼出し成功',res.data); console.log(res.data); setPost(res.data); }).catch(err=>{ // console.error('情報の呼出し失敗',err); console.error(err); // axios.get() -> サーバーへの要請 // -> 応答成功の場合 -> then() 実行 // -> 応答失敗の場合 -> catch() 実行 }); // The end of catch } // The end of getPost function // getPost Arrow 関数を実行。 useEffect(()=>{ getPost(); },[]); const handleDelete = () => { if(!window.confirm("本当に削除しますか？")){ return; } axios.delete(${process.env.REACT_APP_API_URL}/posts/${id}) .then(res=>{ console.log(res.data); alert("削除されました。"); navigate("/home"); }).catch( err=>{ console.log(err); alert("削除過程の中でエラーが発生致しました。"); } ); // The end of catch // alert(情報が削除されました。); } // const post = { // id, // title: The name of ${id}, // content: The project of ${id}, // // empID: EmployId of ${id}, // // info: The other information of ${id} // }; return ( {post.title} {post.content} {/*{post.empID}*/} {/*{post.info}*/} /posts/edit/${post.id}} className={"edit-button"}> 編集 削除 戻る );}export default PostDetail;

13강 [로그인 단일 토큰] 에서 프로젝트 실행 시 에러

ES25을 HS256 변경해서 일단 에러가 나오는 현상은 막았습니다.

[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.

해결되었습니다. 가져오는 URL이 잘못되어 있었습니다.

[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.

(사진)npm install해서 다시 실행해보니 다음과 같은 결과가 나왔습니다.