본문 바로가기
728x90
반응형

전체 글58

팀 프로젝트 회고.. 팀원들과의 첫 만남 첫 프로젝트 개인발표를 기준으로 강사님께서 팀원을 정해주셨습니다. 생각보다 나이대가 20대 중반부터 30대 초반까지 다양해서 놀랐으며 초기라서 그런지 다행히 다들 하고자 하는 열정이 있어 보여서 그래 나만 잘하면 되겠지라는 희망찬 생각을 하게 됩니다... 팀원들과의 첫 만남도 잠시... 첫 이별 주제는 아직 미정으로.. 일단 페이지, 기능별로 임무분담을 한 상태에서 며칠 전부터 메인 페이지를 맡으신 분이 안 나오기 시작했습니다. 한 분이 그만두신 관계로 다시 모여서 다시 임무분담을 나눴습니다. 기획 단계 한 분 한 분 생각해온 아이디어들을 들으면서 최종적으로 전국 관광지 api 정보를 가져와서 지도 위에 마커를 표시하여 지역별로 검색 시 관광지 정보가 노출되게 구현하자고 의견 통일이 .. 2023. 6. 12.
게시글 일부만 로드(클릭시 조건에 따라 추가 로드) 게시글이 늘어날 경우를 대비해서 부분적으로 불러올 수 있는 관련 메서드를 찾아봤습니다. 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.
728x90
반응형

티스토리툴바