yooputer's devlog

내가 만든 웹페이지를 다른 사람들에게 보여주고 싶을 때가 있다.원래는 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

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

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

지난 포스팅에서는 Notion 공식문서에서 제공하는 Notion API 연동 데모 서버를 실행시켜보았다. Notion API web-form-with-express 데모 실행해보기 | Notion Page에 API 연동Notion 공식문서에 있는 NotionAPI 연동 Demo 프로그램을 실행시켜보자. Notion API OverviewDiscover how to leverage Notion's Public API to build integrations.developers.notion.com 깃허브 레포의 README를 따라 해보도록 하겠다.yooputer-devlog.tistory.com 이번에는 소스코드를 분석해보려 한다. 지난 포스팅과 마찬가지로 web-form-with-express 데모를 살펴..

Development Study/잡기술 2025. 5. 28. 15:01

Notion 공식문서에 있는 NotionAPI 연동 Demo 프로그램을 실행시켜보자. Notion API OverviewDiscover how to leverage Notion's Public API to build integrations.developers.notion.com 여러 데모가 있는데 그중 web-form-with-express 서버를 실행해보려 한다. web-form-with-express의 README를 보고 따라해보겠다. notion-sdk-js/examples/web-form-with-express at main · makenotion/notion-sdk-jsOfficial Notion JavaScript Client. Contribute to makenotion/notion-sdk..

Development Study/잡기술 2025. 5. 27. 15:01

지난 포스팅에서는 HTML이 무엇이고, 웹페이지에서 어떤 역할을 하는지 살펴보았다. 이번 포스팅에서는 HTML을 구성하는 Element와 HTML의 기본 구조에 대해 설명해보려 한다. [HTML] 웹개발자 2년차가 되어서야 정리해보는 HTML이란 무엇인가 | 마크업 언어문득 매일 보는 HTML 코드이지만 HTML에 대해 제대로 공부한 적이 없다는 생각이 들었다. 물론 학교에서도 배웠고, 실무하면서 필요한 정보만 쏙쏙 뽑아먹으며 공부했지만, 학교에서 배운건 시험yooputer-devlog.tistory.com 우선 HMTL은 Element라는 것으로 구성되어 있다. Element는 '요소'라는 뜻이다. (별 뜻은 없다. 그저 무언가를 구성하는 것이라는 뜻)웹페이지에 있는 글자, 이미지, 버튼은 모두 E..

Development Study/HTML&CSS 2025. 5. 20. 13:54

최근에 커서AI와 같은 인공지능이 탑재된 IDE에 대해 관심이 생겼다. 그래서 관련 책도 사고, 커서AI 체험기간동안 체험도 해보구... 그랬는데, WOW 이게 되네? 감탄을 금치 못했다. 마음같아선 일어서서 박수를 치고 싶었다. (회사라서 생각만 했다.) 그러다가 인프런에서 아래 강의를 보고내가 주로 사용하는 IDE인 IntelliJ에 Claude를 붙일 수 있다는 걸 알게 되었다. Claude + IntelliJ로 TodoList 개발하기 - MCP 완전 정복 강의 | Neo - 인프런Neo | , Claude + IntelliJ로 TodoList 개발하기 - MCP 완전 정복'단 한 줄의 코드도 없이 TodoList를 만든다고?'이제는 가능합니다. 이 강의에서는 MCP(ModelContextPro..

Development Study/AI 개발 활용기 2025. 5. 16. 16:45

문득 매일 보는 HTML 코드이지만 HTML에 대해 제대로 공부한 적이 없다는 생각이 들었다. 물론 학교에서도 배웠고, 실무하면서 필요한 정보만 쏙쏙 뽑아먹으며 공부했지만, 학교에서 배운건 시험본 후 까먹어버렸고, 필요할 때만 얻었던 정보들은 휘발되어 버렸다. 웹개발자로 일하면서, 누군가 나에게 HTML이 뭐에요?라고 물어본다면나는 뭐라고 설명해줄 수 있을까? "어... 음... 그러니까 우리가 보는 브라우저에서 보이는 웹페이지의 뼈대를 만들어주는 거에요"라고만 설명할 수 있을 거 같다. 이게 최선일까... 조금 부끄러워 진다. 그래서 HTML에 대해 제대로 공부해보기로 했다. HTML이란? 우선 한가지 말하고 싶은 것이 있다. HTML은 프로그래밍 언어가 아니다. 프로그램을 만들기 위해 사용하는 언어가..

Development Study/HTML&CSS 2025. 5. 15. 11:08