본문 바로가기

TIL

 (100)
뉴스피드 팀 프로젝트 ③ - 기능구현(내가 작성한 게시물) ■  내가 작성한 게시물(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..
개인과제 - 포켓몬도감 만들기 ③ ■  context API 2가지 사용방법(1) 사용할 컴포넌트 내에서 생성 (과제에 적용한 것)// Dex.jsx// PokemonContext 생성 후 exportexport const PokemonContext = createContext();⠇// PokemonContext.Provider 로 하위 컴포넌트를 감싸서 value로 값 전달return ( );  (2) context 파일을 별도 생성해서 활용// PokemonContext.jsimport { createContext, useContext, useState } from "react";import MOCK_DATA from "../mock";// Context 생성expo..
개인과제 - 포켓몬도감 만들기 ② ■  Context APIContext 는 그 하위에 있는 요소들끼리 공유하는 맥락으로 어디서 사용되는가에 따라 부분적 전역상태로 사용 될 수 있음* Context !== 전역상태* 단순한 데이터 전달과 같은 경우 props 사용이 더 적절하다. ⚬  createContext : 컨텍스트를 만듦⚬  Context Provider : 컨텍스트를 원하는 위치에 주입⚬  useContext : 컨텍스트를 사용   - 사용할 Context 는 export 가 되어있어야 함!// createContextimport { createContext } from "react";// 파스칼케이스(대문자로 작성), 사용할 컨텍스트 export 해줄것!export const CountContext = createContex..
개인과제 - 포켓몬도감 만들기 ① ⚬  개인과제 - 포켓몬도감 만들기    ➊ 기본 UI 구성하기    ➋ 상태관리와 포켓몬 추가, 삭제기능 구현하기    ➌ 조건 불일치 시 알림기능 구현하기    ➍ 포켓몬 디테일 페이지 구현하기⚬  이벤트 버블링 문제 발생 및 해결⚬  엄격한 비교 "===" 사용 중 놓쳤던 부분 1. 기본 UI 구성하기  ⚬  react-router-dom 설치 후, App.jsx에서 페이지 라우팅을 설정 ⚬  Home.jsx에서는 "포켓몬 도감 시작하기" 버튼을 만들어, useNavigate를 사용해 버튼 클릭시 /dex로 이동하도록 작성 // App.jsxconst App = () => { return ( } /> } /> ..
react-router-dom 페이지 이동 구현 패키지페이지 설치 코드 : yarn add react-router-dom Router : 경로를 알려주는 장치App.jsx 에서 어디로 가야하는지 알려주는 것(리액트 라우터 돔 설정은 보통 main.jsx 나 App.jsx 에서 많이 해준다.)  ■  기본 브라우저 라우팅// 어디로 오면 어디로 보낼지!!!// 1. 어디로 오면 : path// 2. 어디로 보낼지 : element} /> // 아무것도 없는 경로"/"도 필요하다.} />  ■  동적 라우팅 (Dynamic Route)path에 유동적인 값을 넣어서 특정페이지로 이동하게 구현하는 방법path parameter를 컴포넌트에 전달할 수 있다. ("detail/:id")주로 동일한 포맷에 다른내용, 보통 레이아웃 UI는 같은..

티스토리툴바