오류 내역 페이지가 로드될 때 카카오맵의 마커가 바로 생성되지 않고 어떤 추가 요청을 해야 나머지 마커를 불러오는 상황이 발생했다. 기존 코드 전체 보기 더보기 import React, { useState, useEffect } from 'react'; import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk'; import { styled } from 'styled-components'; import { BiChevronRight } from 'react-icons/bi'; import { useNavigate } from 'react-router-dom'; // window.kakao 객체를 가져옴 const { kakao } = ..
구현하고자 하는 로직 DB에 저장된 위스키바 리스트가 서울시에 한정되어 있기 때문에, 다른 지역으로 넘어가면 지도에 별다른 리스트가 조회되지 않았다. 사용자 입장에서 생각해봤을 때 아래와 같은 로직을 추가하는 것이 유저 사용성이 더 편할 것 같다는 생각이 들어 아래의 로직을 추가했다. 1.서울시 전체 위스키바 크롤링하여 DB 저장, 해당 데이터를 보여주는 방식으로 로직 전면 변경 2. 약 350여개의 업장을 화면에 모두 출력하기보다 react-select를 이용해 '구'를 선택하도록 하여 구별로 업장 출력, 각 구마다 위스키바가 가장 많은 지점을 해당 구의 중앙 지점으로 설정 3. 사용자가 지도를 이동할 경우 idle 이벤트를 이용해 해당 구(또는 지역)을 감지하여 사용자가 이동한 구의 위스키바 데이터를..
오류 내역 반복되는 인증/인가 처리를 효율적으로 진행하기 위해 라우팅을 진행하는 App.jsx에서 Private Route를 이용해 일괄 인증/인가 처리를 진행했다. 이때, 로컬 환경에서는 제대로 인증/인가 처리가 진행되지만 배포 서버에서는 동일한 코드임에도 불구하고 제대로 진행되지 않는 오류가 발생했다. 오류가 발생한 경로 배포 서버에서 로그인 성공 후 마이페이지 진입 시 로그인이 유효하지 않아 재로그인 처리를 할 때와 같이 로그인 페이지로 navigate됨 로그인 관련 데이터가 없는 경우가 아니라서 localStorage에 로그인 token, userFlag는 그대로 남아있고 마이페이지로 route만 되지 않는 상태 오류를 해결하기 위해 시도해 본 것들 1. 모든 인증/인가 if문에 console.l..
서울시 내 위스키바 리스트를 출력하기 위해 방법을 고민하던 중, 카카오맵 API에서 위와 같이 키워드로 장소를 검색하고 목록으로 표출하는 기능을 제공해 준다는 것을 알게 되었다. 데이터를 크롤링할 것인지 vs 카카오 내장 검색 기능을 사용할 것인지 회의를 진행했고 지도 API에서 어차피 리스트를 제공해 준다면 해당 내장 기능을 최대한 활용해 보기로 결론을 내렸다. 구현하고자 하는 로직 1. 페이지가 마운트될 때 사용자 현재 위치 정보 동의 1-1. 사용자가 허용했을 경우 해당 위도/경도 설정 1-2. 사용자가 거부했을 경우 지도 설정 기본 값인 을지로 3가의 위도/경도 설정 2. props로 내려받은 위도/경도값을 주소로 변환해 'X시 Y동 칵테일바'라는 키워드 세팅 3. 해당 키워드를 이용해 지도 AP..
검색 페이지 요구사항 1. 검색 페이지에 맨 처음 진입 시 사용자들이 제일 많이 검색한 위스키 리스트 Top 10을 출력한다. 2. 사용자가 입력한 값이 있을 경우 해당 입력값을 기반으로 입력값이 포함된 위스키 리스트를 출력한다. 3. 사용자가 값을 입력하고 검색 버튼을 클릭했을 경우 바로 해당 키워드가 포함된 위스키 리스트를 출력한다. 4. input에 입력된 값이 아무것도 없을 경우 다시 위스키 리스트 Top 10을 출력한다. 5. 리스트에 출력된 위스키들은 각각 클릭 시 해당 위스키 상세 페이지로 이동한다. 인기 검색어 구현하기 인기 검색어 추적은 사용자가 검색어를 입력하거나 또는 검색 페이지에서 상세 페이지로 넘어갈 때마다 해당 값을 count하는 로직을 백엔드에서 구현한다. 해당 API 호출 시..
기존의 전역 스타일링 적용 방식 웹 브라우저의 기본 스타일값을 제거하고 통일성있는 CSS 스타일 적용을 위해 reset.css 파일을 생성하고 index.js에 해당 css를 import 하는 방식으로 사용했다. 하지만 Styled Components라는 CSS-in-JS를 사용하고 있으니 사용 중인 라이브러리를 최대한 활용해서 쓰는 것이 더 효율적일 것이라는 생각이 들었다. 따라서 별도의 css 파일이 아닌 Styled Components에서 제공하는 GlobalStyleds라는 전역 스타일링 방법을 사용했다. Global Style 적용하기 프로젝트를 아우르거나 공통적으로 들어가야 할 스타일을 적용할 때 전역적(Globally)으로 스타일을 지정할 수 있는데, 이때 쓰는 방법이 전역 스타일링이다. G..
1. Extension 설치 VS Code에서 ESLint, Prettier Extension을 설치한다. 2. yarn config 설치 airbnb 스타일 가이드의 코드 규칙을 적용할 수 있는 yarn config를 설치한다. 이때, 패키지가 의존하고 있는 다른 패키지들도 함께 설치해야 하므로 다음의 명령어를 사용해 의존성 패키지들을 확인한다. yarn info eslint-config-airbnb peerDependencies 3. eslint 설치 위의 의존성 패키지들과 함께 eslint-config-airbnb를 설치한다. yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin..
1. React icon, Styled Components 설치 yarn add react-icons styled-components 2. React icon에서 사용할 아이콘 import import { FaHeart } from 'react-icons/fa'; 3. Styled Compoenets를 사용해 아이콘에 스타일 적용 import React from 'react'; import { FaHeart } from 'react-icons/fa'; import styled from 'styled-components'; const Heart = () => { return ( ); }; export default Heart; const StyledIcon = styled(FaHeart)` color: r..
Flux 패턴의 등장 배경 Flux 패턴은 페이스북(현 메타)에서 MVC 모델의 단점을 보완하기 위해 발표한 애플리케이션 아키텍처이다. 페이스북은 기존에 MVC 모델을 사용하였다. MVC 모델에서는 View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View를 업데이트할 수 있는데, 새로운 기능이 추가되거나 규모가 커질수록 복잡한 데이터 흐름을 가지게 되어 예측 불가능한 코드를 만들게 되고 버그가 발생하게 되었다. 따라서 페이스북은 대규모 애플리케이션에서 데이터의 흐름을 일관성 있게 관리하여 프로그램의 예측 가능성을 높일 수 있도록, 단방향 데이터 흐름을 가진 Flux를 고안하게 된다. Flux 패턴이란? Flux 패턴은 단방향 데이터 흐름을 유지하는 ..
SPA와 MPA 표로 간단하게 정리하기 구분 SPA (Single Page Application) MPA (Multi Page Application) 정의 한 개의 페이지로 구성된 어플리케이션 여러 개의 페이지로 구성된 어플리케이션 특징 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운된다. 렌더링 CSR (Client Side Rendering) 방식 👉🏼 클라이언트 단에서 렌더링 진행 SSR (Server Side Rendering) 방식 👉🏼 서버 단에서 렌더링을 마치고 클라이언트는 받아서 실행 장점 리렌더링으로 인한 깜빡임이 없어 유연한 UI, 자연스러운 UX 구현이 가능하다. 유저가 보는 화면 방식이 웹 크롤러가 보는 방..
