[축구모임 홈페이지개발] 12/25 개발일지 Nodejs / 회원가입, 로그인페이지 구현, 로그인 예외처리

오늘 손봐야할 부분은 우선 로그인, 회원가입 디자인 구현하기, 공지사항 게시할 때 다수의 이미지 게시하기.

 

우선 로그인 화면을 구성했다.

 

디자인팀이 시안을 준 대로 잘 디자인 된 거 같아서 만족도가 높다.

 

근데 회원가입 버튼을 누를 때

                                    <button class="register-button" onclick="gotoRegister()">회원가입</button>

 

이렇게 영역을 클릭하면

function gotoRegister() {

            window.location.href = '/register';

        }

 

다음과 같은 함수가 실행되도록 구현했는데, 제일 처음에 버튼을 클릭하니까 

 

"Missing credentials"

 

다음과 같은 에러가 발생했다.

 

이유는 내가 로그인 화면에 내용들을 중앙정렬 하느라 form 태그 안에 영역을 만들고 그 안에서 중앙정렬하기 위해서,

회원가입 버튼을 form 태그 안에 배치해서 였다.

그건 다시 회원가입 버튼을 form 태그 밖으로 빼냄으로서 해결을 했는데,

내가 이 과정에서 알게 된 정보는 입력값에 정보들을 안 넣은 상태에서 로그인 버튼을 누르면, 즉 form 태그로 전송을 하면

위와 같이 인증 관련 에러가 발생한다는 것이다.

이는 내가  예외처리를 해서 해결해야하는 부분이다.

빈 칸이 하나라도 있을 때,

아이디가 DB에 없을 때,

PW 가 틀렸을 때

이렇게 세 파트를 구현해내야한다.

 

그 전에 간단하게 공지사항 상세페이지에서 댓글 작성을 할 때, 댓글이 입력되어있지 않은 상태면 댓글이 없다는 팝업을 띄우는 기능을 먼저 작성해보려한다.

 

---

간단하게 구현할 수 있을 줄 알았는데,

 

app.post('/comment', async (req, res) => {

  if (!req.body.content) {

    return res.status(400).json({ error: '댓글을 입력하세요.' });

  } else {

    await db.collection('comment').insertOne({

      content: req.body.content,

      writerId: new ObjectId(req.user._id),

      writer: req.user.username,

      parentId: new ObjectId(req.body.parentId)

    })

    res.redirect('back')}

})

 

위와 같은 코드에서 나는 댓글을 입력하세요. 라는 문구를 alert 로 띄우기 위해서

 

        document.addEventListener('DOMContentLoaded', function () {

            const commentForm = document.querySelector('form');

            commentForm.addEventListener('submit', async function (event) {

                event.preventDefault();

                const commentContent = document.querySelector('.comment-input').value.trim();

                if (!commentContent) {

                    const response = await fetch('/comment', {

                        method: 'POST',

                        headers: {

                            'Content-Type': 'application/json',

                        },

                        body: JSON.stringify({ content: commentContent }),

                    });

                    const responseData = await response.json();

                    if (responseData.error) {

                        alert(responseData.error);

                    } else {

                        // 서버에서 정상적으로 처리된 경우에 대한 로직

                    }

                }

            });

        });

 

위와 같은 코드를 짜줬다.

이 코드같은 경우는 코드 분석 공부를 확실하게 해봐야겠다.

기능구현은 잘 되는데 코드가 이해가 가질 않는다.

 

1. 이벤트 리스너 등록: DOMContentLoaded 이벤트를 기다렸다가 페이지의 모든 내용이 로드되면 실행됩니다. 그 후, 댓글을 작성하는 폼 요소를 찾아 이벤트 리스너를 등록합니다.
2. 폼 제출 이벤트 리스너 등록: 댓글을 작성하는 폼에서 submit 이벤트가 발생하면, 이벤트를 가로채고 아래의 동작을 수행합니다.
3. 댓글 내용 가져오기: document.querySelector('.comment-input').value.trim()를 사용하여 댓글 입력 필드의 값을 얻어옵니다. .trim()은 문자열의 양 끝에 있는 공백을 제거합니다.
4. 댓글 내용이 비어 있는지 확인: if (!commentContent)를 사용하여 댓글 내용이 비어 있는지 확인합니다. 비어 있으면 서버에 댓글을 보내지 않고, 클라이언트에게 알림을 표시합니다.
5. 서버에 POST 요청: fetch를 사용하여 "/comment" 엔드포인트로 POST 요청을 보냅니다. 요청 헤더에는 JSON 형식의 데이터를 전송함을 나타내는 'Content-Type': 'application/json'이 포함되어 있습니다.
6. 서버 응답 처리: await response.json()를 사용하여 서버에서 받은 응답을 JSON 형식으로 파싱합니다. 그 후, 오류 메시지가 있는 경우 alert를 통해 사용자에게 표시하고, 그렇지 않으면 서버에서 정상적으로 처리된 경우의 로직을 수행합니다.

이 코드는 클라이언트 측에서 댓글 작성 폼을 제출할 때, 댓글 내용이 비어 있으면 서버에 요청을 보내지 않고, 오류 메시지를 표시합니다. 서버 응답에 오류 메시지가 포함되면 이를 alert를 통해 사용자에게 알리고, 그렇지 않으면 추가적인 로직을 수행합니다.

 

설명을 보니 위와 같이 나왔다.

 

근데 위 방법대로 하면 // 서버에서 정상적으로 처리된 경우에 대한 로직

 

이 부분에 그럼 mongoDB 로 저장시키는 코드가 들어가야하는데, 그럼 서버측과 중복되지 않을까?

뭔가 문제가 있어 보인다.

보면 서버에서 여러가지 예외처리들을 할 때 사용자들에게 alert 로 안내를 해주는 과정을 마스터해야된다.

그래야지 더 친절한 홈페이지가 될 것이다.

그렇게 해야지 사용자들에게 입력을 받을 때 특히 더 소통을 할 수 있을 것 같다.

 

---

 

경기결과를 홈 화면에서도 볼 수 있도록 다음과 같이 디자인을 했다. 근데 위 이미지인 웹화면과는 다르게 아래의 앱화면에서는 점수 영역이 확실하게 정렬되어있는 느낌이 아니다.

이를 해결하려면 내가 생각했을 때에 팀 이름이랑 날짜를 묶어서 영역으로 만들고, 날짜를 영역으로 만들고 해서 

미리 퍼센테이지로 영역을 만들어둔다음, 팀 이름은 좌측정렬, 점수영역은 중앙정렬 또는 동일하게 좌측정렬로 맞춰야하는데 생각보다 잘 안된다.

오늘은 늦었으니 내일 해야겠다.

 

벌써 위에서 해결못한 서버와 클라이언트 사이에서 message 를 자유롭게 이동시키는 방법과 영역관리 부분

그리고 제일 처음 오늘 해결하려했던 이미지 다수 첨부 문제까지 해결해야한다.