간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 사용기술: `Next.js`, `React`, `TypeScript` . . .챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다.💡 Prefetching사용자가 페이지로 이동했을 때 데이터를 불러오지 않고 특정 조건이나 로직등으로 미리 데이터를 불러올 수 있는 기법이다. 예를 들어 `` 태그가 뷰포트에..
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 사용기술: `Next.js`, `React`, `TypeScript` . . .챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다. 🚨 변경 내용이번 리팩토링은 매우매우 간단한 문제여서 기분이 좋았다. 테일윈드를 사용해본적이 별로 없어서 생긴 아주 조그마한 이슈였다. 테일윈드에서 기본적으로 제공해주지 ..
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다. 🚨 문제 내용아이템 페이지에서 상위/하위 아이템은 필터(공격력, 주문력, 방어력 등)에 영향을 받지 않고 모두 출력되어야 한다. 하지만 사용자가 필터를 적용하면 `전체 아이템 목록` 뿐만 아니라 상위/하위 아이템에도 필터가 적용되는 문제가 생겼다. ..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 사진이 잘 안보여서 버튼이 잘 안보일 수도 있는데 사진 아래 빨간색으로 보이는게 버튼이다. 이번 프로젝트에서 버튼 종류라고 해봐야 검은색, 빨간색 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..