LOLPAGO/프론트엔드
[LOLPAGO] 검색 창 구성(3)
🚗 타 사이트 참고 우선 한국의 유저들에 대해서만 검색이 되도록 하겠지만 다른 서버도 선택할 수 있도록 UI를 구성해놓도록 한다. 해당 사이트를 참고했을 때 클릭했을 때 화살표 방향이 바뀌면서 'KR', 'EUW', 'NA'가 보인다. 우리도 마찬가지로 클릭했을 때 서버를 선택할 수 있도록 해보자. 이를 위해서 SearchServer라는 파일을 생성해주도록 하겠다. 해당 컴포넌트에서는 클릭을 했을 때 다른 서버로 변경되어야 하므로 useState를 써야 한다는 것을 알 수 있다. 또한 화살표를 사용해야한다. 이전 Icon을 만들 때 방향을 설정해두었는데 여기서 사용된다. 🚓 contents KR, EUW, NA를 콘텐츠로 설정하여 가지고 올 수 있도록 설정한다. 아래의 파일해 해당 코드를 추가한다. 이제..
[LOLPAGO] 검색 창 구성(2)
🚗 파일생성 SearchBar를 구성하기위해 파일을 생성해준다. 또한 컴포넌트로 사용해야하므로 index.js에도 마찬가지로 export해준다. SearchBar에서 담당해야 할 역할은 검색 바의 UI를 구현한다. 마찬가지로 styled-components를 이용하여 UI를 구성하고 검색 아이콘을 통해 클릭했을 때 검색이 되도록 설정한다. 🚓 Icon 검색 이미지는 돋보기 모양을 사용한다. images폴더 아래에 Search라는 svg파일을 생성해두었다. 우선은 Search1를 사용하겠다. 이런 Icon들을 사용하기 위해 component/icon 폴더를 생성하고 스타일을 지정해준다. Icon 컴포넌트를 사용한 아이콘들은 커서를 가까이 가져갔을때 커서의 모양이 선택 모양으로 바뀌도록 설정한다. 크기 또한..
[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 해주었다. 이를 가지고 ..
[LOLPAGO] React 설치 및 Header 구성(5)
🚗 Div의 컴포넌트화 html의 태그인 div태그를 컴포넌트화 하여 별도의 파일로 분리하는 것은 React의 일반적인 관행이다. 'styled-components'를 사용하여 Div.jsx와 같은 파일에 스타일을 정의하는 이유는 여러가지가 있다. [Chat GPT] 컴포넌트 기반 설계: React는 컴포넌트 기반의 접근 방식을 취하며, 각 컴포넌트는 자체적인 로직과 스타일을 가질 수 있습니다. 이를 통해 재사용 가능하고 독립적인 UI 조각을 생성할 수 있습니다. 명확성 및 유지 보수성: 스타일이 해당 컴포넌트와 함께 위치함으로써, 어떤 스타일이 특정 컴포넌트에 적용되는지 쉽게 파악할 수 있습니다. 이는 코드의 가독성을 향상시키고 유지 보수를 용이하게 합니다. 스코핑: styled-components를 ..