ice rabbit programming

한 commit의 변경 사항을 가져오고 싶은 경우가 종종 있다. feature/major-a에 적용한 것을 feature/major-b에 적용하기 위해 가져오거나, 아직 머지하지 않은 브랜치에 master 변경 사항을 가져오고 싶은데 불필요한 커밋이 있는 경우 등이다(사실 PR이 널리 사용되는 git 생태계에서 후자같은 경우는 많이 없을 것이고, 전자가 대부분일 것이다). 그럴 때 사용할 수 있는 기능이 cherry pick이다. 단어 그대로 한 커밋만 골라서 가져오는 기능인데, 아주 쉽게 사용할 수 있다. git cherry-pick {commit-hash} 와 같이 입력하면 적용된다. git cherry-pick 338cebf 물론 체리픽 과정에도 conflict가 발생할 수 있고, 이는 직접 해결해..

이 글을 검색으로 들어온 개발자라면 v-model에 대해서는 능숙하게 사용하겠지만, 앞 부분에서 간단하게만 짚고 넘어가겠다. 아래의 링크들은 모두 vue 공식 문서(한글)로 연결되어 있다. v-model 웹 프론트엔드나 클라이언트 프로그래밍은 사용자에게 직접 데이터를 제공하고 입력받는 UI를 다룬다. 이 데이터를 내부 로직으로 처리하거나 서버로 보내 처리하는 등의 과정이 필요하기 때문에, UI와 데이터 간의 바인딩이 필수적이다. vue에서는 v-model이라는 키워드로 바인딩을 제공한다. 아래처럼 쓸 수 있다. // ... // ... data() { myData: '' } input의 value가 myData로 바인딩되어, 초깃값 설정 및 입력 시 담는 등의 활용이 가능해진다. 컴포넌트 간의 통신 이번..

리스트 렌더링 공식 가이드 : kr.vuejs.org/v2/guide/list.html#Maintaining-State 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 아래 내용은 본인이 스스로 학습한 내용으로, 실제와 다소 차이가 있을 수 있습니다. 가감없이 피드백 부탁드립니다. :) 렌더링 과정은 꽤나 무거운 작업 중 하나이다. Vue에서는 렌더링을 할 때 효율을 위해, 가상 DOM 트리를 활용하여 변경된 부분만 렌더링을 진행한다. 컴포넌트나 객체가 변경되었는지 여부를 판단하여 데이터를 로드하고 다시 렌더링하게 된다. 배열의 속성을 직접 지정해주거나, 길이를 수정하는 등 Vue가 변화를 감지하지 못하는 경우가 있고, 컴포넌트는 자체 범위가 분리..

typescript 강의를 들으면서 정리한 마지막 글에서 Type Guard를 다루었다. 이후에 또 다른 기초 강좌를 수강할 기회가 있었고, 이미 들었던 내용이 대부분이었지만 좀 더 익숙해지고자 수강했는데, 다른 부분은 이전에 정리한 내용과 비슷했지만 Type Assertion과 Type Compatibility 관련 내용은 이전에 정리한 내용에 없어서, 추가로 포스팅하게 되었다. Type Assertion Type Assertion은 명시적 타입 캐스팅과 비슷하게 사용할 수 있다. 다만, 실제로 타입이 변경되는 것은 아니고 이런 타입이 들어올 것이라는 것을 프로그래머가 명시해주는 것이다. 다음처럼 사용할 수 있다. let a; let b = a as string; // 강제로 들어오는 type 지정 /..

이전 글에서 nginx의 proxy_pass에 대해서 포스팅했었다. 이번 포스팅에서는 reverse proxy할 때, 인증을 거칠 수 있는 auth_request에 관해 포스팅하려 한다. 대개의 웹 서비스는 인증/권한 관리 시스템을 갖추고 있고, 허용된 요청에 한해서만 정상적인 response를 반환한다. 예를 들어 로그인이 되어 있지 않은 사용자는, 로그인이 필요한 페이지에 접근 시에 로그인 페이지로 redirect 하는 경우가 있다. API 레벨이나 프론트엔드에서도 각각 처리가 필요하지만, 기본적으로 nginx에서 일차적으로 걸러주는 것이 필요하다. 이럴 때 auth_request를 사용할 수 있다. auth_request는 말 그대로 인증이 유효한지를 보내는 것인데, token을 사용한다면 이 to..

nginx는 아파치와 더불어 굉장히 널리 쓰이는 웹 서버이다. 2021년 기준으로 아파치가 약 41.48%로 1위, nginx가 약 26.41%로 2위의 점유율을 보이고 있다. 2000년대~2010년대 초반까지만 해도 아파치가 거의 60%에 육박하거나 상회하는 수준이었다는 것을 생각하면 nginx의 성장세가 무섭다고 할 수 있다. 어쨌거나 웹 서버는 HTTP 서버라고도 할 수 있는데, 클라이언트의 요청에 따라 서버 쪽에서 처리하여 정보를 제공하는 소프트웨어라고 할 수 있다. nginx가 제공하는 기능이 여러가지 있는데, 그 중에 이번 포스팅에서는 reverse proxy를 간단하게 다루려고 한다. reverse proxy Flask나 Express.js 등 자체적으로 serving을 지원하는 프레임워크를..

차원 축소(Dimensionality Reduction)는 변수가 매우 많을 때 데이터를 압축하는 컨셉이다. 즉, 데이터를 압축하고 학습 속도를 개선하기 위함이다. 차원이 높을 때 발생하는 현상 중 하나로는 차원의 저주가 있다. 차원이 높을수록 학습에 요구되는 데이터의 개수가 증가되는데, 만일 고차원일 때 적은 개수의 데이터로 표현하게 되면 과적합(Overfitting)이 발생할 수 있다. 이러한 차원의 저주 발생을 방지하고, 학습 속도 및 성능 향상을 위해 차원 축소가 사용된다. 아래 두 가지 방법이 있다. 주성분 분석(Principle Component Analysis) PCA는 고차원 데이터를 가장 잘 설명할 수 있는 주성분을 찾는 방식이다. 즉, 차원을 축소하면서도 원본 데이터의 특징을 가지고 있..

이전에 Python에서 linter를 적용하는 포스팅을 했었다. 이번 포스팅은 Vue.js에서 eslint를 적용해보겠다. python만큼은 아니라고 생각하지만, vue도 스타일 가이드(공식 스타일 가이드)가 꽤나 깐깐하다. 문법적으로 틀린 것이 아니라도, 강제로 ESLint를 끄지 않는 이상 필수적인 스타일 가이드를 위반하면 실행 단계에서 오류가 발생한다. 공식 가이드를 보면, 필수적인 것과 추천해주는 것 등이 있다. 어떻게 정할지는 개인 혹은 팀마다 자유이나, 최대한 일관적으로 유지하면 좋고 또 자동으로 수정해주는 부분이 많기 때문에 본인은 recommended를 사용하였다. prettier를 부가적으로 설치해서 사용할 수도 있지만, VS Code에서는 ESLint가 자동으로 formmating까지 ..