캡스톤 설계 [건물별 소통 플랫폼 BBC]/개발 진행 썸네일형 리스트형 게시판 조회 관련에 대한 고찰 우선 이번 포스팅을 하게된 계기는 처음 게시판 조회를 구현하며 아래와 같은 여러가지 게시판 각각에 대해 어떻게 더 효율적으로 코딩하며 디렉토리 구조를 가져가는게 나을지에 대한 고민에서 시작한다. 우선 현재는 아래와 같이 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 등등을 호출하고 세팅. 잘 들어온다 ..! . . . 너무 피곤해서 대충 쓴감이 있지만...일단 ,,,기능확인했으니됐으.... 더보기 프론트 게시글 작성 UI 기능 구현에 앞서 기본적인 기능을 작성할 수 있는 태그들만 사용해서 글 작성 UI를 만들어보자. import Link from "next/link"; import React from "react"; // TODO 더보기 Home 페이지 UI 및 네비게이팅 "use client"; import { authUser } from "@/redux/features/userSlice"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; export default function Home() { const dispatch = useDispatch(); const isAuth = useSelector((state) => state.persistedReducer.user.isAuth); // 전체 state 를 가져오기 co.. 더보기 프론트엔드 백엔드 vscode 상단바 색 입혀서 구분하기 1. vscode 설정의 작업 영역 들어가기 2. 워크 벤치의 모양 들어가기 3. color Customization 의 setting.json 클릭 4.workbench.colorCustomizations 키값에 자신이 원하는 색상 넣기 최종적으로 백엔드와 프론트엔드에 각각 다른 색상을 입혔다..! 더보기 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
