간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 사용기술: `Next.js`, `React`, `TypeScript` . . .챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다.💡 Prefetching사용자가 페이지로 이동했을 때 데이터를 불러오지 않고 특정 조건이나 로직등으로 미리 데이터를 불러올 수 있는 기법이다. 예를 들어 `` 태그가 뷰포트에..
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 사용기술: `Next.js`, `React`, `TypeScript` . . .챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다. 🚨 변경 내용이번 리팩토링은 매우매우 간단한 문제여서 기분이 좋았다. 테일윈드를 사용해본적이 별로 없어서 생긴 아주 조그마한 이슈였다. 테일윈드에서 기본적으로 제공해주지 ..
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다. 🚨 문제 내용아이템 페이지에서 상위/하위 아이템은 필터(공격력, 주문력, 방어력 등)에 영향을 받지 않고 모두 출력되어야 한다. 하지만 사용자가 필터를 적용하면 `전체 아이템 목록` 뿐만 아니라 상위/하위 아이템에도 필터가 적용되는 문제가 생겼다. ..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)이전 리팩토링 과정(1) - [스켈레톤 UI] 화면 깜빡거림 해결이번 리팩토링은 페이지가 있는 게시글 목록에서 다른 페이지로 이동할 경우 화면이 깜빡거리는 현상이 발생하여 `tanstack query` 의 `prefetchQuery` 를 이용하여 해당 문제를 해결했다. 💡 변경 방법기존에는 페이지를 이동하고 나서 해당 페이지의 데이터를 요청했다. 따라서 필연적으로 깜빡거리는 문제가 발생했다.따라서 미리 데이터를 요청하는 `prefetchQuery` 를 사용해보기로 했다. 방법은 생각보다 어렵지는 않았다. `onMouseOver` 이벤트를 이용해서 페이지 버튼에..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)💡 화면 깜빡거림벙개 상세페이지에서 필요한 api 데이터는 다음과 같다. 상세 페이지 데이터상세 페이지 데이터에 등록된 산 데이터상세 페이지 데이터에 등록된 신청자 목록총 3번의 네트워크 요청을 필요로 한다. 신청자 목록(3번) 같은 경우 join 으로 불러오려 했으나 `json-server`를 사용했고 공식문서를 참조하여 join을 시도해봐도 빈 배열로만 데이터를 불러와지고 해결이 안되어 어쩔 수 없이 한 번 더 불러오는 과정을 거쳤다. 🚨문제점 사용자가 상세페이지를 들어오면 네트워크 요청이 처리되고 리렌더링이 발생하면서 화면이 깜빡거리는 모습을 볼 수 있다..
🚨 useRef + IntersectionObserver + state 충돌원인이 맞는지는 모르겠지만 `Ref`와 `Observer` 를 넣어준 DOM 요소에서 사용하는 state값을 변경하려고 하니 데이터는 변경이 되는데 리렌더링은 되지 않는 문제가 발생했다. 문제를 찾게 된 계기는 혹시나 해서 ref를 지워봤더니 setState가 제대로 동작을 했다. 문제 코드{displayedPosts.map((post, index) => ( // 기타 생략 ..setState가 안 되던 state가 `displayedPosts` 이다. 데이터 구조는 대강 이렇게 생겼다. displayedPosts 구조const [displayedPosts, setDisplayedPosts] = useState([ {..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 사진이 잘 안보여서 버튼이 잘 안보일 수도 있는데 사진 아래 빨간색으로 보이는게 버튼이다. 이번 프로젝트에서 버튼 종류라고 해봐야 검은색, 빨간색 2종류가 있다. 근데 고작 2개의 조건처리를 하는데도 묘한 불편함을 느꼈다(가독성이 특히). 그러다 찾은게 styled-components의 {css} 라이브러리인데 내가 느끼던 불편함을 딱 알맞게 해소해줄 수 있는 녀석이었다. 💡 기존 styled-components의 조건 처리일단 기존의 `styled-components` 로 조건에 따른 스타일을 변화하려면 다음과 같이 작성해야한다. `styled` 내부에서 삼항연산자를 사용..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 💡 prop drilling컴포넌트의 위계가 깊어짐에 따라 props가 불필요하게 많아지는걸 의미한다. 대충 하위 컴포넌트가 생겨남에 따라 어쩔 수없이 props를 전달'만'하는 컴포넌트가 많아지는 경우를 생각하면 편하다. 이번에 진행한 과제에서 context나 redux를 사용하지 않고 구현을 했더니 간단한 프로젝트임에도 꽤나 거슬릴정도로 props를 계속 전달해주어야 했다. 나는 위의 사진으로 보이는 UI를 다음 컴포넌트들과 같이 구성했다.`Dashboard` : 상단에 나만의 포켓몬과 추가한 포켓몬 카드들이 있는 컴포넌트`PokemonList` : 하단에 전체 포켓몬 목록이..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.페이지 레이아웃은 대충 저렇게 생겼다. 하단 포켓몬 카드의 `추가` 버튼을 누르면 상단 대시보드(나만의 포켓몬)영역에 추가된 포켓몬 카드가 나타난다. 대시보드 카드의 개수를 최대 6개로 정했다. 그럼 추가되지 않은 영역에는 포켓볼 사진을 보여주고 추가된 영역에는 포켓몬 카드를 보여주고 싶다. 여러가지 방법이 있겠으나 `fill()` 메서드를 이용해서 구현했다. 💡 동적으로 UI 출력하기6개의 고정된 자리가 있다. 추가된 포켓몬은 카드형식으로 보여주고 남는 자리에는 포켓볼 사진을 채워야한다. 📍 사용된 컴포넌트와 상태값 (fill 사용 관련)`selectedPokemon`추가된 ..
간단한 과제 소개todoList 형태의 메달(금, 은, 동) 데이터 관리 페이지국가 및 메달 개수 입력 가능입력한 국가별 메달 현황 확인입력, 삭제, 수정, 정렬페이지 레이아웃은 위와 같다. 상단에 데이터를 입력, 수정할 수 있는 폼이 있고 하단에 테이블 형태로 list를 확인할 수 있다. list 영역에서 반복가능한 데이터는 크게 2가지가 있다. 첫 번째는 헤더 부분 "국가명 금 은 동 액션"이 있고 두 번째는 각 나라별 데이터 목록이다. 우선 두 번째 데이터 목록 부분부터 어떻게 반복시킬수 있을지 살펴 보자. 💡 행 반복 + 열 반복 - Object.values()데이터 한 줄 한 줄이( "미국 132 0 0 버튼" ) 하나의 행이다. 전체 데이터 구조는 배열내의 객체들로 이루어져 있다. coun..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest](4) - [불어나는 코드 모듈로 분리]이번 리팩토링은 고정으로 사용되는 초기값, 상수값 등을 상수로 선언하도록 변경했다. 💡 기존 코드function getSlicedOverview(overview) { if (!overview) return "줄거리가 없는디" if (overview.length >= 80) { return `${overview.slice..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. (1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거] 이번 리팩토링도 위의 두 개와 비슷하게 코드를 압축하고자 하는 목적으로 진행하였다. 객체 형식의 데이터를 spread 문법으로 전달하고, 받을 때 rest를 사용해서 받도록 변경하였다. 💡 기존 코드 인자로 넘기는 함수/* 어쩌구 저쩌구 로직들 ... */ const movies = data.results;const targetMovie = movies.filter(item => item.id === Number(get..