분류 전체보기 썸네일형 리스트형 Github Action Cache 를 사용하여 CI/CD 최적화 로컬 환경에서 개발을 할 때는 외부 패키지를 최초에 딱 한 번만 설치하면 되지만, 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 깃허브에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방하여 워크플로우의 최적화를 해보았습니다. 테스트 환경Runner 환경: ubuntu-20.04Node.js 버전: 20.15.0 (.nvmrc 파일 기반)패키지 매니저: Yarn캐싱 대상: node_modules의존성 파일: yarn.lock 해당 레포에는 `.github/workflows` 폴더 안에 `deploy-dev/release/production.yml` (환경별로 각각의 3개의 파일이 존재) 이 있는데요. PR 을 생성.. 더보기 Vuex -> Pinia migration + 로그인 상태 유지 및 authStore https://pinia.vuejs.org/cookbook/migration-vuex.html Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepinia.vuejs.org Vue 2버전대 레포를 Vue3 로 버전업을 하였는데요.상태관리라이브러리 역시도 Vue3 와 호환성이 좋은 Pinia 로 마이그레이션을 할려고 합니다. (vue공식 홈에서도 Pinia 사용을 권장하기도 함)Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 공식 라이브러리로, Vue 2와 함께 널리 사용되었습니다. 그러나 Vue 3가 출시되면서 새로운 상태 관리 라이브러리인 Pinia가 등장했습니다. Pinia는 .. 더보기 Vue3 + vite 에 Typescript 적용하기 vue2 프로젝트에서 vite 로 바꾸고, vue3 로 마이그레이션 까지 한 상태에서 typescript를 적용하기 위한 그 과정들을 적어봤습니다.보통 vue 프로젝트 생성 시 초기 설정에서 ts 를 선택할 수 있어서 큰 어려움이 없을겁니다.기본 베이스가 js 인 프로젝트에서 ts 를 설치하여 js와 함께 통합하여 쓸 수 있게 설정하기 위해 공식홈페이지, 블로그 등을 찾아보며 공부해봤습니다. 🁢 Typescript install & 컴파일 설정npm install typescriptyarn add typescript package.json 에 설치된 모습 npm install --save @types/nodeyarn add @types/node package.json 에 설치된 모습 npm .. 더보기 GitHub Actions를 이용한 ChatGPT 기반 자동 코드 리뷰 기능 추가하기 팀원들이 다들 바쁘거나, 코드리뷰를 제대로 해줄 시간이 부족할 때 기능 리뷰만 확인 할 때가 많습니다 코드의 품질과 원활한 코드리뷰를 위해 AI 의 도움을 받으면 좋을 것 같아서 도입을 해봤는데요! Github Action 을 이용해서 PR을 등록하면 ChatGPT 가 코드 리뷰를 해줍니다. 아래 레포를 통해 도움을 받았습니다.https://github.com/anc95/ChatGPT-CodeReview?tab=readme-ov-file#self-hosting GitHub - anc95/ChatGPT-CodeReview: 🐥 A code review bot powered by ChatGPT🐥 A code review bot powered by ChatGPT. Contribute to anc95/Cha.. 더보기 크롬 브라우저 비밀번호 자동 완성, 이렇게 하면 완벽 차단 (feat. formkit) Vue3 호환 가능한 Form 라이브러리인 "formkit" 을 사용중입니다.팀원 중 한분이 발견해주신 이슈인데, 폼 등록 모달창을 열었을 때 input에 자동으로 문자가 들어간다고 말씀해주셨습니다.해당 이슈가 모든 사용자에게 나타나는 이슈가 아니였고, 왜인지... 저에게는 재현이 되지 않아서 원인을 추적하기가 힘들었습니다. 처음엔, 페이지 로드시 input 에 초기화를 해줘야 하는 문제인가 라고 생각을 해서 코드를 추가하고, 로컬 서버로 실행하여 이슈가 났던 분의 컴퓨터로 확인을 해봤는데 확인이 안되었습니다.이건 코드 문제가 아니라 컴퓨터 의 환경에 따라 [os 버전, 브라우저 …등 ] 또는 브라우저 캐시 문제 라고 생각이 들었습니다 그래서 이슈가 났던 분의 계정으로 로그인해봤습니다.제 컴퓨터에서 모달.. 더보기 [Vue.js] Vue3 환경에서 Storybook 설치 및 Pagination 공통 컴포넌트 적용기 어느 날, 새로운 기획 요구사항을 받았습니다. "페이지네이션 디자인을 변경해야 합니다."일반적으로는 디자인 요구사항에 따라 기존 컴포넌트를 수정하거나 새로 제작하면 됩니다. 하지만 이번에는 단순히 디자인을 바꾸는 데 그치지 않고, 디자인 시스템을 도입해보면 좋겠다고 생각했습니다. 왜 디자인 시스템인가?페이지네이션 같은 공통 컴포넌트는 서비스 전반에서 자주 사용되므로, 디자인 변경 시 전체적인 일관성을 유지하는 것이 중요합니다.여러 개발자가 함께 작업할 때, 컴포넌트가 표준화되어 있지 않으면 유지보수성이 떨어지기 때문에 효율적인 협업 환경이 필요했습니다.Storybook을 활용하면 UI를 독립적으로 테스트하고 문서화할 수 있어 개발 및 디자인 협업이 수월해진다는 점에서 매력을 느꼈습니다. 왜 이 작업을 .. 더보기 [Vue.js] Vue2 탈출기: Vue3 마이그레이션 가이드 이전 글에 이어서 Vue2.7 upgrade + Vite 적용 Vue3로 성공적으로 업그레이드 했습니다..! Vue2 에서 Vue3로 업그레이드하는 거는 금방이지만, 그에 맞춰 종속된 라이브러리들을 Vue3에 맞게 리팩토링하는게 더 오래 걸린 것 같아요.하면서 중간중간 기획개발도 같이 진행하고, QA도 진행하면서 수정개발하니 커밋 기록상 진행 일자는 아래와 같습니다. 🗓️ 처음 시작일 : 2024년 9월 3일 🗓️ 마지막 QA 수정 개발 완료 : 2024년 10월 4일실 md 는 대략 2주정도? 인 것 같네요 이제 앞으로 장기적인 리팩토링을 진행해야 합니다. 틈틈히 진행해야 할 것 같아요 vue3 로 가면서 맞춰가야할 사항 (장기적인 목표)▫️Composition API + SFC 구조 [scri.. 더보기 [네트워크] 쿠키(Cookie)와 세션(Session) 쿠키 (Cookie)쿠키는 클라이언트(로컬) 에 저장되는 키와 값이 들어있는 작은 데이터 파일이에요. 이러한 쿠키는 클라이언트에 저장되어 필요시 정보를 참조하거나 재사용할 수 있어요. 보통 웹 환경에서는 클라이언트와 서버가 HTTP 프로토콜을 이용해 통신을 하는데요, 하지만 HTTP 프로토콜은 아래와 같은 특징들을 지니기 때문에 쿠키를 사용합니다. 1. Connectionless [비연결성] HTTP 는 TCP 연결을 맺고 요청(Request) 을 보내면 서버는 응답 (Response) 을 보내고 연결이 끊어집니다.물론 HTTP 1.1 버전은 커넥션을 계속 유지하는 keep-alive 옵션이 디폴트이긴 해요. 하지만, HTTP 1.0 버전은 기본적으로 connectionles.. 더보기 [DataStructure] 시간복잡도와 공간복잡도 시간복잡도와 공간복잡도효율적인 알고리즘을 작성하기 위해서 시간복잡도 와 공간복잡도 이 두가지 요소를 놓고 평가하는데, 특별히 시간 복잡도를 중요시해요. 그 이유는 요즘의 컴퓨터는 메모리가 과거에 비해 용량이 커져서, 시간 복잡도를 더 중요하게 본다고 해요.그렇다고 쓸데없는 메모리 선언을 통해 굳이 긁어서 부스럼을 만들 필요는 없겠죠, 동시에 메모리의 가격이 낮아지고, 모던 프로그래밍 언어에서는 메모리를 관리해주는 많은 옵티마이제이션이 들어가서 상대적으로 덜 중시될 수 있죠. 동시에, 시간 복잡도와 공간 복잡도는 반비례하는 경향이 있다고 합니다. 알고리즘 효율에서 가장 중요한 부분은 "n이 커질 때 알고리즘의 단계가 얼마만큼 증가하는가" 이고, 이것을 잘 타나내는 빅O표기법을 사용해요. 소규모 데이터를 다.. 더보기 [Vue.js] Vue2 프로젝트, Webpack에서 Vite로 마이그레이션하기! 현업에서 몇개의 레포들이 Vue2를 사용하고 있는데요. 올해의 목표에서 하나의 레포를 Vue2 → Vue3 로 마이그레이션을 하는 것으로 잡았습니다.Vue2 프로젝트를 진행하면서, 기존의 Webpack 빌드 도구가 무겁고 느리게 느껴지기 시작했습니다. 특히, 대규모 프로젝트에서는 빌드 시간이 길어지고, 개발 서버의 반응 속도가 떨어지는 문제가 발생했습니다.이러한 문제를 해결하기 위해 저는 Vite로의 마이그레이션을 고려하게 되었는데요! Vite는 빠른 개발 서버와 즉각적인 모듈 핫 리로딩을 제공하여 개발 생산성을 크게 향상시킬 수 있는 도구입니다. 또한, Vite는 최신 브라우저의 네이티브 ES 모듈을 활용하여 빌드 속도를 극대화하고, 번들링 과정에서의 불필요한 오버헤드를 줄여줍니다. 이전 회사에서 Vi.. 더보기 이전 1 2 3 4 ··· 10 다음
