[TIL] 23.09.05 Today I Learned / 조회수 기능, 컴포넌트화, 기타 수정

요약: 조회수 기능, 컴포넌트화, 기타 수정

일시: 23.09.05

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

배운 점:

조회수 기능

    // db에 저장되어 있는 view 정보가 string이라서 $inc 명령어가 오류 발생
    // update를 통해 number로 형변환
    let number = await db.collection("~").updateOne(
        { _id: new ObjectId(id) }, // 업데이트할 문서를 선택하는 조건
        { $set: { view: Number(result.view) } }
     )

     // 상세페이지로 접속 시 DB의 view 1씩 증가
    let view = await db.collection("~").updateOne(
        { _id: new ObjectId(id) }, // 업데이트할 문서를 선택하는 조건
        { $inc: { view: 1 } }
     )

 

컴포넌트화

• 한 컴포넌트에 합쳐져있는 코드들을 기능 별로 나누어서 컴포넌트로 나눔

컴포넌트화의 장점

• 모듈화: 컴포넌트는 코드를 모듈화하는 데 도움을 줍니다. 각 컴포넌트는 특정한 역할 또는 기능을 수행하므로 코드를 논리적인 조각으로 분할하고 개별적으로 작업할 수 있습니다.
• 재사용성: 컴포넌트는 독립적으로 설계되므로 다른 프로젝트나 부분에서 재사용할 수 있습니다. 이는 개발 생산성을 향상시키고 코드 중복을 줄이는 데 도움이 됩니다.
• 유지 보수성: 컴포넌트 기반 아키텍처는 코드를 더 쉽게 이해하고 수정할 수 있도록 도와줍니다. 각 컴포넌트는 자체 상태와 로직을 가지므로 문제가 발생했을 때 해당 컴포넌트만 수정하면 됩니다.
• 코드의 가독성: 컴포넌트는 논리적으로 분리되어 있으므로 코드의 가독성을 향상시킵니다. 각 컴포넌트는 특정한 역할을 수행하므로 코드를 이해하기 쉬워집니다.
• 테스트 용이성: 컴포넌트는 독립적으로 테스트할 수 있으므로 코드의 품질을 유지하고 버그를 미리 발견하는 데 도움을 줍니다.
• 협업 용이성: 컴포넌트 기반 개발은 여러 개발자가 동시에 작업하는 협업 환경에서 효과적입니다. 각 개발자는 자신이 작성한 컴포넌트를 독립적으로 개발하고 통합할 수 있습니다.
• 성능 최적화: 일부 프레임워크와 라이브러리는 컴포넌트 단위의 업데이트를 관리하여 성능을 최적화할 수 있습니다. 변경된 부분만 다시 렌더링되므로 불필요한 작업을 최소화합니다.
• 유연성: 컴포넌트를 조합하여 복잡한 UI나 기능을 구축할 수 있습니다. 이로써 애플리케이션을 쉽게 확장하고 변경할 수 있습니다.
• 재사용 가능한 UI 라이브러리: 많은 UI 라이브러리와 프레임워크에서 사전에 정의된 컴포넌트를 제공하므로 개발자는 이러한 컴포넌트를 사용하여 빠르게 UI를 구축할 수 있습니다.

기타 수정

    const handleSubmit = async () => {
        try {
            // 댓글 저장을 위한 POST 요청
            // 댓글 내용과 부모 글의 id 값 전송
            const response = await fetch("/api/post/boardComment", {
                method: "POST",
                // 범객체 타입을 전송하기 위해서는 stringify 사용
                body: JSON.stringify({ comment, _id }),
            });

            // 서버와의 통신이 성공하면
            if (response.ok) {
                // 댓글 입력창 초기화
                setComment("");
                // 에러 메시지 초기화
                setErrorMessage("");
                // 댓글 목록 업데이트를 위해 상태값 변화
                setUpdateComment(true);
                // 서버와의 통신이 실패하면
            } else {
                // 서버로부터 오류 메시지 저장
                const errorData = await response.json();
                // 입력창 초기화
                setComment("");
                setShow(true);
                // 오류 메시지 state에 저장
                setErrorMessage(errorData);
            }
        } catch (error) {
            setComment("");
            console.error("Error:", error);
        }
    };

• 서버와 통신을 실패했을 때, state를 초기화해서 입력창의 플레이스홀더를 출력할 수 있게 함.

  session: {
    strategy: 'jwt',
    maxAge: 12 * 60 * 60 // 12시간
    // maxAge: 30 * 24 * 60 * 60 //30일
  },

• 로그인 유지 기한 수정

부족한 점: