본문 바로가기

캡스톤 설계 [건물별 소통 플랫폼 BBC]

프론트 엔드 이미지 업로드 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.. 더보기
게시판 조회 관련에 대한 고찰 우선 이번 포스팅을 하게된 계기는 처음 게시판 조회를 구현하며 아래와 같은 여러가지 게시판 각각에 대해 어떻게 더 효율적으로 코딩하며 디렉토리 구조를 가져가는게 나을지에 대한 고민에서 시작한다. 우선 현재는 아래와 같이 app 디렉토리를 사용한 라우팅 페이지들이 너무 많다. 기본적인 회원가입, 로그인, 게시글 작성, 등등 핵심 기능 이외는 모두 slug를 사용해서 동적 라우팅을 할까 생각 중이다. 애브리타임의 웹상에서도 우선 각 게시판마다 특정 숫자(23123,71324)를 url로 지정해 둔것을 확인하였다. . . . 또한 게시글 조회 api 구성에서도 전체 게시글을 반환한 뒤 프론트 단에서 건물별로 필터링을 하게 할지 혹은 백엔드 단에서 각각의 api 마다 필터링을 한뒤 그 필터링된 값들을 넘겨줄지에.. 더보기
게시판 카테고리별로 조회하기[건물별] 1. 특정 건물 게시판 클릭 2. 백엔드에서 특정 게시판에 대한 post전체를 보내주는 api 생성 3. 프론트에서 리덕스로 한번에 가져온뒤 map으로 돌리면서 가져오기 . . . 우선 새로운 기능을 구현하기 앞서 간단한 필요 순서를 간단하게 정의해보았다. . . 3번을 구현하면서 세부적으로 postItem 컴포넌트나 등등 고려할게 많지만 우선 프론트로 데이터를 끌고 오는것 까지 구현해보자. 2번 은 이미 완료 3번 기숙사 게시판 페이지 UI 및 기능 구현 각 게시판 컴폰너트들 기숙사 게시판 조회 관련 redux 리듀서 및 썽크 펑션 . . . 위와 같이 저장어 있다. 여기서 기숙사 게시판 속성에 대한 정보만 조회해 보고자 한다. 성공. 더보기
특정 건물 게시글 조회 API 기숙사 관련 게시물만 조회하기 완성 더보기
redux 디렉토리구조 리팩토링 본격적으로 게시판 을 구현하기 앞서 전체적인 state를 관리하는 rudux의 디렉토리 구조를 리팩토링 하고자한다. 최종적으로 위와 같은 디렉토리 구조를 가지며 크게 user, post, comment, chat,alam정도로 구성될 것 같다. . . 세부적으로 reducer 디렉토리 내부에 각 테이블별 slice 파일을 가지고 있고 thunkFunction 디렉토리 내부에는 각 테이블 별 thunk 함수를 가지고 있다. 더보기
프론트 게시판 글쓰기 기능구현 프론트에서 입력받은 값을 백엔드로 요청을 보내기 위해 이전과 같이 리덕스 함수, hook form 등등을 호출하고 세팅. 잘 들어온다 ..! . . . 너무 피곤해서 대충 쓴감이 있지만...일단 ,,,기능확인했으니됐으.... 더보기

티스토리툴바