본문 바로가기

분류 전체보기

 (114)
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..
뉴스피드 팀 프로젝트 ② - 기능구현(프로필, 닉네임) ■  프로필 불러오기, 프로필 이미지 수정(1) superbase storage 에 'avatars' 버켓을 생성하고 policies → avatars →New policy → 모든 작업 체크 해서 정책 설정(2) avatars 버켓에 default-profile.jpg 파일 업로드 (3) vscode 에서 getPublicUrl 메서드를 사용해 avatars 버킷에 있는 기본이미지 불러오기const { data } = supabase.storage.from('avatars').getPublicUrl('default-profile.jpg'); (4) 파일 업로드 코드 작성const handleFileInputChange = async (e) => { // 타입이 file인 input 가져오기 ..
뉴스피드 팀 프로젝트 ① - 기획 ■  프로젝트 기획 ⚬  프로젝트 명 : 방콕스타일  -  화상회의를 위한 나의 방구석 ootd를 소개하는 컨셉의 뉴스피드 프로젝트 어떤 컨셉으로 진행할 지 팀원들과 회의에서 넌센스, 사회적이슈, 맛집, 여행지, 개발꿀팁 ...등 여러 아이디어가 나왔고 그중에 슬쩍 끼워넣은 내 패션 ootd가 선택이 되었다. 그러다 방구석 패션러, zoom 회의룩 등의 이야기가 나왔고 방콕스타일로 최종 결정이 되었다!  ⚬  와이어프레임 제작 및 역할배분  -  메인페이지(로그인 전/후), 로그인페이지, 회원가입페이지, 좋아요 페이지, 디테일 페이지, 마이페이지(나), 코디 업로드 페이지  ⚬  컨벤션 설정  -  변수명 : 카멜 케이스  -  상수명 : 대문자로만  -  Styled-components : 파스칼 케이..
개인과제 - 포켓몬도감 만들기 ④ ■  Redux Tool Kit 으로 리팩토링하기  ⚬ Redux Toolkit 과 React Redux 패키지 설치yarn add @reduxjs/toolkit react-redux  ⚬ Redux store 생성// store.jsimport { configureStore } from "@reduxjs/toolkit";import pokemonReducer from "../modules/pokemonSlice";export default configureStore({ reducer: { pokemon: pokemonReducer, },});  ⚬ main.jsx에서  Provider로 App 컴포넌트를 감싸 store를 props로 넘겨주기// main.jsx// Provider, store..

티스토리툴바