yooputer's devlog

요즘 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

내가 만든 웹페이지를 다른 사람들에게 보여주고 싶을 때가 있다.원래는 AWS나 다른 클라우드 플랫폼에서 내 서버를 배포하여야 하는데,그 정도까진 하고싶지 않은... 뭔지 알죠.., 이럴때는 reverse proxy 서비스를 이용하여 나의 로컬서버에 다른 사람들이 접속하도록 만들 수 있다. 사용자와 서버간의 중개자 역할을 하는 서버를 reverse proxy라고 하는데,나는 reverse proxy를 사용하기 위해 ngrok이라는 솔루션을 사용하려 한다. ngrok은 계정마다 하나의 무료 static 도메인을 제공하기 때문에 별도의 비용없이 진행할 수 있다. What is ngrok? | ngrok documentationWhat is ngrok?ngrok.com ngrok 설치나는 Windows11 ..

Development Study/잡기술 2025. 6. 12. 10:51

이번 포스팅에서는 PostgreSQL DB를 간편하게 생성하고 사용할 수 있도록 도와주는Neon이라는 서비스에 대해 알아보고 NextJS에 연동한 후 간단한 Select 쿼리를 호출해보도록 하겠습니다. Neon이란?Neon은 PostgreSQL의 엔지니어 및 해커들이 만든 서버리스 오픈소스 DB입니다. PostgreSQL을 사랑하는 사람들이 만들어서 그런가, 공식문서에 Postgres에 대한 애정이 잔뜩 묻어있는 것을 볼 수 있습니다. Neon의 핵심 키워드 3가지를 뽑아보자면 다음과 같습니다. Cloud, Serverless, Modern Neon은 클라우드 환경을 위해서 만들어졌습니다. 그래서 Cloud 환경에 특화되어 있습니다.Serverless 형식으로 동작합니다. 즉, 사용하지 않으면 대기상태..

Development Study/잡기술 2025. 6. 11. 11:15