동고 팔자 상팔자

지난 글 자바스크립트 every 함수 구현 (feat. ECMA-262)에 이은 every 함수에 관한 글이다. 자바스크립트 every 함수는 판단 로직이 무엇이든 간에 빈 배열은 무조건 true를 반환하는데 이에 대한 글이다. 원글은 https://humanwhocodes.com/blog/2023/09/javascript-wtf-why-does-every-return-true-for-empty-array/ 자바스크립트 every가 빈 배열을 true로 반환하는 이유 JavaScript 언어의 핵심은 특정 부분이 어떻게 작동하는지 오해하기 쉽도록 충분히 크다. 저는 최근 이 메서드를 사용하는 일부 코드를 리팩토링하고 있었는데 every()에 숨어있는 논리를 실제로 이해하지 못했다는 사실을 발견했다. 내 ..

ECMA-262 규격대로 every 함수 구현해 보기 자바스크립트 every는 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트하는 함수다. ECMA-262에 나와있는 every 함수의 스펙대로 이 기능을 자바스크립트로 구현해 보자. 자바스크립트로 구현에 앞서 ECMA-262의 every 함수의 명세를 살펴보자. every의 동작을 설명한 내용은 아래와 같다. 그리고 이 내용을 단계별로 의사코드(Pseudo-code)로 표현한 내용이다. 이걸 한글로 해석하면 1. O는 this이다. 2. O의 길이를 len으로 선언 3. 만약 callbackfn이 함수가 아니면 타입에러가 발생한다. 4. k를 0으로 선언 5. 길이가 k보다 크면 반복한다. a. k를 문자열 Pk로 선언 b. O가 Pk..

자바스크립트 엔진과 자바스크립트 런타임은 어떻게 다를까? 자바스크립트 엔진과 런타임과 엔진은 동일한 것으로 잘못 언급되는 경우가 많다. 아마도 "자바스크립트 엔진"과 "자바스크립트 런타임"이라는 용어가 "자바스크립트를 실행하는 프로그램"을 의미하는 것으로 같은 의미로 사용되는 것을 들어봤을 것이다. V8, Node.js 또는 기타 관련 프로그램에서 종종 혼합하여 참조되기도 한다. 그러나 범위와 기능 측면에서 자바스크립트 엔진과 자바스크립트 런타임 간에는 상당한 차이가 있다. 이 차이점을 이해하는 것은 자바스크립트 언어를 잘 이해하는데 있어 중요하다. 자바스크립트 엔진과 런타임이 각각 무엇인지 이야기하기 전에 엔진과 런타임 모두와 함께 사용되는 몇 가지 용어(ECMAScript 및 자바스크립트)를 알아보자..

이 글에서는 Vue2의 반응성을 직접 구현해 보며 동작원리를 살펴볼 것이다. Vue3의 반응성을 바로 살펴보지 않고 Vue2 먼저 하는 이유는 Vue2의 반응성을 알면 Vue3도 쉽게 이해할 수 있기 때문이다. 미리 스포를 하자면 Vue2와 Vue3의 반응성의 가장 큰 차이점은 Vue2는 Object.defineProperty를 사용하여 반응성이 구현하고, Vue3는 Proxy를 사용하여 반응성을 구현한다는 것이다. Vue2 예제 코드 간단한 Vue2 코드이다. 이 글에서 구현해볼 샘플 코드이기도 하다. data 안에 price와 count 값이 있다. Vue2는 Vue 인스턴스에 data 옵션으로 전달되는 객체의 모든 속성을 순회하며 Object.defineProperty의 getter, setter를..

리액트(react), 뷰(Vue) 등 많은 SPA 프레임워크(라이브러리라고 부르기도 함)은 자신만의 반응성(Reactivity) 엔진을 가지고 있다. 반응성은 선언적 방법으로 변경 사항을 적용할 수 있게 해주는 프로그래밍 패러다임이다. 예를 들어 어떤 데이터가 변경되었을 때 화면 렌더링이 자동으로 수행된다면 이걸 반응성이 있다고 부른다. 기존 프론트엔드 개발이 화면을 어떻게 그릴지에 초점을 맞추고 개발했다면, SPA 프레임워크들이 나온 이후에는 데이터를 중심으로 데이터가 변경되면 화면이 어떻게 변할지에 초점을 맞추고 개발을 하게 되었다. 개발자는 데이터를 다루는 데 집중하고 데이터가 바뀌면 데이터에 맞는 화면 렌더링은 프레임워크에 위임하는 것이다. 그래서 요즘 SPA 웹 개발을 반응형 프로그래밍이라고 부..

동일한 값을 반환하는 이름만 다른 getter는 어떻게 deserialize 될까? 자바에서 직렬화, 역직렬화 시, 많이(거의) 사용되는 jackson 라이브러리의 deseialize 처리에 관한 글이다. 예상하지 못한 결과가 발생해서 jackson 라이브러리 코드 구현부를 살펴보았다. 현상 위는 name, itemList 변수가 선언되어 있는 Store 클래스이다. 각 변수에 대한 getter는 lombok으로 정의되어 있다. 알 수 없는 프로퍼티를 무시하는 @JsonIgnoreProperties(ignoreUnknown = true) 어노테이션도 추가되어 있다. 그리고 name을 대문자로 반환하는 getUpperName, itemList를 반환하는 getDiscountedItemList가 정의되어 있..

Sentry는 로그 취합 및 분석 도구이자 모니터링 플랫폼이다. Front-End 로그 수집에도 많이 사용되는 플랫폼이다. 다양한 프레임워크를 지원하고, 로그 시각화 도구까지 지원한다. Saas 형태로도 제공하고 onpromise 방법도 제공한다. docker compose나 helm chart를 사용하여 쉽게 설치할 수 있다. 개인 서버가 있고, freetier가 부족하면 직접 설치해서 사용하는 것도 좋은 선택이다. Self-Hosted 설치 Docker compose 또는 helm chart를 사용하여 설치한다. 가이드 : https://github.com/getsentry/self-hosted git : https://github.com/getsentry/self-hosted helm chart :..

깃허브 octokit 라이브러리 사용 에러 조치 빌드 환경 : Vite rest api를 사용하려면 octokit 설치할 필요 없고 @octokit/core만 설치해도 된다. yarn add @octokit/core Vite에 아무 설정도 하지 않으면 아래 에러가 발생한다. caught ReferenceError: global is not defined at index.mjs:657:16 vite.config 파일에 아래 global 설정 추가 define: { global: {}, }, global 설정 추가했는데 아래 에러가 뜨면 dex.mjs:1165 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at in..

vercel에 간단한 SPA 앱을 만들어서 배포했는데 아래와 같은 에러가 발생하였다. test.com/about 같은 하위 URL로 접근했을 경우, 서버(vercel)는 해당 URL을 처리하는 방법을 모른다. SPA의 라우팅 처리가 아닌 해당 리소스를 찾으려고 하기 때문에 404 에러가 발생하는 것이다. 이럴 때는 vercel에 내 SPA 앱의 인덱스 경로를 설정해 주면 된다. vercel rewrites를 참고해 vercel.json에 rewrite 설정을 하면 된다. { "rewrites": [{ "source": "/(.*)", "destination": "/" }] } 위의 rewrites 방법은 단순하지만 단점이 있다. 어떤 이유로 이미지나 번들, html에 직접 접근하지 못한다. 이럴 경우에는..

validator는 null을 검사하지 않고 순서를 보장하지 않는다. 아래 클래스처럼 벨리데이터를 사용하던 중 의문이 든 내용이다. class User { @Size(min = 1, max = 50) @Pattern(regexp = "^[a-zA-Z]$") private String name; @Min(value = 18) private int age; @Min(value = 130) private int tall; public User(String name, int age, int tall) { this.name = name; this.age = age; this.tall = tall; } } - name에 null이 들어와도 에러가 발생하지 않는다. @size, @pattern 동작 안 함 - 클래스..

여러 프로퍼티를 한 번에 watch 하는 방법 아래와 같은 코드가 있다. car와 coffee 값이 변하면 동일한 doSomething 함수를 호출한다. 여러 개를 watch 해야 하는 상황에서 모든 프로퍼티마다 watch를 선언하지 않고 한 번에 하는 방법이 있다. watch: { car: function (val, oldVal) { doSomething(); }, coffee: function (val, oldVal) { doSomething(); }, // .. so on } Vue 3 Vue 3에서는 아래처럼 할 수 있다. import { watch, ref } from 'vue'; export default { setup(() => { const car = ref('car'), coffee = ..

git gone 명령어를 만들어서 로컬 브랜치들 정리해보자 보통 이미 반영 또는 머지된 원격(remote) 브랜치들은 삭제된다. 하지만 그 브랜치들을 체크아웃(checkout)한 로컬 브랜치들은 여전히 우리 로컬에 존재한다. 이 브랜치들을 정리하지 않으면 로컬에 무수히 많은 브랜치들이 남게 되는데 이 브랜치들을 편하게 삭제할 수 있는 방법이 있다. 트래킹하는 원격 브랜치가 없는 로컬 브랜치는 지워지지 않으니 안심하고 사용해도 된다. git gone 명령어를 새로 만들 거다. git config 명령어를 통해 바로 등록해도 alias를 등록해도 되고, gitconfig 파일을 열어서 직접 입력해도 된다. 방법 1) config 명령어로 바로 등록 git config --global alias.gone "!..

깃허브에서 파일 아이콘 적용하기 크롬 확장 프로그램에서 귀여운 프로그램을 발견했다. 바로 깃허브 사이트에서 파일 확장자에 따라 아이콘을 적용해서 보여주는 프로그램인데 적용하면 귀엽고 가독성도 좋아진다. File Icons for GitHub and GitLab 익스텐션 설치 후, 적용하면 아래처럼 파일 아이콘이 적용된다. 조만간 이 귀여운 크롬 익스텐션 개발에 대해서 알아봐야겠다.

delete 명령어를 사용하여 k8s pod를 삭제했는데 계속 생성되는 pod를 삭제하는 방법 만약 pod를 삭제했는데 다시 생성된다면 pod가 deployment, job 등의 워크로드에 의해 관리되고 있는 건 아닌지 확인해봐야 한다. pod를 관리하는 워크로드들은 아래와 같다. - ReplicationController - ReplicaSet - Deployment - StatefulSet - DaemonSet - Job - CronJob 만약 위의 워크로드에 의해 생성되고 관리되고 있는 pod라면 위 워크로드를 삭제하면 pod도 함께 삭제된다. 해당 정보는 metadata.ownerReference를 보면 알 수 있다. 아래의 경우를 예를들면 해당 pod는 my-repset ReplicaSet 워크..

axios v1.x 버전의 몇 가지 변경점을 살펴보자 axios 버전이 v0.x에서 v1.x으로 업데이트되었다. v0.x에서 오랫동안 업데이트되지 않고 있었는데 한 번에 v1.x이 릴리즈 되었다. 당연히 메이저 버전이 올라갔으니 바뀐 사항들이 많을 것이고, 기존에 동작하던 기능들이 동작하지 않을 수도 있다. semantic-versioning에도 메이저 버전 변경 시에는 기존 API가 삭제/변경되거나 호환되지 않을 수 있다고 나와있다. Major Version: 기존 API의 변경/삭제로 update하면 동작하지 않을 수 있다는 경고의 의미 Minor Version: 이전 버전과 호환되는 방식으로 API가 추가되었으니 살펴보라는 의미 Patch Version: 이전 버전과 호환되는 버그 수정을 했을 경우..