본문 바로가기

전체 글

 (114)
아웃소싱 팀 프로젝트 ④ - Infinite Scroll 피드에 게시물들이 쌓이게 되었을 때 모든 게시물을 한번에 가져오는 것 보다는 사용자가 스크롤 할 때마다 새로운 게시물을 불러오는 것이 좀 더 효율적 일 것 같아 useInfiniteQuery를 이용하여 무한스크롤을 구현했다.useQuery의 페이지와 옵저버 상태 관리를 useInfiniteQuery가 알아서 해줌으로써 관리와 유지보수가 편리하다. ■ 무한스크롤☀︎ 최종코드컴포넌트 하단에  를 추가하여 div가 옵저버 역할로 다음페이지를 가져올지 여부를 판단한다!// feedApi.jsexport const getFeedPages = async ({ pageParam = 1 }) => { const response = await feedInstance.get(`/feed?_sort=created_time..
아웃소싱 팀 프로젝트 ③ - 카카오맵 api 로 자전거 경로 지도 출력 ■  카카오맵 api 활용해서 지도 불러오기(1) 카카오 디벨로퍼스에 가입 및 앱 생성 후 앱키(javascript 키) 를 받아서 index.html 에 추가해주었다.     (key 는 .env.local 파일에 환경변수로 만들어서 사용!)  (2) 사용할 컴포넌트 안에서 지도 불러오기https://apis.map.kakao.com/web/sample/basicMap/카카오에 api 가이드가 잘 정리되어 있어서 참고해서 쉽게 지도를 불러올 수 있다.// 예시코드var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(3..
아웃소싱 팀 프로젝트 ② - 기능구현(따봉) 피드 게시물의 따봉 버튼을 클릭했을 때 숫자 1이 올라가고 색깔이 채워진 손모양이 나오도록 구현하고자 했다. 🚨 발생한 문제patch 메서드로 db.json에 있는 thumb 데이터를 수정하고자 했는데 patch 는 실행이 되었지만 페이로드가 빈값이어서 값 변경이 안되었다. 값 전달이 어디서 잘못되었는지 한참 헤맸다. 작성했던 코드// json-server 에 patch 로 api 통신한 코드export const updateThumb = async (FeedId, newThumb) => { await feedInstance.patch(`/feed/${FeedId}`, newThumb);}; 버튼의 onClick 이벤트에 addThumb(currentFeedId, { thumb: thumbCount ..
아웃소싱 팀 프로젝트 ① - 기획 ■  프로젝트 기획 ⚬  프로젝트 명 : RIDERS  - 자전거 라이딩 경로 추천 및 종주 정보 기록, 경로 근처의 공중화장실 등 편의시설을 함께 알려주는 브라우저 앱 먼저 지도 API, Youtube API, 설문조사(스프레드시트) 중 하나를 택해서 어떤 브라우저를 만들지 회의를 했다.우리 팀은 세가지 중 지도 API 를 선택했고 네이버 / 카카오 / 구글 지도 중 카카오 지도를 선택했다.국내 사용자를 대상으로 앱을 만들 예정이라 구글 지도는 다소 국내친화적이지않으므로 배제했고 네이버와 카카오를 비교했을 때 여러가지 기능들이 가이드로 좀 더 잘정리되어있는 카카오 지도 API 를 사용하기로 결정했다.  ⚬  와이어프레임 제작 및 역할배분  - 랜딩페이지, 메인페이지, 모아보기, 마이페이지, 로그인/회원..
Github PR 로만 merge 하도록 설정 아웃소싱 팀프로젝트를 시작하고 오늘 하루동안 기획과 초기세팅을 끝냈다.한 팀원분이 merge 할때 깃허브 PR 로만 할 수 있도록 깃설정에서 잠금 설정을 하도록 제안하셨다.설정을 해두면 로컬에서 실수로라도 push 하는 불상사를 미리 예방 할 수 있다. ■  Github PR 로만 merge 하도록 설정하기깃허브 Settings 에서 Branches → Add branch ruleset 으로 하는 방법 또는,Rules → Rulesets → New Ruleset → New branch Ruleset 으로 규칙을 설정할 화면에 들어갈 수 있다. Ruleset Name 을 적어주고 Target branches - Add target 을 클릭해서 룰을 설정할 브랜치를 추가한다.Include by pattern..
개인과제 - 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..

티스토리툴바