Googling

Googling/tools

[생산성] VsCode Snippet 만들기

1. [F1] 누르고 'snippet' 검색2. Snippets: Configure User Snippets 선택.3. New Global Snippet file... 새로 만들어도 되고, 언어에 맞게 써도 됨.4. 저는 yoominho.snippets 만들게요.{ "뷰3스니펫": { "prefix": "vue3init", "body": [ "\n\n\n\t\n\n\n\n" ], "scope": "vue", "description": "Vue3 스니펫~" }, "힘내자": { "prefix": "fighting", "body": [ "힘내자힘내자", "으랏차차", ], "description": "힘내자" }, }이렇게 넣었습니다.멋집니다!

Googling/tools

[가독성] VsCode 자동정렬 너비를 좀 더 넓게 (feat. prettier)

https://prettier.io/VsCode 의 대표적인 자동정렬 툴 prettier을 설치(install)하면 저장(Ctrl + S) 버튼을 누를때마다 코드가 자동 정렬된다.코드가 좌우 길어지면 prettier는 줄바꿈을 시도한다.디폴트는 80자이다.모니터 해상도가 많이 발전했기때문에 120자로 바꾸는 것도 괜찮은 방법으로 보인다. 루트 폴더에 .prettierrc 파일을 만들고 아래같이 적어주면 끝.{ "printWidth": 120}여담으로,prettierrc 의 rc는 run commands의 준말이고, 프로그램 실행시 설정을 적용할때 사용하는 파일이라고 한다.(linuxt의 bash_profile 느낌)

Googling/Vue

[Nuxt] cannot find name ref in nuxt3 (feat. Auto-imports not working)

vue 말고 nuxt를 쓰면 좋은 점 중에 하나로 Auto-imports 기능이 있다.이는 import를 해주지 않아도 vue의 다양한 요소를 바로 쓸 수 있는 기능이다.내가 만난 이슈는새로운 .vue 파일을 생성하면auto-imports가 잘 안 되는지 cannot find name ref 라면서 빨간 줄이 그어진다.최상단에import {ref} from "vue";를 입력해 수동 임포트를 해주면 되지만 이건 오토임포트가 제대로 적용되면 필요없는 부분이다.1번째 해결법은Vue - Official (2023년 12월까지만 해도 Volar라고 불렷음) 플러그인을 리스타트, 리로드 해주는 방법이 있다.(이 플러그인은 VSCode IDE에서 Vue 포맷을 받아들이게 해주는 플러그인이다)https://..

Googling/Git

우리도 Git-flow를 사용하고 있어요 (Git 브랜치 전략)

2022년 상반기에 회사 Git 브랜치 전략을 고민하고 개선했었고 그 내용을 정리해보고자 한다. 인트로 SVN에서 GIT으로 넘어온 지 2년이 지났고, 깃 명령어를 다루는 데 있어 많이 익숙해진 시점이었다. 하지만 개발자들이 늘어나고, 배포 주기도 짧아지고 엔터프라이즈 사업이 확대되면서 좀 더 전략적인 접근이 필요해졌다. 기준 삼을 전략을 찾아보던 중 Git Flow 전략과 Github Flow 전략을 만났다. Github Flow 전략을 활용하기엔 테스트 자동화 등이 잘 준비되어있지 않았다. 그래서 Git Flow 전략을 기준 삼고자 면밀하게 들여다보게 되었다. 이때, 우아한 형제들의 '우린 Git-flow를 사용하고 있어요'를 많이 참고했다. Git Flow 는 무엇인가? Git Flow 전략은 fe..

Googling/typescript

[typescript] Use Kakao Share Api On Vue 3 & Typescript

서비스에 카카오톡 공유하기를 구현하기가 목표였다. kakao developers API 사이트에서 '메시지 - 카카오톡 공유' 문서를 읽고 구현하는 데까지는 어렵지 않았다. 다만, 환경이 typescript 환경이다 보니까 Kakao.Share 선언부에 타입 에러가 나고 있었다. 타입 처리를 해주기 위해 공식 문서를 뒤졌지만 공식 @type 모듈을 찾지 못했다. 공식 타입스크립트 사이트에서 찾아보았다. 가장 스타가 높은건 react-native 용이었고, kakao-sdk가 그다음에 쓰기 적절해 보였지만 cordova 용이었다. 환경에 맞게 보자면 vue-kakao-sdk 가 맞겠다 싶어 들여다보았고 찾은게 @types/kakao-js-sdk 였다. 허나, 이것도 Kakao.Link 구버전에만 대응이 되..

Googling/Vue

[Vue] 폴더 구조 고민해보기 🔥 (feat. components In vue3 + vite + typescript)

고민의 시작 사이드 프로젝트의 프론트 프레임워크를 'Vue'로 정하고 열심히 개발 중에 있다. 그러던 중 고민이 생겼다. 'components가 비대해지는데 어떻게 폴더링 해야 하는가?' '컴포넌트별로 스켈레톤 로딩 화면을 만들려고 하는데 항상 1쌍씩 생기는데 어떻게 폴더링 해야 하는가?' 사이드 프로젝트의 기능 구현이 끝나면 위 부분을 꼭 정리하고 리팩터링 후 오픈해야겠다는 생각 했고 미리 정리를 좀 해두려고 한다. 현재 환경 vue3 - 기존의 vue2와 vue3는 굉장히 다르다. - vue3 내에서도 초창기에서 조금 더 발전해 script setup 방식을 권장한다. - 나 같은 경우에는 vue2 => vue3 => vue3 script setup 중에서 가장 마지막 방식으로 구현했다. vite -..

Googling/postgresql

[postgreSQL] vacuum 총정리 (feat. dead_tuple, bloat, autovacuum)

1. MVCC => DEAD_TUPLE => BLOAT postgreSQL은 MVCC(다중버전 동시성 제어)의 이점을 위해 'UPDATE'와 'DELETE' 수행 후 이전 데이터를 즉시 제거하지 않는다. 즉시 제거하지 않은 이전 데이터를 'Dead Tuple'이라고 말한다. 그로 인해, Table Bloat(테이블 팽창), Btree Index Bloat(인덱스 팽창)가 발생할 수 있다. 이는 불필요한 I/O의 증가와 부적절한 인덱싱을 초래한다. 1-1. 어떻게 확인하는가? 🔎 팽창(BLOAT) 확인 : Githup 오픈소스[⭐1.1k] (https://github.com/pgexperts/pgx_scripts/tree/master/bloat) 튜플 확인 SELECT relname, n_dead_tup,..

Googling/postgresql

[postgreSQL] shared_buffers (feat. 권장하는 값, Aurora-vs-RDS, ScaleUp)

목적 DISK IO 를 최소화함으로써 IO 성능을 향상시킵니다. 1) 매우 큰 (수십, 수백 GB) 버퍼를 빠르게 액세스해야 합니다. 2) 많은 사용자가 동시에 접근할 때 경합을 최소화해야 합니다. 3) 자주 사용되는 블록은 최대한 오랫동안 버퍼 내에 있어야 합니다. 권장하는 값 공식문서의 내용을 의역해보았습니다. PostgreSQL 서버의 권장 shared_buffers 값은 시스템 메모리의 25%입니다. PostgreSQL 서버는 운영 체제 캐시에 의존합니다. 그래서 RAM의 40% 이상 할당하지 않는 것이 좋습니다. 토픽1. shared_buffers DB 파라미터 기본값이 Aurora PostgreSQL > RDS PostgreSQL인 이유는 무엇입니까? 위 [권장하는 값] 내용을 바탕으로 RDS..

날개단
'Googling' 카테고리의 글 목록