사람과 AI 사이 그 어딘가

빌드(build)는 개발 중인 코드를 사람들이 실제로 쓸 수 있는 형태로 바꾸고 다듬어 포장하는 과정입니다. 2026년 7월 기준으로 AI에게 코드를 받아 웹을 만들어 본 사람이라면, "다 됐는데 왜 인터넷에 안 올라가지?" 하는 순간 이 단어를 만나게 됩니다.이 글을 읽으면 npm run build가 뭘 하는지, 왜 배포 전에 꼭 한 번 거쳐야 하는지 감이 잡힙니다.빌드는 개발자가 편하게 쓰던 코드(반죽)를, 브라우저가 빠르게 읽을 완제품(빵)으로 굽는 단계입니다. 이 과정을 거쳐야 비로소 인터넷에 올릴 수 있는 파일이 나옵니다.왜 빌드가 필요할까개발 중에 쓰는 코드는 사람이 읽고 고치기 편하게 되어 있습니다.줄바꿈도 많고, 주석도 붙어 있고, 최신 문법도 자유롭게 씁니다.문제는 이 상태 그대로는 브라..

서버·개발/코드 노트 2026. 7. 21. 13:20

.gitignore는 Git이 깃허브에 올리지 않을 파일과 폴더의 목록을 적어두는 파일입니다.2026년 7월 기준, AI로 코드를 만들어 처음 깃허브에 올리는 초보자에게 이 파일은 사실상 첫 안전장치입니다.이 글을 읽으면 .gitignore가 왜 필요한지, 어떤 파일을 여기 적는지, AI로 만든 프로젝트에서 이게 왜 중요한지를 한 번에 정리할 수 있습니다..gitignore는 "이건 깃허브에 올리지 마"라고 Git에게 알려주는 블랙리스트 파일입니다. 비밀번호가 든 .env, 용량이 큰 node_modules가 대표 단골입니다..gitignore는 왜 필요할까프로젝트 폴더에는 남에게 보여주면 안 되거나, 굳이 올릴 필요가 없는 파일이 섞여 있습니다.대표적인 게 두 종류입니다.첫째는 비밀입니다.API 키나 ..

서버·개발/코드 노트 2026. 7. 21. 13:19

yarn과 pnpm은 npm과 똑같이 "코드 부품"을 설치하는 도구이고, 차이는 더 빠르거나 저장 공간을 아낀다는 점입니다.2026년 7월 기준, 셋 다 여전히 현역이고 하는 일은 거의 같습니다.이 글을 읽으면 npm·yarn·pnpm이 뭐가 다른지, 초보는 뭘 골라 쓰면 되는지, 그리고 AI가 프로젝트마다 다른 명령어를 주는 이유까지 한 번에 정리됩니다.npm·yarn·pnpm은 같은 일을 하는 경쟁 도구입니다. 코드 부품을 설치·관리한다는 목적은 같고, 속도와 저장 방식만 다릅니다. 초보는 셋 중 하나만 정해 쓰면 됩니다.셋 다 하는 일은 똑같습니다이 셋은 전부 "패키지 매니저"입니다.패키지 매니저는 쉽게 말해, 남이 만들어둔 코드 부품(라이브러리)을 내 프로젝트에 설치하고 관리해주는 도구입니다.이게..

서버·개발/코드 노트 2026. 7. 21. 13:05

google.com을 주소창에 치면 컴퓨터는 그 서버를 대체 어떻게 찾아갈까요.2026년 7월 기준으로 정리하면, IP는 컴퓨터의 전화번호, 도메인은 외우기 쉬운 이름, DNS는 이름을 번호로 바꿔주는 전화번호부입니다.이 글을 읽으면 인터넷 주소를 이루는 세 가지가 각각 무슨 일을 하는지, 그리고 왜 셋이 늘 붙어 다니는지 감이 잡힙니다.IP는 컴퓨터를 찾아가는 숫자 주소, 도메인은 사람이 외우기 쉬운 이름, DNS는 그 이름을 숫자 주소로 바꿔주는 변환 장치입니다. 셋은 따로 쓰이지 않고 항상 한 세트로 움직입니다.IP란 무엇인가IP는 인터넷에 연결된 컴퓨터에 붙는 숫자 주소입니다.사람으로 치면 전화번호에 가깝습니다.예를 들어 172.217.31.4 같은 숫자 묶음입니다.모든 서버와 기기에는 이런 숫자..

서버·개발/코드 노트 2026. 7. 21. 12:58

RAG는 AI가 답하기 전에 관련 자료를 먼저 찾아보고, 그걸 근거로 답하게 만드는 기술입니다.2026년 7월 기준, "내 문서를 AI에 물려서 답하게 하는 것"의 정식 이름이 바로 RAG입니다.이 글을 읽으면 RAG가 무엇인지, 왜 필요한지, 어디에 쓰이는지를 비유 하나로 이해할 수 있습니다.RAG는 "검색해서(Retrieval) 답을 만든다(Generation)"는 뜻입니다. AI가 머릿속 지식만 쓰지 않고, 관련 자료를 먼저 찾아본 뒤 그걸 근거로 답을 씁니다. 덕분에 엉뚱한 답이 줄고, 최신 자료도 반영할 수 있습니다.RAG란 무엇인가시험을 떠올리면 쉽습니다.외운 것만으로 답을 써야 하는 시험이 있습니다.반대로 참고서를 펴놓고 필요한 부분을 찾아본 뒤 답을 쓰는 시험도 있죠.RAG는 두 번째 방식..

AI 이야기/이게 뭐지? 2026. 7. 21. 12:53

TSX는 JSX(화면 문법)에 타입스크립트의 타입 규칙까지 더한 파일이고, 확장자는 .tsx입니다.2026년 7월 기준으로, AI에게 React 코드를 짜달라고 하면 .jsx 대신 .tsx 파일을 주는 경우가 부쩍 늘었습니다.이 글을 읽으면 .tsx가 뭔지, .jsx·.ts와 뭐가 다른지, 언제 어떤 걸 쓰면 되는지 한 번에 정리됩니다.한 줄 요약: .tsx는 .jsx에 "안전벨트"인 타입을 더한 파일입니다. 화면을 만드는 방식은 같지만, 실수를 실행 전에 미리 잡아주는 규칙이 붙어 있습니다.TSX가 뭐야? — JSX에 타입을 더한 것먼저 두 조각을 나눠서 보면 쉽습니다.JSX는 자바스크립트 안에서 같은 HTML 비슷한 문법을 쓰게 해주는 문법입니다.쉽게 말해 코드와 화면을 한 파일에 같이 쓰는 방식이..

서버·개발/코드 노트 2026. 7. 21. 11:11

JSX는 자바스크립트 파일 안에서 HTML처럼 생긴 화면 코드를 함께 쓰게 해주는 문법으로, 주로 React에서 씁니다.2026년 7월 기준, AI에게 웹 화면을 만들어 달라고 하면 십중팔구 이 JSX가 섞인 코드가 돌아옵니다.그런데 자바스크립트 파일 안에 갑자기 같은 HTML 태그가 튀어나오면, 처음 보는 사람은 당황하기 쉽습니다.이 글을 읽고 나면 JSX가 왜 이렇게 생겼는지, AI가 준 React 코드를 봤을 때 뭐가 뭔지 감이 잡힙니다.JSX는 원래 따로 놀던 로직(자바스크립트)과 화면(HTML)을 한 파일에서 같이 쓰게 묶어 주는 문법입니다. React로 화면을 만들 때 거의 항상 등장합니다.JSX가 뭐야?JSX는 JavaScript XML의 줄임말입니다.이름 그대로 자바스크립트(JavaScr..

서버·개발/코드 노트 2026. 7. 21. 09:55

타입스크립트는 자바스크립트에 '값의 종류(타입) 규칙'을 더한 버전으로, 실행 전에 실수를 잡아주는 게 핵심입니다.2026년 7월 기준으로, AI에게 코드를 맡길 때 "그냥 자바스크립트로 짜줘"와 "타입스크립트로 짜줘"는 결과물의 안정성이 꽤 달라집니다.이 글을 읽으면 둘의 차이를 비유 하나로 이해하고, AI로 코딩할 때 어느 쪽을 고르는 게 나을지 감이 옵니다.자바스크립트는 칸 없이 자유롭게 쓰는 손글씨, 타입스크립트는 칸이 정해진 서식(신청서)입니다. 서식은 답답해 보여도, 빈칸을 잘못 채우면 그 자리에서 바로 알려줍니다.자바스크립트가 뭔지 한 줄로자바스크립트(JavaScript, 줄여서 JS)는 웹페이지를 움직이게 하는 기본 언어입니다.버튼을 누르면 창이 뜨고, 스크롤하면 내용이 나타나는 동작이 대..

서버·개발/코드 노트 2026. 7. 21. 08:59