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 최적화 전 제가 개선하고자 하는 페이지는 딜리버블의 홈 페이지입니다. 홈의 상단에는 다음..
캐싱, Cache-Control 알아보기 🥹
2023. 2. 1. 00:23
프로그래밍/Next
이 글은 캐싱에 대해 공부한 것 정리 + 삽질 기록입니다.. 정확하지 않을 수 있습니다. 얼마 전에 성능 최적화와 관련해서 cache-control이라는 것에 대해 알게 되었다. 이것을 이용하면 한 번 요청했던 리소스를 다시 요청할 필요가 없으니 프로젝트의 성능 개선에 도움이 될 것 같았다. 일단 프로젝트에 적용하기 전에 캐시가 무엇인지 공부하는 시간을 가졌다. HTTP 캐시 HTTP 캐시는 리소스에 대한 특정 요청의 응답을 저장하고, 이를 재사용하는 것을 이야기한다. 따라서 이후에 동일한 요청이 발생했을 때 서버에 직접 요청을 보낼 필요 없이 캐시 된 응답을 반환하면 되므로 클라이언트 입장에서는 응답을 빠르게 받을 수 있고, 서버 입장에서는 트래픽을 줄일 수 있다는 이점이 있다. (성능 측면에서 효율적..
[Next] Dynamic Routes / Router Hook / Catch All
2022. 7. 8. 17:52
프로그래밍/Next
1. Dynamic Routes NextJS는 폴더와 파일명을 이용해 라우팅을 할 수 있다. /movies/all이라는 URL을 만들고 싶다면 movies 폴더를 만들고 그 안에 all.js 파일을 생성하면 된다. 그냥 /movies라고만 하고 싶다면 movies 폴더 안에 index.js 파일을 만들어주면 된다. URL에 변수를 넣고 싶을 때는 대괄호 안에 사용하고자 하는 변수명을 적어서 Dynamic Route를 생성할 수 있다. 만일 page/movies/[id].js 파일을 생성했다면 /movies/1, /movies/abc 등과 같은 경로와 모두 일치한다. router를 콘솔에 찍어보면 query를 찾을 수 있다. query: {id: '1'} query에는 id가 있는데 이 id는 바로 URL..
[Next] Patterns / Fetching Data / Redirect & Rewrite / SSR
2022. 7. 8. 17:50
프로그래밍/Next
1. Patterns Custom App Component를 사용할 때 layout 패턴을 사용할 수 있다. component 폴더 밑에 Layout.js 파일을 만든다. Layout 컴포넌트에는 여러 페이지에서 반복적으로 사용되는 컴포넌트들을 넣을 수 있고, 스타일도 줄 수 있다. children은 리액트가 제공하는 prop으로 하나의 컴포넌트를 또 다른 컴포넌트 안에 넣을 때 사용할 수 있다. import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } MyApp에서 fragment를 우리의 Layout component로 바꾼다. Layout에 어떤 것을 넣더라도, Layout..
[Next] CSS Modules / Styled JSX / Custom App
2022. 7. 8. 03:17
프로그래밍/Next
1. CSS Modules 넥스트 어플리케이션에 CSS를 추가하는 방법 중 하나는 modules를 사용하는 것이다. NavBar.module.css .nav { text-decoration: none; } 이름은 상관 없고 중요한 건 .module.css이다. css를 작성하고 이 파일을 사용하고 싶은 곳에 자바스크립트 오브젝트로서 import를 시키면 된다. import styles from "./NavBar.module.css" 모듈이기 때문에 className="nav"가 아니라 className={styles.nav}처럼 작성해줘야 한다. 이게 작동하는 이유는 .module.css 패턴을 사용했기 때문이다. 이 패턴은 css 모듈이라고 불리는데 이건 개발자로 하여금 평범한 css를 사용할 수 있도..
[Next] Framework / Pages / Pre-Rendering / Routing
2022. 7. 8. 01:46
프로그래밍/Next
1. Creating a Project NextJS 프로젝트 최신 버전으로 생성 → npx create-next-app@latest 타입스크립트 사용 → npx create-next-app@latest --typescript 실행 → npm run dev 2. Library vs Framework 라이브러리는 개발자가 사용하고 싶을 때 불러와서 원하는 대로 코드를 작성하는 것이 가능하다. 리액트는 개발자가 원할 때 부르고 원할 때 사용하는 라이브러리이다. 프레임워크에서는 특정한 규칙을 따라서 특정한 걸 해야한다. 규칙을 따랐을 때 모든 게 정상적으로 잘 동작하고 프레임워크도 개발자를 도울 수 있다. 개발자가 규칙을 따라서 코드를 적절한 위치에 잘 작성하면 프레임워크가 그 코드를 호출하여 모든 걸 동작시킨..