반응형 분류 전체보기703 [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. [Lodash] 배열 중복 제거하기 (ft. uniq, uniqBy, union, unionBy) uniq lodash에서 제공하고 있는 uniq() 메서드의 경우 단순하게 여러 개의 동일한 값을 가지고 있는 배열의 중복 데이터를 제거한다. // _.uniq(array) const arr1 = [1,1,1,3,3,4,5,2,6,4,7] console.log(_.uniq(arr1)); // [1,3,4,5,2,6,7] uniqBy 아마 사용하게 된다면 위에서 설명한 uniq메서드보다는 uniqBy 메서드를 좀 더 많이 사용하지 않을까 생각된다. uniqBy() 메서드는 "중복을 구분할 속성"값을 두번째 인수로 사용이 가능하다. // _.uniqBy(array, identity) const search = [ { id: 12, title: 'testest', name: 'jack', age: 26}, {.. 2023. 2. 22. [Lodash] Lodash란? Lodash Lodash는 개발을 하다 보면 한 번쯤은 들어보거나 접해볼 수밖에 없는 Javascript의 인기있는 라이브러리 중 하나이다. 나 역시 Lodash에 대해 아무것도 모르던 때가 있었는데도 불구하고 검색을 하다 보면 자연스레 알게 되었다. Lodash는 배열, 숫자, 객체, 문자열 등으로 작업할 때 번거로움을 없애고 쉽게 다룰 수 있게끔 하는 데 사용된다. 그렇기에 보통 Lodash는 유틸용 라이브러리라고 봐도 무방하다. 하지만 하나 알아둬야 할게 Lodash를 많이 사용하긴 하지만 꼭 좋기만 한 건 아니다. https://measurethat.net/Benchmarks/Show/6534/1/lodash-vs-es6-in-find-method Benchmark: lodash vs es6 in.. 2023. 2. 21. [GIT] Github에서 Pull Request 승인 절차 추가하여 코드 리뷰하기 Set Github Pull Request Approve 깃허브에는 참여 인원이 승인(Approve)을 해야 Pull Request 머지를 할 수 있도록 설정할 수 있는 기능이 존재한다. 이 방법을 통해 "몇 명 이상의 코드 리뷰를 통과해야 한다"라는 내부적으로 룰을 만들어도 좋을 듯하다. 아직 본격적으로 코드 리뷰 문화가 잡히지 않은 곳에서 처음 시도하기에도 괜찮다고 생각이 든다. 우선 Approve설정을 하는 방법에 대해 알아보자. 깃허브 Approve 설정하기 자 우선 승인 절차를 만들어보자. 위 이미지처럼 프로젝트의 [Settings]를 먼저 들어가 주도록 하자. 그리고 좌측에 [Branches] 탭이 존재할 텐데 눌러주면 위 화면처럼 "Branch protection rules"라고 나올 것이다.. 2023. 2. 16. 이전 1 2 3 4 5 6 ··· 79 다음 반응형
