본문 바로가기
반응형

개발자의 삶110

초간단 lodash 사용하여 list 배열 정렬하기(feat. react) #Lodash Document Lodash Documentation_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primitilodash.com 지난 번에 lodash를 사용하여 배열의 중복을 제거하는 방법을 알아봤는데, 이번에는 lodash를 이용하여 초간단 배열 정렬하는 방법에 대해서 알아볼까 한다. 지난 번.. 2024. 4. 29.
list 배열을 reduce로 묶기 (feat. javascript, js) api에서 처음부터 데이터를 묶어서 전달해주면 좋겠지만,api에서 하는 일이 많거나 해당 데이터를 난잡하지 않고, 간결하게 등등 여러가지 이유로 화면에서 데이터를 묶어서 처리를 해야 할 때,reduce를 사용하여 묶는 방법에 대해서 알아보겠다. 예제const list = [{word: '가', no: 1}, {word: '나', no: 3}, {word: '나', no: 2}]const rtnList = list.reduce((acc, val) => { const { word, no } = val; if (!acc[word]) acc[word] = []; acc[word].push(no); return acc;}, {});// { 가: [1], 나: [3, 2] } 배열 내, 중복제.. 2024. 4. 26.
키보드 한글 자음, 모음을 영문으로 변환하기 (feat. react) 간혹 영문자를 입력해야 하는 상황에서 한글로 되어 있어서 한글로 써진 매우 안타까운 상황이 발생하곤 한다.누가 옆에 있다면, "한글한글"을 외쳐본 적이 있다거나 외침을 받아본 적이 있을 것이다.그래서 준비해봤다.바로 치환할 수도 있겠지만, 한글을 입력해야 하는 상황도 있을 수 있으니 유틸로 한번 만들어봤다.모든 케이스를 적용하진 못했지만, 이렇게도 할 수 있다는 걸 보여주기 위해 작성해봤다.해당 예제는 react로 작성했지만, ref로 dom을 받아서 처리한 부분을 제외하곤 거부감이 없으리라 생각된다.    1 import { useRef } from 'react';    2     3 const ConvertUtils = () => {    4   const inputRef = useRef();.. 2024. 4. 25.
리스트 정렬하기(feat. js) JavaScript에서 배열을 정렬하는 방법은 Array.prototype.sort() 함수를 사용한다. 해당 함수는 배열의 요소를 정렬할 때, 기본적으로 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬한다. 보편적인 예제// test list const list = [ { data: '가', seq: 2 }, { data: '나', seq: 1 } ]; // 오름차순 정렬 list.sort((a, b) => a.seq - b.seq); // 결과: [{data: '나', seq: 1}, {data: '가',seq: 2}] // 내림차순 정렬 list.sort((a, b) => b.seq - a.seq); // 결과: [{data: '가', seq: 2}, {data: '나',seq: 1}]위.. 2024. 4. 24.
Object List를 lodash uniqBy로 간단하게 중복 제거하기 (feat. react) list 내 object 형태로 된 데이터의 중복을 제거하기 위해 lodash를 사용해보자. 테스트 환경npm,  react <span style="font-f.. 2024. 4. 2.
[속성공부] 페이지 로드 후, 읽을 script는 defer로! 주의사항까지 속성 정리! defer는? 웹 페이지의 스크립트 실행을 지연시키는 데 사용한다. 이를 통해 HTML 문서의 파싱이 진행되는 동안 스크립트가 실행되지 않고, 문서의 구성이 완료된 후에 스크립트가 실행되어 페이지 로딩 성능을 향상시키고, 스크립트의 실행이 다른 자원들에 미치는 영향을 최소화하는 데 도움이 된다. 사용 방법 defer 사용 유무 차이점 사용하지 않을 때, 스크립트가 문서 파싱 중에 다운로드되고 실행되기 때문에, 스크립트의 실행이 완료될 때까지 페이지의 로딩이 중단된다. 스크립트가 실행되는 동안에는 페이지에서 다른 동작이 차단될 수 있다. 사용하게 되면, 스크립트가 문서 파싱 중에 비동기적으로 다운로드되지만, 파싱이 완료된 후에 순서대로 실행된다. 페이지의 로딩이 중단되지 않으며, 스크립트가 실행되는 동안에.. 2024. 1. 17.
[React][속성공부] ...rest? 넌 뭐하는 애니? in Component props 부모 컴포넌트 내 자식 컴포넌트 호출부 자식 컴포넌트 선언부 // ... const Component = () => { const { a, b, ...rest } = props; // ... } 컴포넌트 내 props에서 부모에서 보내지 않은 값을 받는 부분이 보인다. 뭐하는 앨까? ...rest 부모 컴포넌트로부터 전달된 모든 속성을 담은 객체를 받을 수 있다. 자식 컴포넌트에서는 다음과 같이 ...rest를 이용하여 모든 속성을 받을 수 있다. const Component = ({ a, b, ...rest }) => { // a와 b는 직접 사용 가능 // ...rest에는 c와 같은 추가 속성이 들어있다 return ( A: {a} B: {b} {/* ...rest를 통해 동적으로 처리할 수 있는 .. 2024. 1. 15.
[PostgreSQL] date 일자 계산, 문자 합치기 기초부터 심화(?)까지 쿼리 모음 기본date 편현재 기준으로 날짜를 계산하고 싶을 때-- 일자 계산 select now() + '1 day'::interval select now() - '2 day'::interval select now() + '-3 day'::interval -- 주 계산 select now() + '4 week'::interval select now() - '5 week'::interval select now() + '-6 week'::interval -- 월 계산 select now() + '7 month'::interval select now() - '8 month'::interval select now() + '-9 month'::interval string 편-- 문자 합치기 select concat('a'.. 2023. 12. 11.
초간단 api 서버 생성하기 간단하게 api를 만들어야 해서 그냥 간단하게 만들어봤다. springboot starter 사이트에서 빠르게 만들어보자. springboot starter 사이트 접속 https://start.spring.io/ Gradle(default) Java 20(최신꺼 써보자. java 20에 뭐가 있는지도 모르겠다.) SpringBoot 3.1.2(java는 20써놓고, snapshot 건너뛰고, 3.1.2..) Others default ▶ GENERATE 소스 제너레이트 후, 다운로드 압축 풀기 java 20 다운로드 and 설치 Download the Latest Java LTS Free Subscribe to Java SE and get the most comprehensive Java support.. 2023. 7. 21.
macOS Big Sur에서 git 설치하기 환경macOS bigsur 11 단계MacPorts 다운로드 및 설치git 다운로드 및 설치 1. MacPorts 다운로드 및 설치MacPorts 사이트 접속 The MacPorts Project -- Download & InstallationQuickstart Install Xcode and the Xcode Command Line Tools Agree to Xcode license in Terminal: sudo xcodebuild -license Install MacPorts for your version of the Mac operating system: Installing MacPorts MacPorts version 2.8.1 is available in various formatswww.ma.. 2023. 2. 7.
반응형