텍스트 ...으로 표시하기 텍스트가 너무 길 경우 ...으로 생략 하려고 했다. text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다. text-overflow ellipsis 안먹힘 해결 방법 다음과 같은 조건으로 CSS가 작성되었는지 점검한다. 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다. overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘..
splice splice 함수를 사용하여 제거 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start - 배열의 변경을 시작할 index deleteCount - 배열에서 제거할 개수 - 0일 경우 제거하지 않는다. (이 경우 최소한 하나의 새로운 요소를 추가해야한다.) item1, item2...(Oprional) - 배열에 추가할 요소 - 생략할 경우 요소를 제거하기만 한다 Return - 제거한 요소를 담은 배열 - 아무것도 제거하지 않을 경우 빈 배열을 반환 Code import React, { useState } from 'react'; function MyComponent() { const [myArray, setMyArray] =..
테이블에 추가할 CSV 데이터를 준비한다. 두 테이블의 한글 이름을 기준으로 데이터를 연결할 예정이라 구분자의 이름이 완전히 같아야 한다. 레이어 → 레이어 추가 → 구분자로 분리된 텍스트 레이어 추가 선택 csv 파일을 import 후 UTF-8로 인코딩하면 한글 이름이 표출된다. (EUC-KR 등 예시 데이터가 깨지지 않는 인코딩을 선택한다.) 레이어 부분에 추가한 CSV 데이터(행정동코드)가 정상적으로 등록된 것을 확인할 수 있다. 추가하고자 하는 레이어의 속성을 클릭한다. 결합 → 하단 + 버튼 → 결합 반영할 테이블 선택, 결합할 필드와 대상필드를 선택한다. → 확인
shp 파일의 속성 테이블의 필드 이름 중 CD → AMD_CD로 변경하려고 한다. 공간처리 툴박스에서 필드 재작성 메뉴 실행 이름 부분을 변경할 이름(CD → AMD_CD)으로 수정 및 실행한다. - 소스 표현식은 추후 자동으로 변환된다. - 소스 표현식 이름을 변경할 경우 해당 필드 데이터가 모두 NULL로 변경될 수 있기 때문에 주의한다. 실행 후 레이어에 재작성 산출물이 생성된 것을 확인할 수 있다. 재작성 산출믈의 속성 테이블 열기를 눌러 최종 결과를 확인한다.
완성 결과물 결과물 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..
Notion을 사용하면서 alt + tab으로 창을 이동할 경우 마지막 글자가 삭제되는 현상이 있었다. 윈도우10 → 윈도우 11으로 업데이트 했으며, 업데이트 전부터 이러한 현상이 있었는지는 정확히 기억나지 않는다. 해결 방법
잠깐 간단한 자바스크립트 코드를 작성하고 확인하려면 html에 연결하기 너무 귀찮다. 아래와 같이 자바스크립트 파일에 console.log를 작성 후 출력해보자 터미널창에 아래와 같이 입력한다. # node 파일이름.확장자 node test.js 다만 실행시 파일경로를 정확히 입력하자!
