yooputer's devlog

내가 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/HTML&CSS 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

오늘은 /projects로 접속했을 때 노션 데이터베이스에 있는 프로젝트 목록을 조회해서화면에 보여주도록 구현하는 과정을 정리해보려고 한다. Notion Database 프로퍼티 추가우선 노션에 Database를 생성한 후 아래와 같이 프로퍼티들을 추가한다. category는 select 타입, description과 slug는 text 타입, order는 number타입, skills는 multi-select 타입이다. 그리고 해당 데이터베이스의 ID를 조회하여 .env에 다음과같이 추가한다. NOTION_PROJECT_DATABASE_ID=DB아이디 데이터베이스 ID는 데이터베이스의 링크를 복사하여 조회할 수 있다. https://www.notion.so/?v=&source=copy_link데이터..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 11. 16:54

이번 포스팅에서는 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

최근에 아래 강의를 들으며 Clerk이라는 사용자 인증 솔루션을 알게되었다. Next.js 15로 완성하는 실전 YouTube 클론 개발 강의 | antonio - 인프런antonio | , [사진]클론코딩, 실전 개발을 익히는 최적의 학습법!클론코딩은 실제 서비스의 구조와 흐름을 몸으로 익히는 가장 빠른 방법이에요. 단순한 예제가 아닌, 우리가 잘 아는 실제 앱을 구www.inflearn.com 이 솔루션을 사용하면 10분 안에 로그인 및 회원가입 기능을 구현할 수 있다. 실무에서 활용할 수 있을지 모르겠지만(돈이 드니까)사이드프로젝트에서는 복잡한 로그인 및 회원가입 구현 없이 간편하게 소셜로그인을 적용할 수 있을 것 같아Clerk을 사용하여 로그인 및 회원가입을 적용하는 방법을 정리해보려 한다. N..

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

이번 포스팅에서는 마크다운 내용에서 목차를 추출한 후 해당 목차로 이동할 수 있는 네비게이션을 구현해보려 한다. 지난 포스팅 AboutMe] 마크다운 화면에 뿌리기, word highlighting 적용 | MDXRemote, Tailwind" data-og-description="이번 포스팅에서는 저번 포스팅에서 구현한 getAboutMeContent 함수를 사용하여노션페이지에서 조회한 마크다운을 화면에 뿌리는 과정에 대해 정리해보려 한다. 지난 포스팅 AboutMe] 노션 페이지 내" data-og-host="yooputer-devlog.tistory.com" data-og-source-url="https://yooputer-devlog.tistory.com/319" data-og-url="http..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 9. 16:42