반응형 분류 전체보기706 [JavaScript] arr.with() - 특정 인덱스에 위치한 값 변경하기 배열의 특정 인덱스에 위치한 값을 바꾸는 Array.prototype.with() 메서드에 대해 알아보자.이 함수는 ECMAScript 2023에 소개된 배열 메서드이다.이 메서드의 역할은 제목과 본문 첫 줄에 적혀있는 것과 마찬가지로 지정된 인덱스에 위치한 값을 대체하고 새 배열을 반환하는 기능을 제공한다.사실 무슨 기능인지는 알겠는데 어디서 활용할 수 있을지 감이 안 잡힌다. ▷ 구문arr.with(index, value)index : 변경할 인덱스의 값을 의미하며, 음수로 사용 시 배열의 끝부터 역산한다.value : index에 위치한 값을 대체할 값을 의미한다.▷ 예제 1) Array.prototype.with() 기본 사용법const arr = [0, 1, 2, 3, 4, 5]const .. 2023. 7. 21. [Lodash] 객체에서 특정 프로퍼티만 뽑아서 사용하기 (ft. pick) pick lodash에서 제공하고 있는 pick() 메서드의 경우 객체에서 특정 프로퍼티만 사용하고자 할 때 사용된다. 일반적으로 어디서든 omit을 소개할때 같이 소개되는 메서드이기도 하며, omit과 마찬가지로 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. // _.pick(object, [paths]) const object = { 'a': 1, 'b': '2', 'c': 3 }; const result = _.pick(object, ['a', 'c']); console.log(result) // { 'a': 1, 'c': 3 } pickBy pickBy() 메서드는 특정 프로퍼티만 뽑아 사용하는것은 동일하나 특정 조건.. 2023. 6. 18. [Lodash] 객체에서 특정 프로퍼티 제외하기 (ft. omit) omit lodash에서 제공하고 있는 omit() 메서드의 경우 객체에서 특정 프로퍼티를 제외할 때 사용되는 메서드이다. omit이라는 명칭은 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. 특히 typescript의 유틸리티 타입에서도 흔하게 볼 수 있다. // _.omit(object, [paths: string|string[]]) const object = { 'a': 1, 'b': '2', 'c': 3 }; console.log(_.omit(object, ['a', 'c'])); //{ 'b': '2' } 특정 객체를 기준으로 제외하고 싶은 프로퍼티의 키 배열을 넣어두면 제외된 나머지 객체가 반환되는 형식이다. omi.. 2023. 6. 13. [NuxtJS] The client-side rendered virtual DOM tree is not matching server-rendered content. NuxtJS 렌더링 오류 NuxtJS 개발 환경에서 작업을 하다가 렌더링 오류가 발생하였다. 어찌 보면 해당 오류는 아주 흔하게 볼 수 있는 오류가 아닐까 생각된다. 에러 내용을 자세히 살펴보자. The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render. 오류 내용은 매우 심플하다 "클라이언트 사이드에서 렌더링 된 가상.. 2023. 6. 5. [JavaScript] BF캐시 (Back Forward Cache) 사실 BF캐시 관련한 내용을 JavaScript 카테고리에 넣는 게 맞으려나 하고 망설여지지만 카테고리가 다양하지 못해 일단 여기에 넣어두고자 한다. BFCache BFCache란 뭘까? 이 녀석의 풀 네임은 Back Forward Cache이다. 즉, 이름 그대로 뒤로/앞으로 가기 버튼을 눌었을 때 화면을 바로 보여주기 위한 브라우저에서 발생하는 최적화 기능이다. 페이지를 이동할 때 페이지 전체의 스냅샷을 저장하는 캐시라고 생각하면 된다. BFCache는 무조건 발생하는 건가? 결론부터 말하자면 '무조건 발생하는 건 아니다'라고 말할 수 있다. 주요 브라우저인 크롬/사파리/파이어폭스 등 BFCache를 제공하지만 특히 크롬 같은 경우에는 BFCache에 최적화된 사이트만 캐싱하려고 노력하는 듯하다. 개.. 2023. 5. 30. [Lodash] 배열 차집합(difference) 구하기 difference lodash에서 제공하고 있는 difference() 메서드의 경우 차집합의 개념과 마찬가지로 하나의 기준이 되는 배열이 있고 그 이후에 오는 배열로 이루어진 값들과 비교하여 중복되지 않는 값을 반환한다. // _.difference(array, [values]) const arr = [2, 1] console.log(_.difference(arr, [2, 3])) // [1] console.log(_.difference(arr, [2, 3], [1])) // [] console.log(_.difference(arr, [3, 4], [5])) // [2. 1] 새로운 배열을 반환하기 때문에 변수에 담아서 사용하도록 하자. 참고: https://lodash.com/docs/4.17.15.. 2023. 3. 13. [Lodash] 배열 교집합(intersection) 구하기 intersection lodash에서 제공하고 있는 intersection() 메서드의 경우 단순하게 여러 개의 동일한 값을 가지고 있는 배열의 중복 데이터만을 추출한다. // _.intersection([arrays]) const arr1 = [1, 2, 3, 4, 5] const arr2 = [3, 4, 5, 6, 7] console.log(_.intersection(arr1, arr2)) // [3, 4, 5] 여기서 결과값의 순서와 참조는 첫 번째 배열에 의해 결정된다는 것만 알고 가면 될 듯하다. 참고: https://lodash.com/docs/4.17.15#intersection Lodash Documentation _(value) source Creates a lodash object w.. 2023. 3. 8. [VueJS] Vue에서 페이지 새로고침 하기 Vue에서 페이지 새로고침하기 VueJS를 사용했다면 SPA(Single Page Appclication) 방식으로 개발을 진행했다고도 할 수 있는데, 이럴 경우에는 일반적으로 location.href/reload 같은 방식의 새로고침은 권장하지 않는다. 이전에 작성했던 글 중에 라우터 관련한 글이 있었는데 그 방법을 활용할 것이다. https://mine-it-record.tistory.com/661 [VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 .. 2023. 3. 7. [GIT] .env에 대해 .gitignore이 먹히지 않을때 .env파일을 가지고 작업을 하는데 분명 .gitignore에 선언을 해뒀음에도 불구하고 자꾸 git status를 하면 눈에 보이는 현상이 발생하는 경우가 있다. 이는 .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이라서 그렇다. 해결방법은 간단하다 원격 저장소의 .env파일을 지우면 되는것이다 git rm .env --cached git commit -m "remove .env file from git repo" git push 보통 원격 저장소에는 .env파일을 직접 올리지 않고 .env.example 같은 형식으로 다르게 올려서 공유하고는 한다. 그리고 위에서 입력한 rm .env --cached 명령어를 통해서는 로컬에 있는 파일이 지워지지 않으니 걱정할 필요 없다. 캐시 지우고 > 커밋.. 2023. 2. 22. 이전 1 2 3 4 5 6 ··· 79 다음 반응형
