본문 바로가기

캡스톤 설계 [건물별 소통 플랫폼 BBC]/개발 진행

Cursor Pagination &Page Pagination 현재 각 건물별 게시판에 대한 게시글만 필터링하여 각 건물별 페이지에 렌더링 시키는것 까지 완료 하였다. . . 이번에는 페이지 네이션을 일반화 하여 차후 댓글 좋아요 내가 쓴 글 내가 좋아요 누른 글 등등으로 필터링 하는 기능까지 커버 할수 있게 할 예정이다. . . . 우선은 일반적인 게시글 소팅 기능을 시작으로 점차 고도화 하여 일반화 까지 진행한뒤 프론트 개발을 하며 세부 사항을 조정해보고자한다. . . . 기본적인 페이지네이션 dto이다. 커서 기반 페이지네이션과 페이지 기반 페이지 네이션 둘다 구현할 것이다. 페이지 라는 키값이 있으면 페이지 기반 페이지 네이션이라고 판단가능케 하여 분기 처리를 할 예정이다. 최신순으로 페이지 네이션 20개씩 끊어서 가져오는 컨트롤러와 서비스 잘 가져와 진다... 더보기
페이지네이션 기능 구현 이전 entity id명 통일 페이지 네이션 기능의 일반화를 위해 모든 엔티티들의 PK를 그냥 id 로 변경하고자한다. . . . Base entity를 이용해 테이블(엔티티)당 공통되는 속성값으로 통일을 먼저해보자. . . . . . . . . 급하게 모든 PK를 id 로 통일 시켜서 다른 기능에 문제가 없는지 걱정이 많았지만 postman으로 테스트 결과 이상 없다..! 등등 모두 테스트 결과 이상 없다 ! 무야호 ! 더보기
중간 보고서 및 발표 대비 제안서 발표 피드백 중간 보고서 및 중간 발표를 준비하기 앞서 제안서 발표에 대한 학생들의 피드백을 참조하려 한다. . . . 약 90프로 정도의 인원에서 A를 받았으며 B,C 혹은 A를 준 학생들의 코멘트 중 참조해서 개선할 점에 대해 정리해 보자. . . . 자료가 더 정리돼있고 텍스트를 적절히 사용한다면 더 멋진 발표가 됐을 것 같다 발표자료의 완성도가 떨어지는 부분이 아쉬움 목소리가 아주 약간 작았던 점이 아쉬웠다. 발표 자료에 오타가 남아있는 부분이 아쉬웠고 전공 연계성이 부족한 주제 선정이라 생각하였다. ------------------------------------------------------------------------------------------------ 현재기술과의 차이 설명은 좋았지만, 어.. 더보기
프론트엔드 이미지 업로드 포스팅시 사진 보기 image state 추가후 백엔드에서 응답값을 받은 뒤 넘어오는 이미지 url을 화면에 보여주기 잘 보여 진다..! . . . . 점점 안해봤던 기능들을 해보다 보니 많은 레퍼런스를 보며 작업 중이다.. . . 그래서 점점 코드도 개판으로 되가는것 같다..허허 우선은 기능 추가를 하고 전체적인 기능확인 후에 리팩토링을 대규모로 진행 해야겠따.. . . .오늘도 시험 5일을 남겨두고 하루를 죙일 갈아넣었지만 뿌듯하다 고로 치킨 묵고자야지 무야호~~ 더보기
백엔드 업로드된 이미지 프론트엔드로 전달하기 main.ts에서 미들웨어를 추가 해 줘야한다. 또한 useStaticsAssets를 처음에 찾을수 없다고 나오니 제네릭을 사용해서 create(NestExpressApplicaiton)이라고 명시를 해줘야한다. 그리고 다시 컨트롤러를 수정하고 프론트에서 요청을 보낸뒤 네트워크 탭에서 response값을 확인해보면 아래와 같이 나온다. 그리고 저 url 값을 새로운 브라우저 창에서 입력해보면 오케잉 이미지가 잘 전달된다. . . . 하루 갈아넣어 프론트와 백엔드 이미지 업로드 및 서빙에 대해 이해를 마쳤다... 다음 포스팅은 NewPost의 PostSlice state와 thunk 함수및 프론트엔드 백엔드 비지니스 로직을 짜보자.. 더보기
프론트 엔드 이미지 업로드 npm i react-dropzone react-dropzone을 이용해서 파일 형태의 form data 추출 및 백엔드 서버로 업로드 request까지 보냈다. 더보기
백엔드 파일 업로드[ Multer] npm i -D @types/multer 여기까지 작성을하고 프론트에서 이미지를 업로드 시키면 upload라는 폴더와 함께 이진 데이터가 올라온다. . . . 결국 현재 하는 작업의목표는 프론트에서 업로드한 파일을 백엔드에 저장을 하는것이기 때문에 추가적인 작업이 필요한다. multeroption 파일을 따로 util 폴더에 생성을하고 컨트롤러에도 옵션과 같이 사용한다. 그리고 다시 프론트에서 이미지를 업로드하면 백엔드 의 dist/common/upload/postImage 폴더에 잘 저장된것을 확인할 수 있다. 더보기
각 게시판 조회 완성 "use client"; import Link from "next/link"; import React, { useEffect } from "react"; import PostItem from "../../components/postItem"; import { useDispatch, useSelector } from "react-redux"; import NewPostButton from "@/components/newPost"; import { hanulPost, hwadoPost, saebitPost, } from "@/redux/thunkFunctions/psotThunk"; export default function Saebit() { const dispatch = useDispatch(); con.. 더보기

티스토리툴바