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 캐시는 리소스에 대한 특정 요청의 응답을 저장하고, 이를 재사용하는 것을 이야기한다. 따라서 이후에 동일한 요청이 발생했을 때 서버에 직접 요청을 보낼 필요 없이 캐시 된 응답을 반환하면 되므로 클라이언트 입장에서는 응답을 빠르게 받을 수 있고, 서버 입장에서는 트래픽을 줄일 수 있다는 이점이 있다. (성능 측면에서 효율적..
[React] Github API를 이용하여 자동 팔로우 기능 만들기
2022. 10. 22. 20:25
프로그래밍/React
🔧 삽질 기록입니다. 🔨 프로그래머스 데브코스 프론트엔드 3기에 합류하고 벌써 일주일이 지났네요. 깃허브에서 3기 분들 35명을 일일이 팔로우하다가 한 번에 팔로우 해주는 프로그램을 한 번 만들어봐야 겠다는 생각이 들었습니다. 아래는 완성본입니다. 깃허브 API 깃허브 REST API 공식 문서입니다. GitHub REST API - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com Users 문서의 user 리스트, user 정보, 팔로워 가져오기 등의 API를 postman으로 확인했습니다. 아래는 user의 정보를 가져오는..
[JS] 자바스크립트 클로저(Closure) 이해하기
2022. 10. 18. 05:07
프로그래밍/JavaScript
프로그래머스 데브코스 프론트엔드 📝 1일차 공부 내용 정리 노션 TIL 작성 후 클로저에 대한 추가적인 공부가 필요한 것 같아 정리하였습니다. 클로저(Closure)란? MDN 문서에 따르면 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합이다. 무슨 말인지 이해가 안 될 것이다. 조금 단순하고 가볍게 이해를 시작해보자. 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있는데 이를 내부 함수라고 한다. function outer() { function inner(){ var title = 'coding everybody'; alert(title); } inner(); } outer(); } 위 코드에서 함수 outer의 내부에는 함수 inner가 정의되어 있다. 함수 i..
[JS] 자바스크립트 실행 컨텍스트(Execution Context)란?
2022. 10. 18. 04:21
프로그래밍/JavaScript
실행 컨텍스트(Execution Context) 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이게 무슨 소리인가 싶을텐데 글을 좀 더 읽어보면 이해할 수 있으니까 뒤로가지 말자. 실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 ..
[Recoil] 리코일 이해하기
2022. 9. 15. 02:07
프로그래밍/React
Recoil 리코일은 리액트에서 사용할 수 있는 전역 상태 관리 라이브러리이다. 여기서 전역 상태(global state)란 어플리케이션 전체에서 공유되는 state를 의미한다. 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 리코일의 필요성은 위의 공식 문서에서 확인할 수 있다. 간단하게 props drilling으로 인한 불필요한 리렌더링 발생을 방지하고 유지보수의 어려움을 해결하기 위함으로 이해했다. Recoil은 다음 명령어로 설치할 수 있다. npm install recoil Atoms atom(options) | Recoil atom은 Recoil의 상태를 표현한..