한 개발자의 노트패드

재밌는 글이 있어서 올려봅니다. https://bitfieldconsulting.com/golang/crisp-code

요즘 ai가 유행하고 있습니다. gpt3니 4니 뭐니 해서 나올때마다 연신 최고라고 추켜세우고 있죠. 기술이 발전하고 있습니다. 그럼에 따라 개발자들의 지식도 발전하고 있죠. 예전보다 더 늘어가는 지식에 더불어 저는 큰 고민에 빠졌습니다. '어떻게 해야 개발을 날먹할 수 있을까?' 인생 날먹을 실패했기에, 이번엔 개발이라도 날먹을 시도해보기로 했습니다. 엠지하지 못하고 꼰대같은 마인드였던 제가, 드디어 엠지한 ai와 손을 잡기로 한 것이죠. https://github.com/features/copilot 깃허브 코파일럿. 개발 인생에 처음으로 써 본 ai입니다. 사실 나오기 전부터 유명했죠. 컴퓨터가 코드를 대신 짠다느니, 개발자들이 망한다느니 해서 논란도 많았고, 깃허브의 repo를 무단으로 가져온다고..

v-if와 v-show. 둘 다 조건부 렌더링에서 사용하는데에 쓰입니다. v-if는 조건이 만족했을 때에 렌더링을 하고 그렇지 않을 시에 dom 레벨에서 제거되며, 그와 관련된 모든 감시들도 제거됩니다. 만약 컴포넌트라면 인스턴스가 제거 되며 이후 렌더링이 되면 모든 상태가 초기화가 되겠죠. v-if는 주로 특정한 데이터를 가지고 있지 않을 시 오류를 발생시키거나, 컴포넌트를 많이 사용되는 경우에 사용됩니다. 주로 에러 출력이나, 비동기 처리로 불러온 값에 따라 렌더링을 요구할 시에 사용하죠. v-show는 display:none으로 처리를 하기 때문에 dom 레벨에서도 제거되지 않으며, 모든 감시들도 제거되지 않기 때문에 상태값도 초기화가 되지 않습니다. 추로 변경 빈도가 높은 경우에 사용하며 대표적으..

vscode의 extension에선 많은 기능들을 지원합니다. 저는 그 중 todo highlight라는 걸 이용하는데 사용법은 간단합니다. 주석으로 FIXME를 입력하면 저렇게 highlight가 생기게 됩니다! 참 신기하죠!? 그냥 해봤습니다. 여튼 저같은 경우 실무에서 api가 연동되지 않았을 때, 혹은 작업이 수정될 때에 FIXME를 통해 하이라이트를 주곤 합니다. json을 통해 수정도 할 수 있고, 어렵지도 않아서 설치만 하면 됩니다.

UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기. 코어와 프로덕트의 책임 모호. 이걸 어떻게 해결해야 할까? 1.계층을 나누고 책임을 재설계하라. 하지만 도메인이 안보인다. 여기선 sdk 안에 도메인이 있는데 굳이 이럴 필요가 없지 않을까? 2.ui 파운데이션을 만들자. 하지만 상위 조직에 들어갔을 때 디자인 시스템이 대체 되면 어쩌지? 다른 조직에선 디자인 시스템을 다르게 쓰면 어떡하지?라는 생각이 들었다. 그래서 뺌. 3. 변경을 모듈화해서 동선을 최소화하자 매니페스토 파일을 만들어서 잘 활용해보자. 정리.

거두절미하고 github actions를 사용해보겠습니다. Github actions github에서 제공하는 CI(Continuous Integration : 지속 통합)과 CD(Continuous Deployment)를 위한 서비스 입니다. 대부분의 개발자가 코드 저장소(repository)로 사용하는 github에서 추가된 서비스 답게 현재 많은 개발자들이 이용하고 있는 서비스 이기도 합니다. github actions는 코드 저장소에서 어떤 이벤트가 발생했을 때, 특정 작업을 발생시킬 수 있습니다. 예를 들면, 누군가가 코드 저장소의 특정 branch에 push 하거나 pull request를 생성하게 되면 github actions를 통해 코드 변경분에 문제가 없는지를 검사할 수가 있죠. 그 외..

이전에 타입 가드에 대해 이야기한 적이 있습니다. 오늘은 유저 정의 타입 가드에 대해 간단히 이야기 해보죠. 타입가드는 컴파일러가 타입을 예측할 수 있도록 타입을 좁혀 타입을 더 명확하게 보장할 수 있도록 합니다. 타입 가드엔 여러가지가 있습니다. Javascript에 이미 존재하는 typeof, instanceof 연산자를 이용해 타입 가드를 할 수도 있죠. 하지만 오늘은 제목이 user defined type guards이니까 이것에 대해 알아보도록 합시다. interface Animal { name: string; age: number; } interface Flower { type: string; age: number; } interface ExampleInfo { page: number; inf..

제목은 거창하게 써놨지만 별 건 아닙니다. 부모에 v-model로 연결된 값을 자식이 바꾸고자 할때 사용할 수 있는 방법입니다. 이야기만 들으면 간단하죠. 스토어를 사용하면 됩니다. pinia를 통해 store를 만들고 store에 값을 넣으면 되죠. 저 역시도 그렇게 생각했었고, 실무에서 그렇게 사용할려고 했습니다. 하지만. 만약 배열 안에 있는 객체의 값만을 바꿀려면 어떻게 해야 할까요? items: [ { uuid: '1', keyword: '탭 1', title: '', content: '', thumbnail: '', }, { uuid: '2', keyword: '탭 2', title: '', content: '', thumbnail: '', }, { uuid: '3', keyword: '탭 3..

InterSection Type 인터섹션 타입은 여러 타입을 만족하는 하나의 타입을 말합니다. interface Person { name : string; age : number; } interface Developer { name : string; skill : string; } type Capt = Person & Developer 위 코드는 Person과 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt라는 타입에 할당하는 코드입니다. 이렇게 되면 Capt의 타입은 아래와 같이 정의됩니다. { name : string; age : number; skill : string; } Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에..

개인적으로 공부한 타입스크립트에 대한 정리입니다. 최소한으로 보기 위한 예제만 정리해서 자세한 사용법은 공식 문서를 참조하시는 게 도움이 됩니다. Typescript? 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 대규모 애플리케이션을 개발하는 데에 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 MS사에서 개발한 언어로, ES5 문법을 그대로 가져다 사용할 수 있습니다. 뿐만 아니라 ES6 문법을 위한 Babel과 같은 별도의 트랜스파일러를 사용하지 않아도 ES6 문법을 사용할 수 있습니다. Tuple 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다. let arr : [string, number] = ['hi, 10]; Enum 특정 값(상수)들의 ..