과거 웹 상에서 3차원을 구현하기 위해서 VRML(Virtual Reality Modeling Language) 이라는 언어를 사용한 적이 있다.원뿔을 구현한다고 생각해 보자. 아래와 같이 정의하면 웹브라우저의 플러그인 프로그램에서 해석하고 화면에 뿌려준다.그러면 아래와 같은 모형이 그려지며 X, Y, Z 축 어느 방향으로도 네이게이션이 가능하고 카메라의 이동도 가능하기 때문에 Z축 즉 앞뒤로 깊이감을 줌으로써 3차원의 느낌을 준다. Cone { field SFFloat bottomRadius 1 field SFFloat height 2 field SFBool side TRUE field SFBool bottom TRUE} 이 3D 모형을..

1. 준비물티스토리 다른 계정을 컨텐츠를 먼저 백업받습니다.깃허브에서 리포지토리를 클론하거나, zip 파일로 다운받습니다.2. 사용방법how_to_run.md 파일을 참고합니다.3. 주의사항하루에 다량의 글을 등록하면 일일 리밋이 걸릴 수 있습니다.따라서, 하루 5개 정도만 등록하는 것을 추천합니다.티스토리 자체의 글 발행 프로세스가 변동될 경우 작동을 하지 않을 수 있습니다. https://github.com/ethanjoh/tistory_auto_posting

1. 여러 계정의 블로그 통합 필요2개의 계정에서 티스토리 블로그를 각각 운영하고 있었는데 관리의 귀차니즘하나의 블로그로 통합 필요불필요한거 삭제하고 약 150개 정도 등록 필요2. 블로그 백업티스토리는 백업하면 각 폴더 안에 글 내용이 적힌 html과 이미지 폴더가 각각 생성3. 문제점그러나, 어느 순간 글 저장 시 보안문자캡차가 떠버림완전자동이 아닌 마지막에 이미지 문자를 보고 사람이 입력해야 하는 수고 발생그럼에도 수동으로 등록 시 하나씩 폴더를 열고 사진등록하고...시간 낭비4. 1시간 동안 바이브 코딩을 하다처음엔 티스토리 API가 개방되어 있다고 해서 편하겠구나 했는게 그것도 종료되어버림할 수 없이 제미나이에 물어보니 playwright같은 기능으로 가능하다고 함안티그래비티에 프롬프트 입력 (..

요즘 ChatGPT, 클로드(Claude) 같은 AI를 업무에 많이들 활용하지만 AI를 쓰다 보면 꼭 이런 답답한 순간이 찾아옵니다."이모티콘 쓰지 말고 표 형식으로 써달라고 어제 말했는데, 왜 오늘 새 대화창을 열니까 또 원래대로 돌아가 있지?" "처음에는 똑똑하게 일하다가 대화가 길어지니까 중요한 규칙을 자꾸 까먹네?" 매번 AI에게 똑같은 규칙을 설명하느라 피곤하셨다면, 오늘 소개해 드릴 하네스 엔지니어링(Harness Engineering)과 AI 에이전트 팀 설계 개념에 주목해 보세요! https://youtu.be/g4fZ_hT1Pfc 1. 하네스 엔지니어링(Harness Engineering)이 뭔가요?가장 알기 쉬운 비유는 **'야생마와 마구(Harness)'**입니다. 현재의 거대..

2026.07.06 - [바이브코딩] - 배포와 CI/CD 완벽가이드 배포와 CI/CD 완벽가이드내가 원하는 웹사이트를 만들었는데 다른 사람에게 보여줘야 한다면?웹브라우저에 나와있는 localhost://~ 이 주소를 보내줄건가요?이건 내 컴퓨터에서만 볼 수 있죠. 그래서 이렇게 내가 만든 웹wisdom.me.kr 이전 글에서 내가 만든 프로그램을 배포하기 위한 서비스를 소개한 적 있는데 여기서는 대표적인 3가지 서비스를 비교 분석해보겠습니다. 그에 앞서 전통적인 웹호스팅이나 클라우드 호스팅과 이러한 서비스들이 다른 점은 무엇이고 왜 써야하는지 알아보겠습니다. https://youtu.be/mQqlGK2nn2g 기존의 전통적인 웹호스팅이나 AWS, 오라클 클라우드 같은 인프라 중심(IaaS) 서비..

풀스택 개발자(Full-Stack Developer)란 웹 애플리케이션의 사용자 화면을 담당하는 '프론트엔드'와 눈에 보이지 않는 서버, 비즈니스 로직, 데이터베이스를 처리하는 '백엔드'를 모두 개발할 수 있는 사람을 뜻합니다. 원래 '풀스택 개발'은 웹 서버, 서버사이드 코드, 브라우저와 클라이언트 사이드 코드, 데이터베이스와 운영체제 등 시스템 전반을 아우르는 개발을 의미했으나, 오늘날 국내에서는 프론트엔드와 백엔드 양쪽을 넘나들며 시스템 전체를 연결할 줄 아는 멀티플레이어 개발자를 지칭하는 용어로 흔히 쓰이고 있습니다. https://youtu.be/T6lXPP9tkHs 웹 개발 생태계에서 가장 주목받는 변화는 바로 견고했던 '프론트엔드'와 '백엔드'의 경계가 빠르게 허물어지고 있다는 점입니다..

최근 IT 업계와 1인 창업 생태계에서 가장 뜨거운 화두는 단연 **'바이브 코딩(Vibe Coding)'**입니다. 코드를 직접 한 줄 한 줄 타이핑하는 대신, AI에게 내 비전과 목적을 전달하여 코드가 스스로 생성되도록 통제하는 개발 방식이죠. 하지만 많은 이들이 이 놀라운 도구를 쥐고도 실패를 경험합니다. "AI한테 홈페이지를 만들어 달라고 했는데, 결과물이 완전히 엉뚱하게 나와요"라는 탄식이 도처에서 들립니다. 이유는 단순합니다. **"입력 품질이 출력 품질을 결정한다(Garbage In, Garbage Out)"**는 원칙 때문입니다. AI 코딩 시대에 기획의 가치는 소멸한 것이 아니라, 오히려 성공과 실패를 가르는 절대적인 열쇠로 부각되고 있습니다. 이번 글에서는 서비스 기획부터 배포까지 AI..

2026.07.06 - [바이브코딩] - #1 REST API란? 앞서 REST API가 무엇인지 알아보았는데 실제로 PHP를 통해 어떻게 구현하는지 간단한 사례를 보겠습니다.server.php와 client.php 2개의 파일을 미리 만들고 구글 안티그래비티에서 실행하도록 시켜봤습니다. 작업을 시키면 안티그래비티에서 로컬 서버를 띄우고, 브라우저 상에서 테스트를 하고 스크린샷까지 찍어서 보고서를 만들어줍니다. 구동방법은 터미널을 열고 php -S localhost:8000 server.php 를 입력합니다. 1, "name" => "아메리카노", "price" => 3000], ["id" => 2, "name" => "카페라떼", "price" => 3500] ]; // JSO..

현대 웹개발에서 REST API 사용은 필수라고 이야기합니다.REST API는 무엇이고 왜 써야하는지 알아보겠습니다. https://youtu.be/5Z0PI5j_kxs?si=XURX-yJMJhKaBKLK REST API(Representational State Transfer API)는 웹의 창시자 중 한 명인 로이 필딩(Roy Fielding) 박사가 2000년 그의 박사 학위 논문에서 제시한 인터넷 지향 소프트웨어 아키텍처 스타일이자 설계 원칙입니다.쉽게 말해, 두 개의 서로 다른 소프트웨어가 웹의 통신 규약인 **HTTP(Hypertext Transfer Protocol)**를 활용하여 가장 효율적이고 직관적으로 데이터를 주고받을 수 있도록 정의한 약속이자 규칙 모음입니다.REST API를 ..

전통적으로 Nginx 웹서버 + MySQL을 쓰던 것이 요즘은 개발자는 프론트엔드에만 집중하고 백엔드는 아웃소싱하는 그런 시대입니다. 전통적인 DB와 최근의 DB 서비스는 뭐가 다른지 한번 알아보겠습니다. https://youtu.be/AL8o3a-c5Ys?si=n82oo5-Rpa2YZ4cj 전통적인 MySQL이나 Oracle 같은 데이터베이스를 직접 구축하여 사용하는 방식과 Firebase, Supabase 같은 현대적인 BaaS(Backend-as-a-Service) 데이터베이스 서비스는 아키텍처, 개발 속도, 관리 방식에서 근본적인 차이점을 가집니다.1. 중간 백엔드 서버의 유무 (가장 큰 아키텍처 차이)전통적인 방식: 사용자가 웹이나 모바일에 접속하면 데이터베이스에 바로 접근하지 못합니다. 데이..

웹사이트를 운영하게되면 반드시 필요한 것이 데이터베이스입니다.회원가입을 받기 위해서도, 상품을 팔기 위해서도 어딘가에 정보를 저장해 두어야 합니다.그 역할이 데이터베이스입니다. 전통적으로 SQL 데이터베이스를 많이 사용했지만 최근에는 NoSQL도 많이 사용하고 있습니다.어떤 서비스를 제공하냐에 따라 데이터베이스의 선택도 달라집니다. https://youtu.be/IarxVeX6AyM?si=USYUXk2lopOmUd9D 그럼 SQL과 NoSQL의 장단점, 차이점은 뭐가 있을까요? SQL과 NoSQL 데이터베이스의 핵심 차이점은 데이터 구조(스키마), 확장 방식, 관계 표현 및 조인(JOIN) 지원 여부, 그리고 데이터 정합성 보장 모델에 있습니다.1. 핵심 아키텍처 차이점데이터 구조 및 스키마 (Sc..

내가 원하는 웹사이트를 만들었는데 다른 사람에게 보여줘야 한다면?웹브라우저에 나와있는 localhost://~ 이 주소를 보내줄건가요?이건 내 컴퓨터에서만 볼 수 있죠. 그래서 이렇게 내가 만든 웹사이트를 외부에서도 다른 사람들이 볼 수 있도록 공유하기 위한 작업, 즉 "배포" 라는 것을 합니다.한마디로 어디 서버에 내가 만든 웹사이트를 올려놓는다는거죠.(개인적으로 배포라는 단어가 의미전달을 제대로 하지 못하는 것 같아 별로 좋아하지 않습니다만) 이런 과정을 아예 자동화하는 것이 CI(Continuos Integration)/CD(Continuos Deployment) 라고 하는 것입니다.내가 소스를 고치고 깃허브와 동기화하면, 깃허브와 연결된 Vercel에서 이를 감지해 배포까지의 과정이 자동으로 이루..

기술이 발전할 수록 알아야 할 것도 참 많아집니다.이번엔 도커에 대해서 알아보겠습니다. https://youtu.be/Sglo-dxGzGM?si=Wj7x0nlW53MMf-TC 도커(Docker)를 사용하는 가장 핵심적인 이유는 **프로그램을 어떤 환경에서든 에러 없이 일관되게 설치하고 실행할 수 있는 '이식성(Portability)'**을 확보하고, 개발 및 배포 과정의 비효율성을 없애기 위함입니다.도커가 현대 소프트웨어 개발에서 필수가 된 구체적인 이유는 다음과 같습니다.1. 완벽한 환경 일관성 ("내 컴퓨터에서는 되는데 왜 서버에선 안 되지?" 해결)이전에는 개발자의 PC에서 잘 작동하던 코드가 테스트 서버나 운영 서버에 배포되면 OS 버전 차이, 라이브러리 누락, 미세한 설정 값 차이 등으로 인..

요즘 node.js를 모르면 뭐 하나 제대로 할 수가 없습니다.node.js가 뭘까? https://youtu.be/2gFHL1E-XlQ?si=sSHZiFRSarZXlYn0 Node.js는 자바스크립트를 웹 브라우저 외부(서버나 컴퓨터 등)에서 실행할 수 있게 해주는 런타임 환경으로, 뛰어난 확장성과 성능을 바탕으로 다음과 같은 다양한 분야에서 활용됩니다. 1. 백엔드 서버 및 API 개발 가장 대표적인 사용처로, 데이터베이스(MongoDB 등)와 통신하며 데이터를 저장, 수정, 삭제(CRUD)하고 클라이언트의 요청을 처리하는 고성능 REST API와 백엔드 서비스를 구축할 때 사용됩니다. PayPal, Netflix, Uber, LinkedIn, Yahoo 등 대규모 데이터를 다루는 글로벌 기업들이..

부트스트랩이 처음 나왔을 쓸 때만 하더라도 와~ 이제 반복코딩은 없어지고 컴포넌트들을 아주 간단하게 만들겠구나...하며 좋아했던 기억이 납니다. 그리고 상당기간 부트스트랩으로 웹사이트를 개발했는데, 가장 큰 단점은 다 비슷비슷하고 고만고만한 디자인이 나온다는 것이었죠. 하지만 이제 그 단점을 보완한 테일윈드가 인기를 얻고 있습니다. https://youtu.be/S0swMK0LuEc?si=LrdluuHlRhpZLJqd Tailwind CSS는 미리 정의된 작은 스타일 클래스(유틸리티 클래스)들을 조합하여 HTML 문서 내에서 직접 웹사이트의 디자인을 완성할 수 있게 해주는 '유틸리티 퍼스트(Utility-First)' 기반의 CSS 프레임워크입니다. 초보자가 이해하기 쉬운 Tailwind CSS의..

📦 Webpack vs ⚡ Vite: 웹팩은 왜 필요했고, 비트는 왜 나왔을까? (초보자 완벽 가이드)안녕하세요! 프론트엔드 개발에 입문하면 가장 먼저 마주치게 되는 장벽 중 하나가 바로 **‘빌드 도구(Build Tool)’**와 **‘번들러(Bundler)’**라는 개념입니다."그냥 HTML, CSS, JS 파일만 만들어서 브라우저에 띄우면 되는 것 아닌가요?" 라고 생각하셨다면 주목해 주세요! 대세 빌드 도구인 **웹팩(Webpack)**과 **비트(Vite)**가 왜 세상에 나왔는지, 그리고 나에게 맞는 도구는 무엇인지 아주 쉽게 풀어 정리해 드립니다. 😉 https://youtu.be/Q7ToVF3UNJY?si=BFcwKhocllLEVF3h 1. 📦 Webpack은 왜 필요했을까? (라떼의..