본문 바로가기

전체 글

 (125)
개인과제 - MBTI 성격 유형 테스트 ③ 발생한 문제 1렌더링이 됐었는데 새로고침을 하니 오류가 발생했다. 🚨 문제 원인첫 렌더링 값이 빈값(중첩된 객체X)이어서 오류가 발생했던 것이었다.// 수정 전return ( {testResult.map((obj) => { return ( {obj.nickname} {obj.date} {obj.result} ); })} ); ✅ 해결 방법testResult 의 길이가 0 이상일때만 렌더링되도록 삼항연산자로 조건을 추가해 렌더링 되도록 수정하니 새로고침을 해도 오류가 발생하지 않았다.// 수정 후 return ( {testResult...
개인과제 - MBTI 성격 유형 테스트 ② 발생한 문제 1테스트 페이지에서 테스트 제출하기 버튼을 누른 뒤 테스트 결과 페이지에 불러올 TestResult 상태를 콘솔에 찍어보았는데 데이터에 유저정보값인 userId와 nickname만 조회되지않았다.// 테스트 결과 페이지const TestResultPage = () => {const [testResult, setTestResult] = useState({}); useEffect(() => { const getResult = async () => { const result = await getTestResults(); setTestResult(result); }; getResult(); }, []); console.log("testResult :>> ", ..
개인과제 - MBTI 성격 유형 테스트 ① (1) 기본 페이지, 컴포넌트 구성페이지Home, Signin, Signup, Profile, TestPage, TestResultPage컴포넌트Layout, AuthForm, TestForm, TestResultList, TestResultItem (2) 레이아웃 컴포넌트 만들기레이아웃을 PublicLayout과  PrivateLayout으로 분리하여 만들었다.// PublicLayoutconst PublicLayout = () => { return ( 로그인 );};// PrivateLayoutconst PrivateLayout = () => { const { logout } = useContext(AuthContext); const navigate = useNaviga..
Axios, TanStack Query, Zustand, 인증/인가 ⚬  리액트 심화 주차 강의 수강 및 복습     - 비동기 프로그래밍, json-server     - axios, TanStack Query     - Zustand     - 인증/인가■  느낀점어제 심화주차 강의 전체를 완강하고 오늘 한번더 정리하고 이해해가면서 복습을 했다. 어제는 처음듣는 말 투성이라서 너무 어렵고 집중하기 힘들었는데 오늘 두번째로 보고 코드도 반복해서 쳐보고 하니 어느정도 이해가 되었다.공부한걸 활용해서 개인과제도 잘 구현해보자!
git pull 동기화 전략 팀프로젝트를 하는동안 팀원들이 작업한 파일이  pull request, merge 가 완료된 후 내 로컬에서 pull 을 하는 과정에서 오류가 발생했다. 현재 로컬과 원격 간의 커밋 반영 상황이 다른 경우 이를 동기화 하기 위해 아래 세가지 방법 중 하나를 선택하라는 경고 메세지이다. ☀︎ git config pull.rebase false : merge 형식으로 받아오도록 설정☀︎ git config pull.rebase true : rebase 형식으로 받아오도록 설정☀︎ git config pull.ff only : fast-forward only 으로 받아오도록 설정 ■  발생 배경원격 브랜치 dev : 커밋 A → 커밋 B로컬 브랜치 mypage : 커밋 A → 커밋 C커밋 A 까지 반영된 원격..
뉴스피드 팀 프로젝트 ⑤ - 마무리, 회고 ■  트러블 슈팅🚨 발생한 문제 ①각자 구현한 기능들 전체 머지 후  오류가 있는 부분이 있는지 브라우저에서 하나하나 눌러보면서 확인했다.게시물을 업로드하고 닉네임을 변경하면 상세페이지에서 게시물 작성자와 댓글 작성자 부분에는 반영이 안되는 오류를 발견했다.내가 구현한 닉네임 변경 로직에서는 닉네임을 변경하면 수파베이스의 유저의 정보(Authentication) 내의 닉네임 값이 변경된다.상세페이지에서는 데이터베이스의 게시글을 업로드하고 불러오는 "posts", "comments" 테이블의 nickname 컬럼 값을 받아오는데,테이블 값으로 게시글을 업로드할때 닉네임만 들어가고 바뀌었을때는 업데이트해주는 로직이 없었다. ✅ 해결방법마이페이지에서 닉네임을 변경하므로 닉네임을 변경 시 "posts", "c..
뉴스피드 팀 프로젝트 ④ - 기능구현(비밀번호 변경) ■ 비밀번호 변경(1) 기본 UI 작성 후 변경할 값을 받을 Input 의 value를 password, newPassword state 와 연결해주기const ChangePassword = () => { const [password, SetPassword] = useState(""); const [newPassword, setNewPassword] = useState(""); const { userInfo } = useContext(EntireContext); // 변경 비밀번호 const onChangePassword = (e) => { setNewPassword(e.target.value); }; // 비밀번호 확인 const onChangeCheckPassword = (e)..
뉴스피드 팀 프로젝트 ③ - 기능구현(내가 작성한 게시물) ■  내가 작성한 게시물(1) 마이페이지의 프로필, 닉네임 아래 공간에 로그인한 유저의 게시물 불러오기 const [myPostList, setMyPostList] = useState([]); const { userInfo } = useContext(EntireContext); useEffect(() => { const fetchPosts = async () => { // supabase "posts" 테이블의 데이터 전체 불러오기 const response = await supabase.from("posts").select("*"); // 불러온 데이터의 user_id 와 유저정보의 id 랑 동일한 데이터를 필터링해서 mypost에 담아주기 const my..

티스토리툴바