yooputer's devlog

최근에 OpenAI API를 사용해보게 되었는데, 앞으로 진행하게될 프로젝트에 굉장히 유용하게 사용할 수 있을 거 같아 NextJS에서 OpenAI API를 연동하고 활용하여간단한 문장요약 사이트를 만드는 과정에 대해 기록해보고자 한다. Setup NextJS 프로젝트 생성우선 아래와같이 NextJS 프로젝트를 생성하였다. npx create-next-app@latest text-summary-demo npm install아래와 같이 이후 개발에 필요한 라이브러리를 설치한다. npm install openainpm install react-query@latest --legacy-peer-depsnpx shadcn@latest add buttonnpx shadcn@latest add formnpx shad..

Development Study/AI 개발 활용기 2025. 7. 3. 16:23

최근에 듣고있는 강의에서 무한 스크롤에 대해 배웠는데, 코드가 너무 쌈뽕해서 별도의 포스팅으로 기록하고 싶었다. Next.js 15로 완성하는 실전 YouTube 클론 개발 강의 | antonio - 인프런antonio | 이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용,www.inflearn.com 강의에서는 tRPC 기반 API를 사용하여 trpc의 useSuspenseInfiniteQuery를 사용하였는데대부분의 프로젝트는 rest api를 사용하기 때문에 이번 포스팅에서는 rest api와 useInfiniteQuery을 사용하여 무한스크롤을 ..

Development Study/프론트엔드 2025. 6. 25. 16:58

요즘 React.js와 Next.js를 공부하고 있다. 이번에 무한 스크롤에 대해 배우게 되었는데, 간단한 demo 프로젝트를 만들어서 복습해보려 했다. 이때 목록을 조회하는 api가 필요했는데, 내가 실무에서 주로 사용하는 기술인 SpringBoot로 빠르게 만들 수 있었다. 근데 이번에는 인공지능을 사용해 api를 만들어보고 싶어IntelliJ에 Claude를 붙여 프롬프팅으로만 api 서버를 구현해보았다. Java/SpringBoot/Jpa/PostgreSQL 환경에서 Claude에 IntelliJ를 연결해 api 서버를 구현한 과정을 정리해보려 한다. Project SetupDB 생성학습을 위한 간단한 토이프로젝트이기 때문에 로컬에서 도커로 PostgreSQL 컨테이너를 실행시켜 DB 서버를 구..

Development Study/AI 개발 활용기 2025. 6. 25. 13:33

최근에 개발자가 된지 만 2년이 되어 경력기술서를 업데이트하게 되었다. 근데 작성하다보니 성과에 대한 정량적인 데이터가 매우 부족하다는 것을 깨달았다. 여태까지 성능을 측정하고 개선하는 것이 아닌 그저 기능 구현에 초점을 맞춰왔던 것이다. 개발자로서의 가치를 높이기 위해서는 그저 기능 구현만 하는 것이 아닌, 내가 만든 기능을 어떻게 안정적이고 빠르게 동작할 수 있도록 만들 수 있는지에 대해 고민하여야 한다. 그리고 이러한 고민은 정량적인 수치를 바탕으로 이루어져야 한다. 그래서 이번 포스팅에서는 백엔드 개발자로서 어떤 것에 집중하여야 하고어떻게 백엔드 서버의 성능을 측정할 수 있는가에 대해 정리해보려 한다. 백엔드 서버의 주요 목표백엔드 서버는 클라이언트의 요청에 따라 비즈니스 로직을 처리하고보이지..

Development Study/대용량 트래픽 처리 2025. 6. 23. 15:20

최근에 간단한 프로젝트를 진행하면서 페이지가 하나인 NextJS 서버를 배포하게 되었다. NextJS 서버 이외에도 ExpressJS 서버와 DB서버도 배포해야했으므로 도커 허브에 이미지를 업로드한 후 원격서버에서 풀 받아서 docker-compose를 실행시키기로 했다. 근데 push가 너무 느렸다! 한시간정도? 그래서 확인해보니 NextJS의 이미지 크기가 무려 1.08GB였다. 멀티스테이징 방식으로 이미지를 생성하면 크기가 좀 줄어들겠지 했는데여전히 1GB였다. 그래서 NextJS 이미지 경량화에 대해 찾아본 후 standalone라는 빌드 옵션을 이용하여 이미지를 경량화하는 방법을 알게 되었다. 그래서 이번 포스팅에서는 이 방법을 적용하는 방법에 대해 정리해보려 한다. standalone 이..

Development Study/도커 2025. 6. 23. 11:15

내가 Next.js를 사용하게 된 계기는 상당히 단순했는데, 포트폴리오 사이트를 만들어서 배포하고 싶은데 돈을 들여서 배포하고 싶지는 않았다. 그래서 무료로 배포할 수 있는 서비스를 찾아보다가vercel이라는 서비스를 알게 되었는데,vercel이 Next.js 개발자들이 만들어서 Next.js에 특화되어 있었다. 그래서 Next.js를 처음으로 사용해보게 되었다. Next.js를 사용하다보니 굉장히 흥미로운 기술이라는 생각이 들어이번 기회에 Next.js에 대해 정리해보려고 한다. React.js의 한계Next.js를 설명하기 전, React.js에 대한 설명을 안하고 넘어갈 수 없다. Next.js는 React.js의 한계를 보안하기 위해 나온 기술이기 때문이다. 리액트는 현재 가장 인기있는 프론..

Development Study/프론트엔드 2025. 6. 20. 15:18

이번 포스팅에서는 NextJS에 tRPC를 적용한 후서버 컴포넌트의 장점과 클라이언트 컴포넌트의 장점을 모두 지닌 하이브리드 컴포넌트를 구현하는 과정에 대해 정리해보려 한다. tRPC란?우선 구현에 앞서 tRPC가 무엇인지에 대해 알아보자. 지난 포스팅에서 RPC에 대해 설명하였으니, RPC에 대한 설명은 아래 포스팅을 참고해주길 바란다. REST가 만연한 세상에서 RPC를 외치다 | RPC란?, REST vs RPCRPC란? RPC는 Remote Procedure Call의 약자로 원격 프로시저 호출이라는 뜻이다. 말 그대로 원격 서버의 프로시저를 호출하기 위한 방법이다. 예를 들어 내가 유튜브에서 영상을 본다면 아마 대략적으yooputer-devlog.tistory.com 자 RPC와 tRPC의 차..

Development Study/잡기술 2025. 6. 13. 14:23

RPC란? RPC는 Remote Procedure Call의 약자로 원격 프로시저 호출이라는 뜻이다. 말 그대로 원격 서버의 프로시저를 호출하기 위한 방법이다. 예를 들어 내가 유튜브에서 영상을 본다면 아마 대략적으로 다음과 같은 과정을 거칠 것이다. 이때 유튜브 앱과 유튜브 서버가 통신하기 위해 사용할 수 있는 기술이 RPC이다. REST와의 비교위의 예제에서 유튜브 앱을 클라이언트, 유튜브 서버를 서버라고 부른다. 클라이언트와 서버가 통신하기 위한 방법에는 REST라는 방법도 존재한다. REST는 Representational State Transfer의 약자로 상태가 없는 통신이라는 뜻이다. REST 기반 통신에서는 내가 얻고자하는 자원의 위치를 나타내는 URL과 HTTP 메서드를 통해 원격서..

Development Study/잡기술 2025. 6. 13. 11:14