[TIL] 23.08.30 Today I Learned / next.js 개발자 커뮤니티 제작(게시판 리스트)

요약: 개발자 커뮤니티 제작(게시판 리스트)

일시: 23.08.30

장소: 더휴먼컴퓨터아트아카데미

배운 점:

게시판 UI

• useEffect를 활용하여 첫 Mount 시 서버에 요청해 DB에서 게시판 글 데이터를 가져옴.
• 페이지네이션 라이브러리는 이전에 만든 컴포넌트를 재사용함.(react-js-pagination)
• 페이지네이션 구현을 위해 DB에서 데이터를 가져올 때 10씩 가져오고 현재 페이지 * 10 만큼 제외한 게시글을 가져옴
• 페이지네이션의 페이지 수 계산을 위해  countDocuments() 함수를 활용해서 전체 글 갯수를 구함.

const db = (await connectDB).db("~~"); // connectDB()를 호출하여 DB 연결을 얻습니다.
            const result = await db
                .collection("~~~")
                .find({ ~~~~ })
                .skip(perPage * (page - 1))
                .limit(perPage)
                .toArray(); // find 결과를 배열로 변환하여 가져옵니다.
            // 성공 시 결과 전달
            const dbCnt = await db.collection("~~~").countDocuments({ ~~~ });
            return res.status(200).json({ result, dbCnt });

 

• 서버로부터 받은 메시지를 출력하고 싶어서 submit을 함수로 구현함.
• form 태그의 value들을 변수에 저장해서 그것을 서버에 전송.
• 서버와 통신을 성공해 글을 게시했으면 해당 카테고리로 url 이동함.

const handleSubmit = async (e) => {
        e.preventDefault(); // 폼 기본 제출 동작 막기

        let data = {};
        const title = e.target.title.value;
        const content = e.target.content.value;
        const board = e.target.board.value;
        const view = e.target.view.value;

        if (e.target.image && e.target.boardimage) {
            const boardimage = e.target.boardimage.value;
            const image = e.target.image.value;
            data = { title, content, board, view, boardimage, image };
        } else {
            data = { title, content, board, view };
        }

        if (!title || !content) {
            alert("제목과 내용은 필수 입력 사항입니다.");
            return;
        }

        // fetch를 사용하여 데이터 서버로 전송
        const response = await fetch("/api/post/upload", {
            method: "POST",
            body: JSON.stringify(data),
        });

        if (response.ok) {
            // 성공적으로 서버에 전송됨
            // 필요한 처리를 수행
            const successMessage = await response.json();
            alert(successMessage);
            router.push(`/board/${board}`);
        } else {
            // 서버로부터 오류 응답을 받음
            const errorResponse = await response.json();
            alert(errorResponse);
            // 오류 처리
        }
    };

 

 

부족한 점: