분류 전체보기 (34) 썸네일형 리스트형 [WEB] #5. 캔버스에 스파이뷰 추가하기 지도기반의 위치정보를 표출하는 웹서비스를 오랫동안 개발하면서 openlayers(ol)를 정말 잘 활용했었다. openlayers에 layer spy라는 예제가 있었는데, 이 로직을 기반으로 캔버스를 이용하여 스파이뷰를 작업해 보았다.캔버스에 이미지를 올리고, 이미지에 벡터영역을 그리기 위해 위치를 잘 잡을 수 있도록 가이드라인과 스파이뷰가 필요해졌다.캔버스에 마우스오버 시 확대된 스파이뷰를 표현할 예정이다.#0. 실행환경[WEB] #4. 캔버스 이미지 처리 프로젝트에 덧붙여 진행1차로 새로운 캔버스를 생성하여 작업했으며,가능하다면 ol처럼 레이어 관리를 통해 진행해 볼 예정이다.#1. 디렉터리 구조...∨ canvas/ ... > interaction/ > guideLine... [WEB] #4. 캔버스 이미지 처리 캔버스(htmlCanvasElement)에 이미지 업로드 후, 특정영역에 클릭이벤트를 주는 기능을 구현하고자 한다. openLayers를 통해서만 활용해 봤을 뿐, 실제로 태그를 직접 사용해 본 경험이 없어 하나씩 작업해 볼 예정이다. file upload 를 통해 이미지업로드 후, 이미지정보를 기반으로 캔버스에 비율에 맞춰 도식화한다. #0. 실행환경 next 13 프로젝트 생성 typescript tailwind (css) zustand dexie #1. 프로젝트 디렉토리 구조 ... ∨ src/ ∨ app/ > ... > canvas/ : > _components:/ : "use client" 컴포넌트 > _store/ : zustand store > utils/ : 기타 함수들 (포맷변환 등 ) .. [JS,TS] 파일 사이즈 단위 변환 업로드기능 개발하다보면 파일사이즈를 깔끔하게 보여줘야할 때가 있다. File 타입에는 byte단위의 파일사이즈를 알 수 있다. 이 사이즈를 각 적절한 파일단위로 포맷하는 기능을 정리한다. #0. 파일 단위 /** * @Bytes 바이트 * @KB 킬로바이트 * @MB 메가바이트 * @GB 기가바이트 * @TB 테라바이트 * @PB 페타바이트 * @EB 엑사바이트 * @ZB 제타바이트 * @YB 요타바이트 */ const unit = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; #1. 파일변환 공식 파일의 단위값: \( 1 byte = 2^{10}\) = 1024 각 사이즈값은 바이트의 거듭제곱값과 동일: \( {사이즈} = 1024^n \) .. [React-Antd]#1. upload render 디자인 커스텀하기 서론 React 기반으로 백오피스 구축하다보면 빠른 개발을 위해 ant.design을 사용하는 경우가 종종있다. 빠르게 사용하기위해 제공되는 디자인을 이용하지만, 간혹 커스텀이 필요한 경우도 발생한다. ant.design 에 문서가 잘 나와있지만, 나중에 참고하기위해 정리하고자한다. 최신버전이 아닌 4.1x 버전의 라이브러리를 사용하고있다. 기본 antd Upload.Dragger는 파일업로드 폼과, 파일 리스트 폼 구조가 따로있다. 자사에서 사용중인 화면은 단건 업로드로, 업로드 후 업로드폼이 사라지고 파일리스트가 나타나야하기때문에 그부분도 추가 작업했다. antd 속성을 이용한 커스텀과, itemRender에서 직접커스텀하는 두가지 방식으로 정리 했으며, 카드형 타입으로 사용 #0. 실행환경 reac.. [React-Native] #2. React Native - navigation 이용한 페이지 이동 react native 에서 @react-navigation 을 이용하여 라우터를 처리할 수 있다. 간단하게 페이지 이동 컴포넌트를 만들어보고자 한다. 문서에 명시된 소스코드는 예시이기 때문에 실제 작업한 내용과 다를 수 있다. 각각이 어떻게 연결되는지 직접적으로 확인하기 위해 명명규칙을 직역적으로 진행했다. #0. 공식문서 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org #1. navigation 패키지 설치하기 패키지 설치 모듈을 통해 @react-navigation/native 및 @react-navigation/native-stack.. [React-Native] #1. React Native 프로젝트 첫 시작하기 한창 코딩교육 때 안드로이드 앱 개발을 처음 접해봤었다. 그 당시에는 안드로이드, ios 각각 개발을 진행했어야 했는데, (모바일/웹 처럼) 이제는 올인원 프레임워크들이 많이 나타나는 듯 하다. 경험해보지 못했던 기술들을 하나씩 익혀보고싶었고, 그 첫 번째로 react-native를 선택했다. react-native 공식문서의 quickstart를 참고하여 진행한다. 안드로이드의 경우 폰에서 expo app을 설치해야한다. #1. React-Native 프로젝트 생성하기 (expo go) 앱 개발의 첫발을 내딛었기 때문에 Expo-Go를 활용하여 진행 숙련된다면 React-Native-CLI를 활용할 것 # 1. yarn 사용 시 yarn create expo-app {project_name} # ex... [WEB] #3. tslint 로 코드 문법 설정하기 # 서론 현업 때 angular 기반으로 프로젝트를 진행하면서 tslint로 룰셋 적용후 코드리팩토링을 수행한 경험이 딱 한번 있었다. 과제 특성 상 정부 표준 룰셋을 적용하여 진행하게되는데, 그당시는 html, script에 대한 정부 표준 룰셋이 정의되지 않아 오픈된 룰셋을 기반으로 수정하여 진행했었다. 그 이후론 기본 룰셋을 가지고 최소한으로 개발을 진행했을 뿐, eslint/tslint에 대해 깊이 생각하지 않았다. 적당히 표준만 지키면 된다고 생각했을 뿐.. 프로젝트마다 룰셋이 달랐고(언어도 달랐다), 회사마다도 다르기에 정답을 정할 순 없지만 올바른 코딩습관을 들이기 좋을 듯 하여 tslint를 적용하고 확인하는 방법을 정리하고자 한다. #0. 실행환경 next.js 프로젝트 생성 typesc.. [WEB] #2. jotai 세팅 및 활용하기 # 서론 초기 angular로 개발하다가 React로 변경하게 되면서 redux를 많이 들었었다. 짧은기간에 환경세팅부터 통합테스트까지 진행해야 한다는 핑계로 react도 튜토리얼을 건너뛰고 진행했었고, 때문에 redux는 아예 배제하고 개발을 진행했었다. 다행히(?)도 openlayers를 이용한 지도기반 사이트 구축을 중심으로 했기 때문에, 전역상태관리 패키지가 없어도 진행할 수 있었다. ( 전역변수로 사용될 map 컴포넌트안에서 모든 위젯 컴포넌트 호출.. ) React가 점차 성장하면서 redux, contextAPI, recoil 그리고 jotai 등 다양한 상태관리 패키지들이 나타나고있다. 그 중 jotai 를 이용하여 웹지도를 다시 구현해보려고 한다. openlayers와 vworld api.. 이전 1 2 3 4 5 다음
