반응형 개발자의 삶/JSs(React, Vue, Nuxt, ...)7 초간단 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. 키보드 한글 자음, 모음을 영문으로 변환하기 (feat. react) 간혹 영문자를 입력해야 하는 상황에서 한글로 되어 있어서 한글로 써진 매우 안타까운 상황이 발생하곤 한다.누가 옆에 있다면, "한글한글"을 외쳐본 적이 있다거나 외침을 받아본 적이 있을 것이다.그래서 준비해봤다.바로 치환할 수도 있겠지만, 한글을 입력해야 하는 상황도 있을 수 있으니 유틸로 한번 만들어봤다.모든 케이스를 적용하진 못했지만, 이렇게도 할 수 있다는 걸 보여주기 위해 작성해봤다.해당 예제는 react로 작성했지만, ref로 dom을 받아서 처리한 부분을 제외하곤 거부감이 없으리라 생각된다. 1 import { useRef } from 'react'; 2 3 const ConvertUtils = () => { 4 const inputRef = useRef();.. 2024. 4. 25. Object List를 lodash uniqBy로 간단하게 중복 제거하기 (feat. react) list 내 object 형태로 된 데이터의 중복을 제거하기 위해 lodash를 사용해보자. 테스트 환경npm, react <span style="font-f.. 2024. 4. 2. [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. Vue 3.x 프로젝트 생성 및 설정 프로젝트 생성하기 전... nuxt 설정하는데, 불편해서 vue 3으로 넘어왔다. vue 4 얘기도 나오는 것 같고, 안정화 버전이 vue 2.x 기반으로 되어 있는 nuxt로 굳이 프로젝트를 구성할 필요가 없으니 vue 3.x 로 가보자. 앞으로는 vuex 에서 pinia 로 넘어갈 예정인 것 같다. 기본적으로 vite 설정으로 되어 있는 듯하다. 버전 정보 vue: 3.2.41 pinia: 2.0.23 프로젝트 생성 > npm init vue@latest 모듈 추가 및 설치 > npm i axios > npm i vue-router github 공유 https://github.com/seodaeya/vue-pinia-vite.git GitHub - seodaeya/vue-pinia-vite: vue .. 2022. 11. 22. Nuxt 프로젝트 생성 및 설정 프로젝트 생성하기 전... 아직 Nuxt 3이 Beta 버전이다. RC라 확정이겠지만, nuxt 2로 진행하기로 한다. 버전 정보 nuxt: 2.15.8 vue: 2.7.10 @nuxtjs/composition-api: 0.33.1 @nuxtjs/composition-api 버전이 아직 1 이하인 걸 봐선 정식 버전은 아닌 것 같다. nuxt 3 정식 버전 발표 후론 굳이 설정해주지 않아도 되지만, ... (이게 최선인가?) 프로젝트 생성 > npm init nuxt-app nuxtProject 모듈 추가 및 설치 > npm i @nuxtjs/composition-api composition-api 설정 nuxt 2에서 vue composition-api를 사용하기 위해서 설정이 필요하다. buildMo.. 2022. 11. 11. 세션 끊겨도 노드 실행될 수 있도록... npm start? nohup npm start & 2020. 10. 8. 이전 1 다음 반응형
