728x90 반응형 분류 전체보기58 댓글 등록 기능 작업 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. 스피너 기능 추가 React axios를 활용하여 api를 호출하면 자바스크립트의 ajax처럼 서버와 비동기 통신을 하는데 데이터를 주고 받는 과정에서 딜레이 시간이 생깁니다. 자연스러운 페이지 이동을 위해서 찾아보니 스피너라는 기능을 추가하면 좀더 비동기 통신 딜레이시간을 자연스럽게 보여줄 수 있다고 합니다. state훅을 하나 만들어서 초기 상태는 false로 주고 통신이 완료되었을 때 setLoaded에 true 값을 줘서 스피너창이 사라지게 작업합니다. 삼 항 연산자를 활용하여 통신 이후 loaded값이 true 일 때 페이지 보여주고 false 일 때는 스피너 렌더 시켜줍니다. client 코드 const PostArea = () => { const [postDetil, setPostDetail] = useSta.. 2023. 6. 7. firebase와 redux로 구현한 mongoDB(유저정보)와 게시글 연동 redux store에 저장 되어 있는 정보를 useSelector로 가져온 뒤에 firebase에서 부여하는 고유의 uid를 찾아서 server단으로 body에 추가하여 보내줍니다. const user = useSelector((state) => state.user); const onSubmit = (e) => { e.preventDefault(); if (title === "") { return (titleRef.current.placeholder = "빈 칸 확인해주세요"); } else if (content === "") { return (contentRef.current.placeholder = "빈 칸 확인해주세요"); } let body = { title: title, content: con.. 2023. 6. 6. Redux - Redux Toolkit 작업 components에게 로그인한 유저 정보를 제공하기 위해 redux 사용. 모든 component들이 사용할 수 있게 App에 Provider로 감싸줍니다. const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); userSlice 작업 (createSlice) createSlice로 reducer에 action과 payload등의 데이터를 쉽게 설정 가능. createSlice를 통해 3개의 데이터 관리 (displayName, uid, accessToken) export const userSlice = createSlice({ name: "user", initialState: { displayName: "",.. 2023. 6. 6. 기존 사용자 로그인 작업 client단 (login 페이지 작업) 로그인 버튼에 singInHanmdler 함수 추가 조건을 걸어주고 email, password 입력시 firebase에서 제공하는 signInWithEmailAndPassword()에 등록된 email,password 넣어서 인증 진행 존재하지 않는 이메일이거나 비밀번호가 일치하지 않을때 state만들어서 메세지창 띄워줍니다. useEffect에 조건(에러메세지 변화가 있을시에)을 걸어 에러메세지 초기화 const Login = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [errorMsg, setErrorMsg] = useSta.. 2023. 6. 6. 유저 인증 기능 (firebase등록정보 MongoDB에 저장)1-3 이전에 등록된 user정보를 바탕으로 MongoDB에 axios통신으로 데이터를 보냅니다. client 코드 body에 등록한 유저정보를 담아서 server에 보냅니다. //firebase에 저장 된 정보를 mongoDB에도 저장하기 위해 //body에 담아서 server로 보내줍니다. let body = { displayName: createdUser.user.multiFactor.user.displayName, email: createdUser.user.multiFactor.user.email, uid: createdUser.user.multiFactor.user.uid, // console.log(body); axios.post("/api/user/register", body).then((res) .. 2023. 6. 6. 유저 인증 기능 (firebase)1-2 파이어 베이스 설치 후 client단에 firebase.js 설치 후 세팅 client 코드 firbase import시 오류가 생겨서 확인해보니 /compat/을 추가해야 된다고 하네요..ㅜㅜ 버전문제였습니다. //firebase 버전호환문제로 from뒤에 /compat으로 수정해서 해결 import firebase from "firebase/compat/app"; import "firebase/compat/auth"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase config.. 2023. 6. 6. 유저 인증 기능 1-1 로그인 및 유저 component를 만든후 react router를 세팅하고 로그인 및 유저등록의 email , password 등의 값을 다루기 위해 useState를 사용 client 작성코드 일부 const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); 코드 일부.. form안의 유저가 입력한 값을 추적하기 위해서 label, input 한세트씩 사용합니다. 이메일 { setEmail(e.currentTarget.value); }} /> 로그인 버튼 클릭시 함수가 실행되고 회원가입 버튼 클릭시 회원가입 창으로 이동하게 해줍니다. 로그인 { e.preventDefault(); navigate("/regis.. 2023. 6. 5. gitignore 특정 파일이나 폴더를 제외하고 저장소에 올릴수 있는 좋은기능... 왜 몰랐을까 ㅜㅜ 알아보기로 하자 gitignore이란 사용자가 git 리포지토리에 올리고 싶지 않은 파일들을 제외 대상으로 설정해주는 것이라고 합니다. 저같은 경우는 MongoDB와 네이버 클라우드 Key, firebase Key들을 git에 제외하고 올릴수 있게 작업해뒀습니다. 방법은 간단하지만 쉽게 지나칠 수 있는 부분이라 key들을 꼭 신경 써서 관리하는 습관을 들여야겠습니다. 정보를 얻고자 매번 블로그를 검색할 때마다 좋은 글들이 많아서 감사함을 느끼며 저도 실력을 쌓아 좋은 글들을 쓸 줄 아는 눈이 생겼으면 좋겠습니다.. 참고할 좋은 글에는 https://adjh54.tistory.com/16 [Github] .gitignore.. 2023. 6. 5. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
