간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 사진이 잘 안보여서 버튼이 잘 안보일 수도 있는데 사진 아래 빨간색으로 보이는게 버튼이다. 이번 프로젝트에서 버튼 종류라고 해봐야 검은색, 빨간색 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..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 첫 번째 리팩토링으로 [불필료한 API_URL 관리]를 진행했었다. 이번에는 함수들에 공통적으로 들어가는 매개변수를 제거하고 전역 변수로 변경하는 작업을 진행했다. (첫 번째보다 비교적 매우 간단하게 작업) 기존 코드document.addEventListener("DOMContentLoaded", () => { const params = new URLSearchParams(window.location.search); const movieId = params.get("id"); if (movieI..
💡 TMDB API - 영화에 대한 각종 정보를 가져올 수 있는 사이트 Getting StartedWelcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API.developer.themoviedb.org 간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 프로젝트에 대한 기능을 완성하고 몇 가지 수정하고 싶..