Next13 삭제기능 만들기 3

삭제 애니메이션 코드.

const ListItemDeil = ({result}:any) => {
    return (
        <div className='list-bg'>
                  {result.map((item:any)=>(
                    <div className='item-box' key={item._id}>
                        <div className="list-item" >
                        <Link prefetch={false} href={`/detail/${item._id}`} >
                                <h4>{item.title}</h4>
                                <p>{item.content}</p>
                        </Link>
                        <Link href={`/edit/${item._id}`}>수정✏️</Link>
                        <span onClick={(e)=>{
                            //ajax 코드 처리가 기니까 axios 라이브러리를 쓰면 코드가 간단해진다.
                            fetch('/api/post/delet',{
                                method:'POST',
                                body : item._id
                        }).then((r)=>{
                            if(r.status == 200) {
                              return r.json()
                            } else {
                                alert("삭제 에러")
                              //서버가 에러코드전송시 실행할코드
                            }
                          })
                          .then((r)=>{ 
                            //성공시 실행할코드
                            const listItem = e.target.parentElement;
                            listItem.style.opacity = 0
                            setTimeout(()=>{
                                listItem.style.height = '0px'
                                listItem.style.display = 'none'
                            },1000)
                          }).catch((error)=>{
                            //인터넷문제 등으로 실패시 실행할코드
                            console.log(error)
                          })
                        }}>삭제🗑️</span>
                        </div>
                    </div>

            ))}
        </div>
    );
};

method / body 말고

URL 뒤에 ? 데이터이름 = 값 입력가능  (query string)

                        <span onClick={(e)=>{
                          fetch(`/api/test?id=${item._id}&age=34`)
                        }}>삭제🗑️</span>

장점 - 간단함 , GET요청도 데이터 전송가능 (요청.query) api 에서 사용 

단점 - 데이터 많으면 더러움. 민감한 데이터 노출 금지.

 

또다른문법.

api 안에 아무폴더를 만들고 [아무이름].js 만들어서 url파라미터 문법으로 만든다.

이렇게 만들면 fetch 에 abc/아무거나쓰면 그 api 를 실행한다. 이것을 파라미터 문법이라고한다.

                        <span onClick={(e)=>{
                          fetch(`/api/abc/${item._id}?age=34`)
                        }}>삭제🗑️</span>

*참고. : then((r)=>{})

r은 api 에서 리턴한 값을 말한다. r이 있으면 api 에서 리턴값이 있어야 작동하는 경우도있음.

 

GET요청으로도 서버로 데이터 전송가능 

 

POST 요청으로 데이터 전송할 때 <form>을 쓰거나 fetch() 안에 body에 넣어서 데이터를 전송할 수 있고

서버에선 요청.body라고 쓰면 수신된 데이터 출력이 가능합니다. 

 

그런데 GET요청으로도 데이터를 서버로 보내는 방법이 있습니다.

URL에 데이터를 몰래 담아서 보내는겁니다. 

그럼 서버에서 URL에 담긴 데이터를 출력해서 사용할 수 있습니다.

 

그래서 간단하게 문자 한두개 보내거나 그런 경우엔

POST요청보다는 GET요청 사용하는 경우가 많습니다.

다만 URL에 정보가 노출되기 때문에 민감하거나 길이가 긴 데이터는 POST요청으로 전송하는게 좋습니다.

예를 들어 아이디비번, 댓글, 블로그글 그런건 POST 요청이 낫겠군요. 

아무튼 URL에 데이터 담아서 보내는 방법은 2개가 있는데  

 

 

 

 

 

1. query string 사용하기

 

URL작성할 때 뒤에 물음표를 붙이고 

데이터이름=값

이렇게 적으면 서버로 데이터를 전송할 수 있습니다. 

 

/어쩌구?a=1&b=2&c=3 

이렇게 URL을 작성하면 서버로 {a:1, b:2, c:3} 이런 데이터가 전송됩니다.

물음표 뒤에 오는 것들을 query string이라고 부릅니다. 

 

 

console.log(요청.query)

서버측에서 query string을 출력하고 싶으면 하면 됩니다.

진짜 되나 query string 아무거나 넣어서 GET요청하고 서버에서 출력해봅시다. 

 

 

 

 

2. URL parameter 사용하기

 

전에 여러페이지 만들고 싶으면 URL parameter 만들면 된다고 했는데

서버에서도 URL parameter를 넣어두면 여러개의 서버 API를 한 번에 만들 수 있습니다. 

 

 

▲ 서버 URL 만들 때 파일명에 []를 붙이면 '아무문자'라는 뜻입니다.

그럼 이제 누가 /api/abc/아무문자 경로로 GET, POST 요청 등을 하는 경우 

[id].js 안의 코드가 실행됩니다.

 

/api/abc/안녕

/api/abc/반가워

이렇게 아무 데이터나 집어넣어도 [id].js 안의 코드가 실행됩니다. 

 

그리고 서버에선 요청.query 사용하면 URL parameter 자리에 집어넣은 문자를 맘대로 출력할 수 있습니다.

그래서 URL parameter 만들어둬도 유저가 URL에 숨겨놓은 데이터를 출력해줄 수 있지 않을까요. 

 

 

 

 

오늘의 응용문제 

 

만들었던 삭제기능을 지우고 GET요청을 사용해서 삭제기능을 다시 만들어봅시다.

query string 또는 URL parameter 둘 중 하나 사용하면 되겠군요. 

알아서 해보면 되는거라 답은 없습니다. 

안하면 다음강의 못들음 

 

 

 

 

 

그래서 이번 저번 강의 요약하자면

1. DB document 삭제는 deleteOne() 쓰고

2. ajax (fetch) 써도 서버로 GET POST PUT DELETE 요청가능하고 

3. 서버로 요청시 query string / URL parameter 써도 데이터 몰래 전송가능