JavaScript (29) 썸네일형 리스트형 [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-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.. [WEB] #1. 무한스크롤 만들기 무한스크롤을 아직까지 사용해본 적은 없으나, 기술연습이나 과제 등으로 활용되어 정리하고자 함 #1. element 속성을 이용한 무한 스크롤 #2. Intersection Observer API를 이용한 무한 스크롤 #2.1. IntersectionObserver API (component) #2.2. useIntersection Hook #1. element 속성을 이용한 무한 스크롤 document.documentElement.scroll 속성을 이용하여 활용한 방식으로 예전에 많이 활용하던 방식 리스트 중 특정 데이터 자동 포커싱 등에 활용 그림1. 은 html로 그려지는 요소(element) 의 사이즈 속성 정보를 표현 브라우저에 나타나는 부분을 viewport 라고 볼 때, clientHeigh.. [프로그래머스] Lv1. 숫자 문자열과 영단어 (javascript) 입력된 문자열로부터 원래 숫자 찾기 게임 규칙 숫자 영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine 제한사항 1 ≤ s의 길이 ≤ 50 s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지 않습니다. return 값이 1 이상 2,000,000,000 이하의 정수가 되는 올바른 입력만 s로 주어집니다. 나의 풀이 주어진 숫자별 영단어 배열을 상수(numbers)로 저장 주어진 문자열(s)를 한자리씩 파싱(sn)하여 순환 sn이 숫자형이 아니면 tmpStr에 추가 numbers에서 tmpStr과 일치하는 배열 인덱스 찾기(findNum) findNum이 있으면 숫자형 결과(answer)에 추가 findNum에 없으면 .. [프로그래머스] Lv2. 카펫 (javascript) 노란 바탕에 갈색 테두리를 가진 카펫의 사이즈(격자수) 구하기 규칙 중앙에는 노란색으로 칠해져 있고, 테두리 1줄은 갈색으로 칠해져있는 격자모양 카펫 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 깁니다. 나의 풀이 노란색 카펫의 사이즈만 결정되면, 갈색사이즈는 쉽게 구할 수 있음 노란색 카펫의 격자수(x, y) -> 갈색 테두리 (x*2 + y*2 + 4; 여기서 4=모서리값) x(가로)를 1부터 하나씩 증가시키며 yellow/x (y;세로) 값과 비교 가로길이가 세로길이와 같거나 큰 경우, 예상되는 갈색테두리 사이즈(tmp)를 계산 .. 이전 1 2 3 4 다음 목록 더보기
