바이브 코딩에 필요한 기초 핵심 개념 스터디

참조 영상 링크 [바이브코딩 막힘 없이 뻥 뚫어 드립니다 | 바이브 코딩을 시작하는 분들 끝까지 보고 하세요.]

추가 참조 : https://mindmap.technote.wiki/

---

• LLM(Large language model) : 우리가 많이 쓰는 언어 학습 기반 AI 모델들. chatGPT, Gemini etc.
• CLI : Command Line interface 클릭해서 직접 명령어(코드)를 입력해서 명령하는 방식
• 터미널(terminal) : 명령어를 입력하는 인풋 창(프로그램). 검은창 같은 화면
• IDE : integrated development envirionmet 통합개발환경 안에서 터미널이 작동하면 CLI로 명령 (ex:VScode같은 코드에디터에 많은 기능이 추가되면서 개발부터 실행, 디버깅까지 가능해짐. + Xcode 등등)
• 쉘(shell) : IDE 내장 터미널에 CLI로 사용자가 명령하면 해석해서 OS를 대신 작동시키는 프로그램. 컴퓨터 핵심(운영체제 커널)을 직접 건드리는 대신, 겉에서 대신 OS를 건드리는 명령을 해주는 중간 단계
• 운영체제(OS, operating system) : 컴퓨터 하드웨어(CPU, 메모리, 저장공간)를 관리하고, 프로그램들이 돌아가게 해주는 가장 기본적인 소프트웨어 (macOS → 맥 / Windows → 윈도우 / Linux → 서버 많이 씀 / Android → 안드로이드 / iOS → 아이폰)
• CLAUDE code : VScode에 플러그인으로 설치해서 프롬프트입력으로 IDE를 활용할 수 있게 하는 클로드의 새모델
• prompt - context - harness : 기초 프롬프트 엔지니어링에서 맥락 이해 시키는 markdown 파일을 활용해 토큰을 절약하던 방식에서 에이전트 운용을 위한 harness까지의 AI 활용 변천사 
• mcp(model context protocol) : 인공지능(LLM)이 외부 데이터베이스, 파일 시스템, 애플리케이션 및 도구와 안전하게 상호작용할 수 있도록 지원하는 오픈소스 표준 통신 규약 (c타입 포트 같은 느낌)
• API(application programming interface) : 소프트웨어 간의 기능 및 데이터를 교환하기 위한 통신 규칙과 규격. API를 활용하면 페이지 전체 새로고침 없이 필요한 부분만 실시간 업데이트 가능해서 조립형 모듈처럼 사용 가능(동적 UI 구현 및 상호작용 비용 절약/프론트엔드 관점), 앱과 서버 전체를 노출하지 않고 필요한 데이터만 주고받을 수 있음(백엔드/보안/시스템 구조 관점) - 접근 권한을 제한하거나 일부 소거해서 보여줄 바에 실수 가능성을 줄이고 노출할 것만 선별하는 API를 활용할 수 있음
• API key : API를 연결할 때 필요한 연결 요청하는 서비스 식별용 key. 이 key로 인증을 받을 수 있고, 식별된 서비스에 따라 인가가 달라짐
• Ouath : 본인확인 대행시키는 인증 방식
• access token : Ouath 완료되면 받는 인증 완료 증명서
• 인증방식 : 아이디비번, 소셜로그인, ouath, 생체정보인증, API key 등
• 쿠키(cookie) : 사용자 로컬 브라우저가 저장하는 작은 데이터 조각
• 세션(session) : 쿠키와 다르게 서버에 저장되는 정보. 일정 시간 이상 활동 없으면 만료됨. “이 사용자는 로그인된 상태다”를 서버가 기억하는 것. 로그인 상태 매핑. 출입 명부 문지기같은 역할
• 로그(log) : 시스템의 사용 기록이나 네트워크 접속 정보 등 
• JWT(JSON Web Token) : Header(암호화 방식을 말하는 json) + Payload(내용물=사용자 정보 데이터 json) + Signature(도용 방지를 위해 위조불가한 서명) 개별 사용자 신분증같은 인증용 토큰. 금방 만료됨.
• Refresh token : JWT 재발급용 토큰. 비교적 오래 지속.
• Json : 프로그래밍 언어가 아니라, 데이터를 저장하는 (문자열 방식으로 표기하는) 컴퓨터의 규칙
• API 서버 : 백엔드 서버를 프론트 엔드로부터 분리하고 다양한 클라이언트를 대응하기 위한 서버 구현 방식
• 호스트(host) : 네트워크(인터넷)에 연결되어 IP 주소를 가지고 있는 모든 장치 -> 서버가 될 수도 있고, 클라이언트가 될 수도 있음
• 서버(server) : 요청을 받고 응답해주는 컴퓨터/프로그램 (요청에 응답해주는 쪽)
• 클라이언트(client) : 요청하는 쪽 (사용자)
• HTML(Hypertext markup language) : 웹 프론트엔드의 뼈대 언어
• HTTP(HyperText transfer protocol) : 웹 브라우저(클라이언트)와 웹 서버가 데이터를 주고받기 위해 사용하는 통신 규약(프로토콜)
• CSS : 웹 프론트엔드 디자인 언어
• Javascript : 웹 동작(인터랙션,데이터호출 등) 언어
• netlify : 정적 웹사이트를 온라인에 올릴 수 있는 클라우드 플랫폼. git 없이도 html 파일만 있어도 업로드 가능
• React/Flutter : react는 웹용 프레임워크(컴포넌트 개념), flutter는 한 번 만들어서 여러 플랫 폼에 배포 가능(웹앱 무한정) 
• React Native : react로 모바일 앱 만들때 사용
• Android/iOS : 네이티브 앱 모바일OS
• markup : 문서에 의미나 구조를 표시(mark up)하는 것 <h1>같은 것 : html 식
• markdown : 마크업을 더 쉽게 쓰게 만든 간단한 문법 # 안녕하세요 -> 제목 크기의 안녕하세요로 보임 : 노션 식
• Git : 로컬(내 컴퓨터)에서 버전 관리하는 프로그램. 소스 관리 버전 관리
• 개발(코딩) : 코드 작성
• 소스(컴파일) : 작성한 코드 파일들 한 단위
• 빌드(패키지) :  코드를 실행 가능한 형태(패키지)로 변환
• 서버프로그램 : 패키지를 실행(run)시킨 상태
• Github : 온라인으로 코드 공유/협업 가능한 웹서비스
• Github repository : 프로젝트 전용 클라우드 폴더(로컬과 리모드가 있음) - 코드를 수정하고 저장할 떄마다 '누가/언제/어떤 코드를/왜 수정했는지 버전로그가 전부 기록됨
• commit : 중간 세이브 포인트 만드는 것. 커밋 메시지로 기록해서 버전을 로컬에 남기기 위함. 깃헙에 리모트 올리지 않은 상태
• push : 클라우드에 커밋한 세이브 파일들을 깃헙 클라우드 폴더로 동기화하는 것. 푸시를 하고 나면 깃헙 사이트에 내가 작성한 코드와 커밋 메시지가 나타남
• pull : 깃헙에 있는 최신 코드를 내 컴퓨터(로컬)로 다운 받아 동기화하는 것
• SpringBoot/NodeJS/FastAPI : 각자 사용 언어가 다른 API 서버(백엔드)를 만드는 프레임워크(개발간편화 틀)/런타임(코드실행)
• IP : 인터넷에 연결된 모든 컴퓨터(호스트)가 가지는 고유한 숫자 주소
• 도메인(domain) : 인간이 기억하기 쉽게 만든 문자 주소 (ex. naver.com)
• URL(Uniform Resource Locator) : 상세한 인터넷 주소 (ex. https://www.naver.com/news/12345)
• DNS(Domain Name System) : 인간이 기억하기 쉬운 문자 주소를 컴퓨터가 이해하는 숫자 주소(IP)로 번역해주는 시스템 서비스
• local host port : 번호로 내 컴퓨터 안의 방 하나를 서버에 랜덤 배정
• 그냥 호스트와 로컬 호스트의 개념 차이 : 호스트는 모든 컴퓨터 각각을 명칭. 로컬 호스트는 내가 지금 쓰는 이 컴퓨터
• TUI : 터미널 안에 키보드 화살표나 단축키를 이용해 나름 메뉴도 고르고 그래픽처럼 조작할 수 있게 만드 화면
• CMD : 윈도우의 명령 프롬프트 창 = CLI 도구(Mac의 터미널과 동일)
• GUI <-> CLI
• CI/CD(continuous integration/continuous deployment) : Git같은 버전 관리 프로그램에서 자동으로 합치고 업데이트 하도록 해주는것. 테스트를 통해 코드를 점검하기도 함. 그 뒤 CD는 CI가 된 코드를 자동 배포하는 것
• cloudflare/vercel : CI/CD 해주는 서비스
• 서버는 모바일 호스트에게 설치된 앱 클라이언트로 http를 통해 연결되고 상호작용한다
• AWS/Azure : 서버를 호스팅할 컴퓨터를 빌려주는 서비스. 이 서비스 안의 컴퓨터에서 대체로 가볍고 튼튼한 리눅스 OS가 기본으로 깔리고 그 위로 제작한 서버 프로그램이 작동 됨
• Nginx : 호스트를 위해 대신 클라이언트를 분배해주고 보안 유지, 속도 향상에 도움을 주는 프로그램 소프트웨어(로드밸런서/부하분산기/리버스프록시라고 함)
• SQL : 데이터베이스 전용 명령어(언어)
• 쿼리(Query) : 질의(질문/요청)이라는 뜻. 데이터 베이스에 보내는 명령어 문장 자체
• 데이터베이스(DB, database) : 데이터 정보를 모아두는 곳
• MySQL, MongoDB : 데이터베이스를 컴퓨터에 만들고 관리해주는 데이터베이스 소프트웨어. MongoDB는 NoSQL
• API가 요청한 데이터를 서버 프로그램이 SQL 언어를 사용해서 데이터베이스에서 필요한 데이터를 꺼내준다
• MSA구조(Microservice Architecture) : 기능 별로 서버를 쪼개서 여러개 만드는 방식. 서버가 부분적으로 손상되어도 전체서버에 영향을 주지 않도록 하는 서버 개발 방식.
• 도커(docker) : 로컬 호스트에 기초 공사가 된 포트를 띄워 테스트 서버로 활용할 수 있도록 하는 하나의 컨테이너로 베이스를 세팅해놓은 기술
• 쿠버네티스(kubernetes) : 복사된 많은 포트들을 관리하고 수를 늘리거나 교체해주는 프로그램
• QA(Quality Assurance - 품질 보증) : 버그가 안생기게 예방팀
• QC(Quality Control - 품질 관리) : 버그가 있는지 테스트하는 팀
• QA 수동 테스트 : 직접 관계자가 테스트
• QA 자동 테스트 : 테스트 스크립트 코드를 짜서 자동으로 테스트
• 웹서비스의 탄생부터 테스트 배포까지 : 개발자가 로컬 호스트 컴퓨터에 도커 같은 도구를 사용해 포트에 서버를 띄워 개발을 하고, 개발이 끝나면 API 명세서를 제작해 URL로 공유하고 QA에 이상없으면 이 코드를 깃헙에 푸시하면 연동된 AWS의 서버 컴퓨터에 전송되고 나면 Nginx가 클라이언트를 맞이하며 리눅스OS 에서 돌아가는 서버 프로그램에게 요청을 분배하고 서버는 SQL로 DB에서 데이터를 꺼내와 화면을 보여줌
• SEO(search engine optimization - 검색 엔진 최적화) : 검색창에 사람들이 특정 단어를 검색했을 때, 내가 만든 웹사이트가 광고비를 내지 않고도 맨 위(상위권)에 무료로 노출되도록 웹사이트를 똑똑하게 가꾸는 작업.
• technical SEO : 사이트 속도, 모바일 최적화, 시멘틱 태그
• contents SEO : 핵심 키워드 포함, 체류 시간, alt 태그 꼼꼼히
• Paid : 돈을 내고 검색 엔진에서 결과 확인 시 '광고'마크와 함께 상휘노출 되도록 하고 클릭할 때마다 돈이 나가고 돈을 안내면 바로 사라짐
• 개발자 도구 둘러보기 : 요소/콘솔/소스/네트워크
• 요소 (Elements): "눈에 보이는 디자인과 레이아웃이 어떻게 짜여있지?"
• 콘솔 (Console): "지금 웹사이트 내부적으로 어떤 에러가 터지고 있지?"
  • 콘솔 창에 console.log(window.innerWidth); 라고 치고 엔터를 누르면, 현재 내 브라우저 창의 가로 픽셀 크기(예: 1440)를 숫자로 정확하게 뱉어냅니다. 반응형 디자인 검수할 때 아주 유용
  • document.body.contentEditable = true (활용: "여기에 글자가 세 줄로 길어지면 디자인 레이아웃이 깨지나?" 테스트해 보고 싶을 때, 기획자에게 다른 문구로 바꾸면 어떤 느낌일지 실시간으로 보여주고 싶을 때 아주 요긴하게 쓰입니다. (새로고침하면 다시 원래대로 돌아옵니다!))
• 소스 (Sources): "이 사이트를 이루는 원본 소스 코드 파일들이 어디 있지?"
• 네트워크 (Network): "서버랑 데이터(API)를 주고받을 때 속도는 어떻고 에러는 없나?"
• 크롤링 (crawling) :  인터넷에서 필요한 데이터를 긁어오는 것
• OG tag (open graph tags) : 링크가 어떤 내용인지 예쁘게 미리보기(Preview) 카드 형태로 보여주기 위해 사용하는 HTML 메타데이터
• 메타 데이터 : 데이터를 넘어서 그 이상의 데이터를 설명하는 데이터
• SDK (software development kit) : 기능을 한 세트에 올인원으로 담아놓은 키트
  • API (Application Programming Interface): 다른 프로그램과 소통하기 위한 규칙과 명령어 모음 (가장 핵심적인 부품)
  • 코드 샘플 및 예제: "이렇게 만들면 됩니다" 하고 보여주는 샘플 소스코드
  • 라이브러리(Libraries): 미리 만들어진 기능 데이터베이스 (예: 로그인 기능, 결제 기능 등)
  • 컴파일러/디버거: 코드를 기계어로 바꾸거나 오류를 찾아주는 도구
  • 문서 가이드: 개발자를 위한 친절한 설명서
  • 기타 등등