분류 전체보기

[LOLPAGO] 검색 창 구성(1)

🚗 전적검색서비스 주로 이용하는 전적검색 서비스를 보면 다음과 같이 검색을 할 수 있는 창이 뜬다. 이를 참고해서 Figma를 이용하여 화면 구성을 했다. 우선적으로 검색 기능을 구현하기 위해서 뒷 배경, 검색창을 구현해보겠다. 이를 구현하기 위해 필요하는 기능을 먼저 생각해보겠다. 우선 가장 첫 화면에 보이는 것과 마찬가지로 검색어를 입력할 수 있는 기본 검색 바 컴포넌트가 필요하다. 다음으로는 검색창을 클릭했을 때 최근 검색한 소환사가 뜨도록 해야한다. 이후 Hide on bush를 검색한다고 했을 때 Hide라고 검색하면 해당 아이디가 자동완성 되도록 한다. 이후 해당 소환사 또는 챔피언을 클릭했을 때 챔피언 분석 페이지로 이동할 수 있도록 해야한다. 크게 위의 4가지 기능을 중심적으로 검색창을 개..

[LOLPAGO] React 설치 및 Header 구성 완료(6)

🚗 배열을 이용한 동적 구성 리액트는 항상 동적인 구성을 통해 콛으의 재사용성과 유지 보수성을 향상시킬 수 있도록 노력한다. 우리는 Header에 들어갈 contents내용인 '메인', '챔피언 분석',. '경기력 비교', 'AI챔피언 추천'을 정적으로 구성했는데, 이를 동적으로 구성하도록 해보자. 각 헤더 항목의 이름 'name', 경로 'path'를 객체로 가지고 배열의 각 요소를 매핑하여 HeaderItem 컴포넌트를 생성하도록 작성해보겠다. 이렇게 하면 헤더 항목을 쉽게 추가, 삭제, 수정할 수 있게 된다. 우선 constants의 contents.js에 HEADER_CONTENTS라는 배열을 생성해야한다. 다음과 같이 HEADER_CONTENTS를 생성한 뒤 export 해주었다. 이를 가지고 ..

[React] map함수 사용법

🚗 map 만약 아래와 같은 배열이 있다고 했을 때 map함수를 이용하면 값과 인덱스를 인자로 받아 자동으로 for문을 돌려서 값을 뺴준다. const arr = [ 10, 20, 30, 40, 50 ]; arr.map((item, index) => { console.log(index, item); }); 다음과 같이 작성하면 0 10 1 20 2 30 3 40 4 50 이 순서대로 출력된다.

[LOLPAGO] React 설치 및 Header 구성(5)

🚗 Div의 컴포넌트화 html의 태그인 div태그를 컴포넌트화 하여 별도의 파일로 분리하는 것은 React의 일반적인 관행이다. 'styled-components'를 사용하여 Div.jsx와 같은 파일에 스타일을 정의하는 이유는 여러가지가 있다. [Chat GPT] 컴포넌트 기반 설계: React는 컴포넌트 기반의 접근 방식을 취하며, 각 컴포넌트는 자체적인 로직과 스타일을 가질 수 있습니다. 이를 통해 재사용 가능하고 독립적인 UI 조각을 생성할 수 있습니다. 명확성 및 유지 보수성: 스타일이 해당 컴포넌트와 함께 위치함으로써, 어떤 스타일이 특정 컴포넌트에 적용되는지 쉽게 파악할 수 있습니다. 이는 코드의 가독성을 향상시키고 유지 보수를 용이하게 합니다. 스코핑: styled-components를 ..

[LOLPAGO] React 설치 및 Header 구성(4)

🚗 useEffect를 이용한 Header 구성 useEffect를 이용하여 이벤트가 발생할 때 화면을 렌더링 할 수 있다. 아래의 링크를 참고하여 useEffect와 usLocation에 대해 알아보고 오는 것을 추천한다. https://2t-hong.tistory.com/175 [React] 리액트 훅스(2) - useEffect 🚗 useEffect 리액트 훅스에서 가장 중요하다고 생각하는 useEffect이다. 어떠한 컴포넌트가 마운트 됐을 때, 업데이트 될 때, 마운트 해제되었을 때 특정 작업을 처리할 코드를 실행시킬 때 사용할 2t-hong.tistory.com https://2t-hong.tistory.com/176 [React] 리액트 훅스(3) - useLocation, useNaviat..