정의 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표 HTML 요소가 위치를 결정하는 방식을 설정 (요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표) 요소의 위치를 결정하는 방식은 다음과 같은 4가지 방식이 있음 정적 위치(static position) HTML 요소의 위치를 결정하는 기본값 top, right, bottom, left 속성값에 영향을 받지 않음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식 정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임 상대 위치(relative position) HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식 고..
정의 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 어떻게 보이는지를 결정 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나를 가짐 👉 block 👉 inline 블록(block) display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함 ex. , , , , , , ... 인라인(inline) display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지함 ex. , , , ... display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 ..
CSS란? 정의 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. Cascading Style Sheets의 약자이다. cascade는 '폭포'라는 뜻으로, cascading이란 정의되어 있는 세부적인 정의가 있다면 해당 값을 사용하고, 정의되어 있는 게 없다면 다음의 기본으로 지정되어 있는 것으로 넘어가는 것을 말한다. 웹 사이트의 스타일링 ＊ 우선 순위는 ↓ 이 방향이다. 이 흐름이 바로 cascading! Author style 개발자가 작성한 CSS 파일 ▪️ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인스타일방식 → !important ▪️ cascading의 연결고리를 끊어내는 방법은 !important이지만, 가능하면 쓰지 않는게 좋다. Use..
오류 내역 페이지가 로드될 때 카카오맵의 마커가 바로 생성되지 않고 어떤 추가 요청을 해야 나머지 마커를 불러오는 상황이 발생했다. 기존 코드 전체 보기 더보기 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..
