Open AI 사용해보기 (with Edge Function)
2023. 8. 10. 04:29
프로그래밍/Next
최근에 개인 프로젝트를 하나 진행하면서 Open AI API를 연결했는데 그 과정을 글로 남겨볼까 합니다. gpt-3.5-turbo 모델을 사용했습니다. 프레임워크는 Next.js를 사용했고 버전은 13.4.10, page router를 사용했습니다. 전체 코드는 [Fixpace Repository]에서 확인할 수 있습니다. 서비스가 궁금하신 분들은 여기로 → fixpace.site Open AI API 키 발급 Create new secret key를 이용하여 Open AI API 키를 발급받을 수 있습니다. 저는 키를 받기 위해서 새로운 구글 계정을 하나 만들고 무료 크레딧 $5를 받았습니다. 무료 크레딧은 API 키 최초 발급일로부터 3개월이고, 그 이후에는 만료된다는 것에 유의하세요. API Ro..
[성능 개선] 리액트 렌더링 최적화하기
2023. 5. 19. 02:03
프로그래밍/Next
[딜리버블] ← 해당 프로젝트에 적용한 내용입니다. Profiler를 통해 성능 측정 React Developer Tools의 Profiler로 애플리케이션이 렌더링될 때마다 자동으로 성능 정보를 수집할 수 있습니다. 성능을 측정하고자 하는 부분을 녹화한 후 중지를 누르면 컴포넌트별 렌더링 여부와 렌더링 시간 등을 볼 수 있습니다. Profiler는 커밋별로 성능 정보를 그룹화합니다. 커밋은 프로파일러 상단 근처의 막대형 차트에 표시됩니다. 바의 색상과 높이는 렌더링에 걸린 시간을 의미합니다. 이 도구를 통해서 불필요한 렌더링을 줄이고 최적화를 할 수 있습니다. 동영상 재생시 렌더링 최적화 학습 상세 페이지에서 스크립트의 두 번째 문장 시작 지점까지 동영상을 재생하는 동작을 프로파일링 한 결과입니다. 1..
[성능 개선] Next.js 프로젝트 LCP 최적화하기
2023. 5. 11. 00:51
프로그래밍/Next
[딜리버블] ← 해당 프로젝트에 적용한 내용입니다. LCP(Largest Contentful Paint)란? LCP는 웹의 성능을 측정하기 위한 대표적인 지표 중 하나입니다. 이름 그대로 페이지가 처음 로드를 시작한 시점부터 뷰포트내에 있는 가장 큰 이미지 또는 텍스트 블록이 렌더링 되는 시점까지 걸리는 시간을 의미합니다. 좋은 사용자 경험을 제공하기 위해서는 페이지가 처음으로 로딩된 후 2.5초 이내인 것이 좋다고 합니다. LCP를 측정하는 방법은 여러가지가 있지만 저는 크롬 브라우저 내 개발자 도구에서 사용할 수 있는 라이트 하우스라는 퍼포먼스 측정 도구를 사용하였습니다. (크롬 확장 프로그램 설치 필요) LCP 최적화 전 제가 개선하고자 하는 페이지는 딜리버블의 홈 페이지입니다. 홈의 상단에는 다음..
[React Query] 리액트 쿼리 '잘' 사용해보자 - 네트워크 비용 감소 / UX 개선
2023. 5. 9. 17:20
프로그래밍/React
*TanStack Query v4 기준으로 작성된 글입니다. 리액트 쿼리에서 제공하는 옵션과 적절한 메서드를 활용하여 불필요한 API 호출을 없애 네트워크 비용을 줄이고 사용자 경험을 개선시켜 봅시다. [딜리버블] ← 해당 프로젝트에 적용한 내용입니다. 정적 데이터에 staleTime 적용하기 리액트 쿼리의 useQuery의 옵션에는 staleTime이 존재합니다. 이전 게시글에서도 언급한 내용이지만 staleTime은 얼마의 시간이 흐른 뒤에 데이터를 stale(:신선하지 않은)하다고 취급할 것인지를 지정하는 옵션입니다. 기본값이 0이기 때문에 별도로 값을 지정하지 않으면 데이터는 받아오자마자 fresh 상태에서 stale 상태가 됩니다. 캐싱된 데이터가 stale한 상태가 되면 리액트 쿼리는 다음 조..
[React Query] 리액트 쿼리를 왜 사용할까? - 서버 상태 분리
2023. 4. 27. 20:31
프로그래밍/React
리액트 쿼리를 사용하는 이유는 무엇일까? 여러가지 장점이 있지만 서버의 상태와 클라이언트의 상태를 명확하게 분리할 수 있다는 것만으로도 리액트 쿼리를 사용하는 것이 충분히 의미있다는 결론을 내렸다. 서버 상태와 클라이언트의 상태를 분리함으로써 얻을 수 있는 이점 - 특성이 다른 서버 상태와 클라이언트 상태를 분리하여 관리함으로써 상태 관리 효율성 향상 - 코드 간결, 유지보수성 향상 - 신뢰할 수 있는 서버 데이터 (최신 데이터) 2018년 미국에서 GraphQL과 Apollo Client가 인기를 끌었을 때, "Redux는 이제 끝인가요?"라는 질문이 많았다고 한다. 일부 데이터를 가져오는 라이브러리가 전역 상태 관리 라이브러리를 대체한다는 게 무슨 소리일까? Apollo는 원하는 데이터를 정의하고 가..
캐싱, Cache-Control 알아보기 🥹
2023. 2. 1. 00:23
프로그래밍/Next
이 글은 캐싱에 대해 공부한 것 정리 + 삽질 기록입니다.. 정확하지 않을 수 있습니다. 얼마 전에 성능 최적화와 관련해서 cache-control이라는 것에 대해 알게 되었다. 이것을 이용하면 한 번 요청했던 리소스를 다시 요청할 필요가 없으니 프로젝트의 성능 개선에 도움이 될 것 같았다. 일단 프로젝트에 적용하기 전에 캐시가 무엇인지 공부하는 시간을 가졌다. HTTP 캐시 HTTP 캐시는 리소스에 대한 특정 요청의 응답을 저장하고, 이를 재사용하는 것을 이야기한다. 따라서 이후에 동일한 요청이 발생했을 때 서버에 직접 요청을 보낼 필요 없이 캐시 된 응답을 반환하면 되므로 클라이언트 입장에서는 응답을 빠르게 받을 수 있고, 서버 입장에서는 트래픽을 줄일 수 있다는 이점이 있다. (성능 측면에서 효율적..
[Day 40] Netlify Serverless Functions, 환경변수
2022. 12. 15. 17:15
데브코스
Netlify Serverless Functions 보안을 위해 API_KEY와 같은 민감한 정보들이 노출되지 않도록 서버리스 함수를 적용해보자. Netllify 서버를 통해 배포를 하지 않고도 배포 결과를 확인할 수 있도록 명령(script)를 등록한다. // package.json "scripts": { "dev": "webpack-dev-server --mode development", "dev:netlify": "netlify dev", "build": "webpack --mode production" }, 해당 명령을 사용하려면 Netlify CLI를 설치해야 한다. npm i -D netlify-cli Get started with Netlify CLI Install our CLI (comma..
[Day 38] Vue Router, Babel, PostCSS
2022. 12. 11. 18:54
데브코스
Vue Router 기초 Vue Router를 이용해서 SPA를 만드는 것은 매우 쉽다. 다음 명령어를 통해 vue router를 설치한다. npm i vue-router@next // main.js import { createApp } from 'vue' import App from '~/App' import router from '~/routes' const app = createApp(App) app.use(router) app.mount('#app') 라우터를 구성해서 플러그인으로 연결하면 $route와 $router 객체를 접근해서 사용할 수 있다. $route 객체는 현재 그 라우트 객체가 사용되는 컴포넌트의 페이지에 대한 정보를 가지고 있다. $router 객체는 페이지에 대한 조작을 할 수..
[Day 37-2] Provide/Inject, Vuex(Store)
2022. 12. 10. 21:25
데브코스
Provide / Inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달할 때 props를 사용한다. 만일 조상 요소에서 후손 요소로 데이터를 전달할 때 props로 일일이 전달한다면 굉장히 복잡해질 것이다. 이럴 때 사용할 수 있는 것이 provide와 inject이다. 부모 컴포넌트는 데이터 제공을 위해 provide(제공)옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject(주입) 옵션을 사용한다. Child {{ msg }} 하지만 provide와 inject를 사용해서 전달된 데이터는 반응형 데이터가 아니다. 반응형 작업 상위 컴포넌트의 변경사항에 반응하게 하려면 computed 함수를 사용한다. Child {{ msg.value }} computed 함수를 사용하게 되면 계산된..
[Day 37-1] Slots, Refs, Plugin, Mixin, Teleport
2022. 12. 10. 18:41
데브코스
컴포넌트 Slots 컴포넌트 태그 사이에 콘텐츠을 입력하면 slot 태그 위치에 작성된다. 만일 작성된 콘텐츠가 없다면 slot 태그 사이에 작성한 내용이 출력되는데 이를 Fallback 콘텐츠라고 한다. {{ msg }} Hello Vue? Hello 이름을 가지는 슬롯 slot에는 이름을 부여할 수도 있다. 상위 컴포넌트에서 v-slot 디렉티브로 접근이 가능하다. v-slot 디렉티브는 #의 약어를 사용할 수 있다. ABC 범위를 가지는 슬롯 slot은 범위를 가질 수 있다. 범위는 해당 슬롯이 사용되는 구간을 의미한다. Hello {{ slotProps.hello }} Hello {{ hello }} 슬롯의 이름은 동적으로 관리할 수도 있다. 동적 컴포넌트 컴포넌트를 동적으로 전환하는 것은 is라..