서브페이지 수정, 댓글 데이터 입출력, 정보 입력

서브페이지를 처음에 올린것은 입력란까지 내가 테스트로 만든걸 같이 올리는 바람에 제외하고 수정해서 다시 올렸습니다.

 

한별님이 정보입력란을 주셔서 받아서 개인 메인페이지에서 열어 값을 넣어봤더니 잘 됐습니다.

그런데 한별님이 작성해주신 코드는 봐도 모르겠어서 시간 날때 물어보려합니다.

 

한별님 코드를 물어본 결과 jquery가 아닌 자바스크립트로 작업을 해서 다르다는 것을 알았습니다.

 

그래도 잘 모르겠어서 설명을 원한다고 하니 잘 설명해주셨습니다.

<script>
	//우리가 사용하는 document read와 같은 역할을 한다.
    window.addEventListener('load', () => {
    	// 자바스크립트로 아이디값을 변수에 넣어줬다.
        const addbtn = document.getElementById('addbtn');
        const photoUrl = document.getElementById('photoUrl');
        const userName = document.getElementById('userName');
        const userEmail = document.getElementById('userEmail');
        const blogUrl = document.getElementById('blogUrl');
        const oneLine = document.getElementById('oneLine');

		//addbtn 버튼을 클릭했을때 안에 내용들을 실행하라는 거다.
        addbtn.addEventListener('click', async () => {
        	//!이건 부정문이라 값이 없으면 알림창을 띄워주라는거다.
            if (!photoUrl.value) return alert('프로필 사진 URL을 입력해 주세요.')
            if (!userName.value) return alert('이름을 입력해 주세요')
            if (!userEmail.value) return alert('이메일 주소를 입력해 주세요')
            if (!blogUrl.value) return alert('블로그 주소를 입력해 주세요')
            if (!oneLine.value) return alert('한줄 소개를 입력해 주세요')
			
            // 우리가 fetch문을 사용할땐 비동기함수여서 then을 사용하지만, 여기서는 await을 사용했다.
            const api = await fetch("/create", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(new CreateUsers(photoUrl.value, userName.value, userEmail.value, blogUrl.value, oneLine.value)),
            });

			//fetch문을 json형식으로 변환해서 result에 넣어줬다.
            const result = await api.json();

			//만약 잘 넣었으면 1의값을 받아와 생성됐다는 알림창을 띄워주고 
            //그렇지않으면 생성실패알림창을 띄워준다.
            if (result == 1) {
                alert('생성되었습니다.')
                window.location.reload();
            } else {
                alert('생성 실패')
            }
        });
		
        //위 fetch문에 넣은 함수이다. 
        //값들을 받으면 json형식으로 변환해서 서버로 전달해준다.
        class CreateUsers {
            constructor(photoUrl, name, email, blogUrl, oneLine) {
                this.photoUrl = photoUrl;
                this.name = name;
                this.email = email;
                this.blogUrl = blogUrl;
                this.oneLine = oneLine;
            }
        }
    })
</script>

라고 이해했습니다.

 

그리고 진택님이 댓글을 작성하는데 잘 되지않아 고민하던중 제가 연습 해놨던 코드를 가지고 고쳐서 쓰기로 했습니다.

 

하지만 지금 댓글을 입력하고 출력하는데엔 문제없는데, 댓글을 저장할때마다 메인페이지로 나와져서 문제입니다.

어찌해야할지 아직 고민중입니다.

 

튜터님한테 보여주며 모르겠다고 하니 한페이지에서만 작동해서 그렇다고합니다.

그래서 serve페이지를 따로 받아와야한다고 해서 지금 시도중입니다.