분류 전체보기 썸네일형 리스트형 웹페이지 로딩 지연 시 사용자 경험 개선을 위한 Skeleton UI 구현 웹 페이지에 접근할 때, 긴 로딩 시간을 해결할 가장 좋은 방법은 시간을 단축하는 것이지만 그럴 수 없는 경우 디자인적으로 개선 할 수 있습니다.사용자 경험을 개선하기 위한 웹사이트와 애플리케이션에서 가장 일반적인 시스템 피드백 형태 중 하나는 대기 애니메이션 진행 표시기 입니다. Designing for the appearance of speed[참고: 원글] https://juneuprising.medium.com/designing-for-the-appearance-of-speed-aaabc7f568c2 Designing for the Appearance of SpeedInterface design for an impatient worldjuneuprising.medium.com"느린 사이트는 유.. 더보기 google Mediapipe(hand detection) + React.js (feat. AI 수화 번역 실시간 채팅 서비스 [1]) 제 블로그에서 가장 인기 좋은 글은 아래의 'AI 수화번역 프로젝트' 인데요 🙌 [지난 글] https://eonhwa-theme.tistory.com/45 [딥러닝프로젝트_AI수화번역기 ] 최종결과물그동안 이것저것 할게 많아서 프로젝트는 11월에 끝났는데 정리를 못했다. 최종적으로 2021 혁신성장 청년인재 집중 양성 사업 "인공지능 개발자 양성 과정 최종 프로젝트" 에서 부산대표 1등을eonhwa-theme.tistory.com 첫 직장을 가기 전에 했던 프로젝트이니 지금은 4년이 지난 결과물입니다 ...ㅎ하하 그동안 직장생활을 살면서 코드를 볼 겨를이 없었는데요. 사실 웹쪽은 부트스트랩 템플릿으로 빠르게 만들었고 ai 가 더 주였기 때문에 (현재는 프론트엔드 개발자) 더욱 신경을 쓸 시간이 없었.. 더보기 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.09.03 ~ 2024.10.04 (약 1개월)🗓️ 처음 시작일 : 2024년 9월 3일🗓️ 마지막 QA 수정 개발 완료 : 2024년 10월 4일실제 개발 기간 : 약 2주 마이그레이션의 주요 이점Composition API를 통한 더 나은 코드 구성과 재사용.. 더보기 [네트워크] 쿠키(Cookie)와 세션(Session) 쿠키 (Cookie)쿠키는 클라이언트(로컬) 에 저장되는 키와 값이 들어있는 작은 데이터 파일이에요. 이러한 쿠키는 클라이언트에 저장되어 필요시 정보를 참조하거나 재사용할 수 있어요. 보통 웹 환경에서는 클라이언트와 서버가 HTTP 프로토콜을 이용해 통신을 하는데요, 하지만 HTTP 프로토콜은 아래와 같은 특징들을 지니기 때문에 쿠키를 사용합니다. 1. Connectionless [비연결성] HTTP 는 TCP 연결을 맺고 요청(Request) 을 보내면 서버는 응답 (Response) 을 보내고 연결이 끊어집니다.물론 HTTP 1.1 버전은 커넥션을 계속 유지하는 keep-alive 옵션이 디폴트이긴 해요. 하지만, HTTP 1.0 버전은 기본적으로 connectionles.. 더보기 이전 1 2 3 4 ··· 11 다음
