본문 바로가기

IT36

웹성능 최적화! 구글 라이트하우스를 활용한 웹사이트 진단 및 개선 방법 안녕하세요! aloveu입니다. 블로그를 운영하든 웹사이트를 운영하든 SEO가 중요하다는 건 모두 아실 텐데요. 이 SEO에 중요한 영향을 미치는 웹성능에 대해서 구글에서 제공하는 lighthouse라는 성능체크툴을 이용해 알아보려고 합니다. 라이트 하우스 말고 다른 페이지 성능 결과를 보여주는 사이트는 https://pagespeed.web.dev/?hl=ko 도 있어요. | Lighthouse 실행하기 크롬에서 웹사이트를 들어간 다음에 F12를 눌러봅니다. 그러면 devtools가 뜨는데 여기 상단탭에 보면 lighthouse라는 탭이 있을 겁니다. Navigation (Default)를 선택하고 진단할 Device와 categories를 선택한 후에 Analyze page load 버튼을 눌러보면 .. 2024. 2. 5.

IntelliJ Test Case Setting 안녕하세요! aloveu입니다. 오늘은 Vue에서 단위테스트 하실 때 편하게 사용하실 수 있는 IDE 세팅에 대해서 알아보겠습니다. Vue에서 단위테스트를 하려면 vue-cli에서 제공해 주는 jest를 쓰면 되는데 기존 설치된 vue-cli에서 jest를 추가하려면 터미널에서 아래와 같은 명령어로 추가해 줍니다. > vue.cmd add unit-jest 테스트 케이스 작성법은 jest docs(https://jestjs.io/docs/getting-started)를 참고하시면 되고요. 여기에서는 세팅을 어떻게 하는지만 알아보겠습니다. | Pinia 테스트 작성법 그전에 상태관리 라이브러리로 Pinia를 쓰고 계시는 분들을 위해 추가하자면 Pinia는 따로 테스트 모듈을 추가해줘야 합니다. npm i .. 2024. 1. 25.

Vue3의 상태관리자로 Pinia를 사용해 봅시다. 안녕하세요! aloveu입니다. 오늘은 vue의 상태관리자로 pinia를 사용하는 걸 적어볼게요. 보통 vue2까지는 vuex를 많이 사용했을 텐데 vue3로 올라온 이상 pinia를 고려해 보심이 좋을 거 같아요. 그럼 각 상태관리툴로써 비교를 해보겠습니다. | VUEX vuex는 기존 vue에서는 유일하게 상태관리 툴로 사용되고 있는 공식 지원 상태관리자였습니다. 단점으로는 모듈 분리, typescript 등 설정하는데 시간이 많이 걸리는 게 있어요. 하나의 상태(state)를 가져다 쓰고 업데이트하는데 state, getter, action, mutation이라는 각 타입별로 모듈 분리하고 typescript 적용하는 게 번거롭습니다. typescript를 사용하신다면 vuex는 완벽하게 지원을 하.. 2024. 1. 15.

Service Worker 적용해 보기 서비스워커는 기본 브라우저 스레드와 별도로 실행되어 네트워크 요청을 가로채거나 리소스를 캐싱하거나 푸시 메시지를 전송하는 js 파일로 되어있는 하나의 워커입니다. 보통 서비스워커는 앱과 서버 간의 프락시 역할을 하고 메인 스레드에서 오는 모든 네트워크 요청이 여기를 통과합니다. 따라서 캐시 된 데이터들이 있을 경우 네트워크 요청을 중지하거나 수정하거나 하는 권한을 가집니다. 물론 캐시를 쓸 수 있도록 등록을 해야 합니다. 등록과정은 아래 서비스워커 등록하는 방법을 알려드릴 때 캐시 부분도 같이 기술하겠습니다. | Service Worker 적용하기 LifeCycle 서비스 워커의 라이프 사이클은 아래처럼 동작을 하고 이건 등록하는 과정을 설명하는 과정에서 다시 한번 언급하겠습니다. 서비스워커 등록 보통 .. 2024. 1. 13.

Mocking 서비스 도입하기 (msw) 안녕하세요! aloveu입니다. 프로젝트를 진행할 때 기획도 나오고 api 명세도 나왔는데 백앤드 api 개발이 완성될 때까지 기다리고 계시나요? 아니면 비즈니스 로직 안에 받을 데이터를 모두 넣어 소스가 지저분 해지나요? 오늘은 그냥 api 통신을 하고 데이터만 내가 설정한 데이터를 받아 볼 수 있게 하는 msw라는 라이브러리를 알아보겠습니다. | 설치 > npm i msw > npx msw init public/ --save 프로젝트 루트에서 설치하면 public 폴더 및에 mockServiceWorker.js 파일이 생성되는데 이 서비스워커를 우리 프로젝트에 등록을 해줘야 합니다. 그게 두 번째 줄에 있는 명령어인데 msw에서 제공하는 init 명령어로 따로 설정할 필요 없이 바로 등록이 가능합니다.. 2024. 1. 11.

IDE - intelliJ의 알아 두면 좋은 기능들 오늘은 제가 사용하는 유료 IDE(Phpstorm, IntelliJ)에 대해서 적어볼까 합니다. 사실 이 글은 예전에 깃블로그에 썼던 내용인데 거긴 폐쇄하고 옮겨온 거예요. 2017년부터 사용하고 있는 중이고 지금도 사용하고 있는 너무 편한 기능들을 정리해 봤습니다. 그동안 써봤던 IDE는 많았지만 유료는 유료값을 한다라고 느껴요. 물론, 유료라서 회사에서 라이선스 결제한 거 아니면 개인적으로 쓰기는 부담스럽죠. (개인용은 $89 정도 됩니다.) 각설하고, 기능을 한번 살펴보겠습니다. | 자주 사용하는 단축키 기본 설정 키로 쓰는 경우도 있고 제가 커스텀한 것도 있어서 Setting > Keymap에서 보시고 쓰시면 됩니다. commit : Ctrl + K push : Ctrl + Shift + K up.. 2024. 1. 11.

ChatGPT:Bing Chat (Copilot) 알아보기 안녕하세요! aloveu입니다. 근래 챗 GPT에 관심이 많아서 이것저것 알아보고 있는 중에 Edge 브라우저에 딸려있는 Bing 챗 기능을 많이 쓰게 됐는데요. 우리가 빙챗에 물어볼때 옵션으로 선택하는 대화 스타일이 있는데 그냥 대충 의미만 알고 넘어갔던 대화스타일별 결과를 이번에는 직접 비교해봤어요. 그럼 가보시죠! 기본적으로 메인을 가면 어떻게 우리가 프롬프트를 작성해야 하는지에 대해 예시로 나와있습니다. 한번 읽어 보다 보면 이런 식으로 우리가 ai와 대화를 하면 되는구나 감이 잡힙니다. | 대화 스타일 선택 테스트로 각 대화스타일을 선택해서 같은 질문을 해봤습니다. 먼저 대화 스타일에서 각 스타일 탭을 선택하고 "나뭇잎을 그려줘" 라고 질문을 해봤어요. 보다 창의적인 음.. 창의적인 건가? 보다.. 2024. 1. 7.

ChatGPT-4 무료로 사용하기 안녕하세요! aloveu입니다. GPT-3.5를 사용하다 보면 아쉬운 답변들이 많습니다. 이걸 보완하기 위해 GPT-4를 사용하면 좀 더 명확하고 자세한 답변을 얻을 수 있는데요. GPT-4는 작곡, 시나리오 작성, 사용자 글쓰기 스타일 학습이 가능하고 긴 형식의 콘텐츠 제작에도 용이합니다. 그래서 오늘은 챗 GPT4를 무료로 이용하는 법을 정리해 보겠습니다. | 목차 openai 플레이 그라운드 빙챗 (bing chat) Forefront Chat 뤼튼 아숙업(AskUp) | 무료로 GPT-4를 사용할 수 있는 방법 1. openai 플레이 그라운드 (https://platform.openai.com/playground) 다른 포스팅들을 검색하고 되는지 테스트를 해봤는데 막혔는지 안됩니다. 선택할 수 .. 2024. 1. 4.

초보자를 위한 ChatGPT 이해하기 안녕하세요! aloveu입니다. ChatGPT란 단어 요즘 심심치 않게 들리는데 저도 요즘 관심이 많이 가서 한번 정리해보고자 합니다. 일단 사용해보고 싶다 하시는 분들은 openai.com(https://chat.openai.com/)에서 간단하게 가입하시고 바로 사용하실 수 있습니다. 회원가입 하기 싫고 그냥 바로 한번 써보고 싶으신 분들은 Edge 브라우저로 접속해서 빙 ai(copilot)을 사용해 보시기 바랍니다. 쉽게 설명하자면 내가 하고 싶은 작업들을 프롬프트에 요청만 하면 되는데요. 가령, "귀여운 강아지 그려줘" , "인공지능이란 어떤 거야?"라는 질문을 하시면 대답을 해줍니다. 이 포스팅의 썸네일도 빙에서 만든 거예요. 흥미가 생기지 않나요? 저도 최근에 관심이 많아져서 ChatGPT에.. 2024. 1. 3.

이전 1 2 3 4 다음

티스토리툴바