본문 바로가기
728x90
반응형

Frontend/Project(개인 기록용)32

게시글 일부만 로드(클릭시 조건에 따라 추가 로드) 게시글이 늘어날 경우를 대비해서 부분적으로 불러올 수 있는 관련 메서드를 찾아봤습니다. mongoose에서 제공하는 limit() 메서드를 사용하면 조건을 줘서 일부 doc만 불러올 수 있다고 합니다. 아래 참고 링크의 내용을 간략하게 보자면 find() 메소드를 사용하면 모든 document 들을 출력해주기 때문에 limit() 메소드와 skip() 메소드를 통하여 보이는 출력물의 갯수를 제한 할 수 있다고 합니다. server 코드 아래처럼 체이닝으로 넣어주고 limit(5)로 설정하여 5개의 doc만 불러올 수 있게 하였습니다. router.post("/list", (req, res) => { let sort = {}; if (req.body.sort === "최신글") { sort.createdA.. 2023. 6. 8.
게시글 검색기능 추가 검색 입력값 관리하기 위해서 state 추가 및 input태그 사용 const [search, setSearch] = useState(""); { /* enter 키 코드 13(enter key) 실행시 searchHandler함수 실행 */ e.keyCode === 13 && SearchHandler(); }} onChange={(e) => { setSearch(e.currentTarget.value); }} /> sort 상태 변경시마다 listChange함수 실행 useEffect(() => { listChange(); }, [sort]); 검색 버튼 클릭 시 listChange 함수 실행 const SearchHandler = () => { listChange(); }; listChange 함수에.. 2023. 6. 8.
게시글 최신, 인기순으로 정렬 정렬 기능 추가할 버튼 생성, 버튼은 bootstrap을 사용했습니다. {sort} bootstrap https://react-bootstrap.netlify.app/docs/components/buttons/ Buttons | React Bootstrap Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. react-bootstrap.netlify.app 정렬 상태를 관리할 state를 만들어주고 초기에 보여줄 값으로 '최신글'로 지정합니다. const [sort, setSort] = useState("최신글"); 버튼에 sor.. 2023. 6. 8.
mongoDB 게시글에 시간 나타내기 server단 post 스키마에서 timestamps: true 설정하면 등록시간, 업데이트시간을 사용 가능합니다. timestamps: true const postSchema = new mongoose.Schema( { title: String, content: String, postNum: Number, image: String, author: { type: mongoose.Schema.Types.ObjectId, ref: "User", }, //댓글 갯수를 알기 위해서 repleNum 추가 repleNum: { type: Number, default: 0, }, }, { collection: "posts", timestamps: true } ); const Post = mongoose.model(".. 2023. 6. 8.
firebase photoURL 사용하여 마이페이지 구현 마이페이지 작업중에 아래 코드로 구현했더니 user.accessToken 값이 있는데도 페이지 새로고침시에 login 페이지로 이동하는 것이다.. 분명히 user정보가 있는데? 왜... useEffect(() => { if (!user.accessToken) { navigate("/login"); } else { setCurrentImage(user.photoURL); } }, [user]); 개발도 구창을 확인해 보니 유저 정보가 비었다가 들어오는 걸 보니 통신 중에 딜레이 때문에 생기는 현상 같았다. 이 문제를 해결하기 위해서 reducer에서 isLoading 추가 기본값 false, 로그인,로그아웃시에 true로 세팅 export const userSlice = createSlice({ name:.. 2023. 6. 8.
유저 프로필 이미지 설정 기능 userInfo를 찍어보면 아래 이미지와 같이 firebase에서 제공하는 photoURL을 사용할 수있습니다. useEffect(() => { //*onAuthStateChanged firebase사용자의 상태 변화에 따라 추적 함수.. firebase.auth().onAuthStateChanged((userInfo) => { //photoURL로 사용자img 줄수있음..firebase.auth자체기능 console.log(userInfo); }); }, []); 개발도구창 확인시 photoURL 확인가능 네이버 클라우드에서 유저 등록시에 제공할 기본 프로필 이미지를 등록하고 등록한 이미지의 주소를 불러와서 firebase에서 제공하는 updateProfile()로 firebase에 업데이트 시켜줍니다.. 2023. 6. 7.
reple 모달 수정 및 삭제 기능 추가 state를 새로 만들어서 const [edit, setEdit] = useState(false); edit이 true일때는 수정할 수 있는 폼을 보여주고 false일때는 기존 댓글 내용 보여줍니다. {edit ? ( { setReple(e.currentTarget.value); }} /> 완료 취소 ) : ( {props.list.reple} )} 수정을 누르면 setEdit(true)로 댓글 수정 폼을 보여줌과 동시에 setModal(false)로 모달창 닫아 줍니다. const editHandler = () => { setEdit(true); setModal(false); }; 수정 취소 버튼을 추가하여 취소 클릭시 setEdit(false)로 기존 댓글 데이터를 보여줍니다. const editCa.. 2023. 6. 7.
mongoDB에 저장된 reple 불러오기 및 reple 모달 구현 client 코드 mongoDB에 저장된 댓글 client에 가져와서 보여주는 작업 const RepleList = (props) => { const [repleList, setRepleList] = useState([]); useEffect(() => { let body = { postId: props.postId, }; axios.post("/api/reple/getReple", body).then((res) => { if (res.data.success) { setRepleList(res.data.repleList); // setRepleList([...res.data.repleList]); } }); }, []); return ( {repleList.map((list, i) => { return .. 2023. 6. 7.
댓글 등록 기능 작업 client 코드 reple state를 만들어 현재 유저 uid값과 입력값(reple), postId값을 server에 보내줍니다. const RepleUpload = (props) => { const [reple, setReple] = useState(""); const user = useSelector((state) => state.user); const submitHandler = (e) => { e.preventDefault(); if (reple === "") { return alert("댓글 내용을 채워주세요."); } let body = { reple: reple, uid: user.uid, postId: props.postId, }; axios.post("/api/reple/submit".. 2023. 6. 7.
728x90
반응형

티스토리툴바