분류 전체보기 (35) 썸네일형 리스트형 [프로그래머스] Lv1. 키패드 누르기 키배드를 누른 손가락이 왼손 엄지인지 오른손 엄지인지 순서대로 나열하기제한사항numbers 배열의 크기는 1 이상 1,000 이하입니다.numbers 배열 원소의 값은 0 이상 9 이하인 정수입니다.hand는 "left" 또는 "right" 입니다."left"는 왼손잡이, "right"는 오른손잡이를 의미합니다.왼손 엄지손가락을 사용한 경우는 L, 오른손 엄지손가락을 사용한 경우는 R을 순서대로 이어붙여 문자열 형태로 return 해주세요.나의 풀이고정되어있는 키패드 위치 분리하여 처리 (147, 369)그 외 2580의 경우 1차원의 인덱스차를 2차원상의 위치차의 계산으로 변환하여 더 가까운 값으로 처리x, y 상대좌표 없는 계산식을 활용하여 누를 키패드인덱스와 현재 엄지손가락의 위치들의 거리값을 활.. [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.. 이전 1 2 3 4 5 다음
