Intro 프론트엔드에서 .env 파일에서 백엔드 url등의 환경변수를 설정 후 빌드를 하게 되면 .env 안의 내용들이 함께 패킹되면서 빌드된 파일의 환경변수 설정을 바꾸는 것이 어렵다. 빌드 후에도 url 변경을 용이하게 하기 위해서 config.js 파일을 생성 후 관리할 수 있다. config.js 파일 생성하기 index.html 파일이 들어있는 publc 폴더 안에 config.js 파일을 생성 후 아래와 같이 변수를 생성한다. // public/config.js window.backendUrl = "URL" // example window.backendUrl = "http://192.168.0.1:8080/api" index.html에 config.js 추가하기 html → body → sc..
지도에 마우스를 hover하면 속성 데이터를 표출 기능이 필요했다. map.on("pointermove",fucntion(event){}) 기능을 사용하여 hover시 속성 데이터를 표출 가능하다. 하지만 레이어가 여러겹 있을 경우 어떤 속성 데이터를 표출할지 지정해 주어야한다. 레이어에 이름 지정 VectorLayer 생성시 layerName을 넣어준다. 임의의 속성을 부여했기 때문에 layerName이 아닌 name 등 다른 이름으로 속성을 지정해 주어도 된다. const vectorLayer = new VectorLayer({ source: vectorSource, style: myLayerStyle, // 위에서 정의한 스타일을 적용 layerName: 'myLayer', // 레이어 이름을 부여..
완성 결과물 결과물 GIF 1.기본 & 커스텀 모드를 선택할 수 있다. 2. 커스텀 모드일 경우 1번 색상과 2번 색상을 지정해 그라이데션을 설정할 수 있다. 3. 색상 설청창 외부 클릭시 닫힌다. 설계 및 주요 함수 위 결과물은 별도 라이브러리를 사용하지 않았다. input 태그에서 type="color"로 지정하면 색상 그라데이션을 설정할 수 있다. {defaultSetting ? null : ( setColor1(e.target.value)} /> )} input 태그는 색상을 HEX 코드로만 인식할 수 있기 때문에 아래 단계를 거쳤다. 1) 2가지 색상을 HEX 코드 입력 2) 2가지 색상을 RGB 코드로 변환 후 중간 값들을 계산 3) 결과 값들을 HEX 코드로 반환 RGB → HEX 변환 함수..
문제점 인식 - 메뉴탭을 클릭했을 시 강조되는 부분을 useState에 index를 넣어 관리했다.- 하지만 useState를 사용하니 새로고침시 무조건 0번 index인 첫번째 탭이 활성화되는 문제점이 발견되었다.- 때문에 현재 보고있는 페이지를 기준으로 메뉴탭을 활성화하는 방법을 찾게 되었다. react-router-dom 설치 - react 설치- react-router-dom 설치 npm install react react-router-dom useLocation react-router-dom의 useLocation을 사용하면 현재 URL과 path 값을 비교하여 탭을 활성화해준다. // App.js import React from "react"; import { BrowserRouter, Swi..
바로 코드로 들어간다. - 샘플 데이터 양식은 추후 수정 예정 코드 // App.jsx import React from "react"; import { Dropdown } from "components/buttons"; const smapleData = { data: ["1번", "2번", "3번", "4번"] }; export default function Main() { return ( ); } // src/components/buttons/index.jsx export * from "./Dropdown"; // src/components/buttons/Dropdown.jsx import React, { useState } from "react"; import styled from "styled-co..
Intro 드롭 다운(Drop Down), 토글 메뉴(Toggle Menu), 슬라이드 메뉴(Slide Menu), 아코디언 메뉴(Accodian Menu) 등 다양한 이름으로 불리우는 것 같다. 하늘색 부분의 영역을 클릭하면 On/ Off 된다. 특정 아이콘 or 버튼을 삽입하여 그 부분만 클릭시 메뉴를 움직이도록 만들 예정이다. Code - styled-components를 사용했다. - 다른 페이지에서 사용하기 위해 슬라이드바를 컴포넌트 형식으로 따로 분리하여 파일을 작성했다. - 원래 슬라이드바 왼쪽에 다른 컴포넌트가 있는 부분을 고려하여 margin, padding 등의 css를 작성했다. 때문에 작동원리, 애니메이션 부분만 참고하시길 // SlideBar.jsx import React, { u..
Fragment란? React에서 컴포넌트가 여러 엘리먼트를 반환하는 패턴을 자주 볼 수 있다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다. 다음은 Fragment을 사용하는 방법이다. Fragment 안에 render하고 싶은 child를 넣어주면 된다. // Fragment의 기본 구조 render() { return ( ); } example 더 정확한 이해를 위해 예시를 통해 알아보자. 예를 들어, 아래와 같이 table에 ‘Hello World’를 출력하고 싶다고 가정한다. Hello World 우리가 위와 같이 출력하고자 하는 경우 아래와 같이 Table과 Columns를 구분하여 생성한 후 Table안에 Columns를 생성하고자 할 것이다. cl..
차이점 onKeyUp, onKeyDown 키를 누르고 떼는 동작 자체에 반응한다. 인식 가능 : 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter 인식 불가능 : 한/영, 한자, Print Screen onKeyUp, onKeyDwon는 keycode를 사용하여 특수키를 제외한 모든 키를 인식한다. onKeyPress 실제로 문자가 입력되었을 때 반응한다. 인식 가능 : 문자, 숫자 인식 불가능 : Ctrl, Shift, Tab, Alt, F1~F12, Scroll Lock, Pause, Enter, 한/영, Print Screen onKeyPress는 ASCII 값으로 사용되서 shift, ctrl 같은 키는 인식하지 못한다. keyCode //..
프로젝트를 진행하면서 크롬 개발자 도구에서 console.log()를 확인할 경우 console 창에 2번 출력되는 경우가 있다. 왜 2번씩 출력되는 것인가? 그 이유를 구글에서 확인할 수 있었다. Strict Mode console.log가 2번 출력되는 이유는 프로젝트의 src/index.js 파일에서 태그 때문이다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. 즉, 잠재적인 문제가 있는지 확인하기 위해서! 또한, Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다. ★ StrictMode는 아래와 같은 부분에서 도움이 된다..
구글폰트를 적용하는 방법은 2가지가 있다. import로 불러와 적용하는 방법 다운로드 받은 후 프로젝트 안에 폰트를 넣는 방법 1번의 방법은 매번 import 해오기 때문에 랜더링시 좀 더 느리다고 한다. 때문에 직접 다운로드하여 사용하는 방법을 적용 해보기로 했다. 1. 구글 폰트 사이트에서 원하는 폰트를 선택하여 다운받는다. 구글 폰트 사이트 : https://fonts.google.com/ 2. 폰트를 모아놓을 폴더를 만들어 저장한다. 폴더 위치는 자유롭게 가능하다. ex) src/fonts/폰트.ttf 3. App.css 파일 안에 사용할 폰트들을 불러온다. 저장한 font를 어디에서나 사용할 수 있게 최상단 파일인 App에 정의했다. @font-face { font-family: [사용할 폰트..
