코딩/React 본 캠프 (43) 썸네일형 리스트형 [본 캠프 38일차] 팀 프로젝트 끝 오늘 프로젝트가 마무리 되어서 제출 후 발표까지 마쳤다. 이번 팀 프로젝트는 뉴스피드 만들기였는데 우리 팀의 주제는 방구석에서 코딩만 하는 우리들의 OOTD 같은 느낌으로 집에만 박혀서 코딩하는 우리들의 패션 공유하는 뉴스피드를 만들었다. 나는 좋아요 페이지 부분 기능 구현을 하였는데 지금 와서 보면 정말 몇 줄 작성 안했지만 이 마저도 어려워서 집중을 많이 못했던 것 같다. 1. 메인 페이지에서 '좋아요' 버튼을 누르면 좋아요 페이지로 해당 게시물이 이동한다. (supabase 사용) 1 - 1. 게시물이 이동할 때 '좋아요' 가 눌린 상태로 이동해야 한다. (likes 테이블에서 좋아요 정보 가져오기)2. '좋아요' 를 누른 게시물이 좋아요 페이지에 렌더링 되야하고 순서대로 정렬 되어야 한다.3... [본 캠프 33일차] 팀 프로젝트 1일차 우리 조는 방구석에만 박혀있는 개발자들의 OOTD 를 올리는 사이트를 만들기로 하였다. 나는 좋아요 페이지를 맡았고, 메인 페이지에 올라온 OOTD 사진에 좋아요 버튼을 누르면 좋아요 페이지로 데이터가 들어오고 해제하면 삭제되는 기능 및 좋아요 페이지에 들어온 사진을 클릭하면 디테일 페이지로 이동하는 것 까지 맡았다. 대략적인 기본 틀만 잡아놓고 어제부터 시작했다. 일단 메인페이지 헤더부분에 좋아요 버튼을 팀원분이 만들어주셔서 좋아요 페이지로 이동하게 연결했고,비로그인일 때, 로그인일 때 계정 인증 상태에 따라 다르게 표시되는 것 까지 구현해놨다. 일단 메인 페이지에 데이터가 있어야 좋아요 페이지로 가져와야하기 때문에 오늘은 여기까지 하고 기다려야겠다. [본 캠프 32일차] 팀 프로젝트 시작 [본 캠프 31일차] 개인 과제 제출 + 과제 해설 1. 프로젝트 셋업 skip2. React router dom 및 styled-component 셋업 + 기본 라우팅 시스템 적용yarn add react-router-domimport { BrowserRouter, Routes, Route } from 'react-router-dom'- BrowserRouter 로 Routes 와 Route 를 감싼다- Route path="/" elements={ /}- Route path="/dex" elements={ /}Home 에서 Dex 로 이동하는 버튼 만들기- useNavigate 를 import 하고 onClick={()=> navigate("/dex")} 로 이동3. Dashboard 컴포넌트 구현Dashboard.jsx 와 PokemonList.js.. [본 캠프 30일차] 개인 과제 최종 파라미터 (Parameter) 정해지지 않은 값: 함수나 메서드를 정의할 때 어떤 값을 받을지 미리 지정해 놓은 이름 인자 (Argument) 정해진 값: 함수가 실제로 호출될 때 파라미터에 전달되는 값입니다. 인자는 구체적인 값으로, 함수가 이 값을 가지고 작업을 수행 Path Parameter와 Query Parameter의 차이점Path Parameter ( /pokemon-detail/:id 형식 )- url 뒤에 동적 값을 포함한다.- useParams 를 통해 동적 파라미터를 가져와 처리한다. Query Parameter ( /pokemon-detail?id=1 형식)- url 뒤에 ? 를 사용하여 추가적인 데이터를 넣는다.- useLocation 과 URLSearchParams 를 통해.. [본 캠프 29일차] React 스탠다드반 강의 + 추가 복습 + 과제 Redux 핵심 이해UI 에서 event 발생onClick 에서 dispatch 실행dispatch 의 인자로 action 객체aciton 객체는 무조건 type 과 payloadreduceraction : type 과 일치하는 기능을 payload 만큼 싫행결국 스토어 안에있는 스테이트가 변경이(event) 디(dispatch) 액(action) 타(type) 페(payload) 써(Reducer) 스(store,state) useContextprop drilling 이 너무 불편하니까 useContext 를 사용해서 자식에게 한번에 보내주기 1. const CountContext = createContext 컨텍스트 만들기 export 로 내보내기 필요2. Context Provider .. [본 캠프 28일차] React 숙련 강의 마무리 + 개인과제 Supabase BaaS : back-end as a system or service웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스복잡한 백엔드 시스템을 직접 관리하지 않아도 되니, 개발자들이 프론트엔드에 더 집중할 수 있다. BaaS 플랫폼FirebaseParseAWS AmplifySupabaseBaaS 의 장점개발 속도 향상유지보수 간편자동 확장BaaS의 단점유연성 부족비용 예측 어려움플랫폼 의존성Supabase : 관계형 데이터베이스를 사용 오늘은 숙련 강의 마무리하고 강의 복습하면서 과제를 시작했는데 좀 막혀서 복습하다가 과제하다 쉬다가 반복하면서 좀 망한 하루가 된 것 같다.. 내일부터는 진짜 제대로 해야될 것 같다.. [본 캠프 27일차] React 스탠다드 5차 수업 redux 포기 스트레스만 받음 zustand 배울게요 react router dom 이제 spa 로 페이지 이동하는 방법을 배운다. 기본적으로 태그에 태그가 필요하고 그안에 이제 이동할 태그를 사용하고 태그는 path 로 이동할 장소와, element 로 해당 장소의 내용들을 불러와 사용할거다. 처음 기본 페이지는 "/" 로 되어있고 element={} 으로 해당 내용을 가져오는데, Home.jsx 에서는 navigate 설정을 해줘 app.jsx 에서 사용할 수 있게 해준다. 아래처럼 navigate 를 만들어 onclick 버튼으로 이동할 수 있는 내용을 app.jsx 에서 불러와 사용한다. 아래는 button 말고 Link 태그로 하이퍼링크 처럼 글씨를 누르면 해당 페이지로 이동할 수 있.. 이전 1 2 3 4 5 6 다음 목록 더보기
