AI랑 같이하는 코딩

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹앱에서 날씨, 지도, 결제, 로그인 같은 기능이 동작하는 이유는 대부분 API 덕분입니다. API는 어렵게 보면 복잡하지만, 핵심은 단순합니다. API는 서로 다른 프로그램이 약속된 방식으로 데이터를 주고받는 창구입니다.2. 핵심 내용요청(Request)과 응답(Response)클라이언트(브라우저/앱)는 필요한 데이터를 API 서버에 "요청"하고, 서버는 결과를 "응답"으로 돌려줍니다. 이 흐름이 웹 데이터 통신의 기본입니다.HTTP 메서드로 의도를 전달GET은 조회, POST는 생성, PUT/PATCH는 수정, DELETE는 삭제에 주로 사용합니다. 메서드는 "무엇을 하고 싶은지"를 서버에 명확히 알리는 신호입니..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개JavaScript에서 데이터를 다룰 때 가장 자주 만나는 구조가 배열(Array)과 객체(Object)입니다. 둘 다 값을 담지만 기준이 다릅니다. 순서가 중요하면 배열, 이름(키)로 찾고 싶으면 객체라고 기억하면 실무 판단이 빨라집니다.2. 핵심 내용배열(Array): 순서가 있는 목록배열은 인덱스(0, 1, 2...)로 데이터를 관리합니다. 게시글 목록, 댓글 리스트, 장바구니 상품처럼 "여러 항목을 순서대로" 다룰 때 적합합니다.객체(Object): 속성 이름이 있는 묶음객체는 키(key)-값(value) 형태로 데이터를 보관합니다. 사용자 정보처럼 name, email, role처럼 의미 있는 이름으로 접근..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹페이지에서 버튼을 누르면 메뉴가 열리고, 입력창에 글을 쓰면 안내 문구가 바뀌는 이유는 무엇일까요? 그 핵심이 바로 이벤트(Event)입니다. 이벤트는 브라우저 안에서 발생한 신호이고, JavaScript는 그 신호를 받아 동작을 실행합니다.2. 핵심 내용이벤트는 "일이 발생했다"는 알림클릭(click), 입력(input), 제출(submit), 스크롤(scroll), 키보드 입력(keydown)처럼 사용자의 행동이나 브라우저 상태 변화가 이벤트가 됩니다.이벤트 리스너가 신호를 기다린다addEventListener를 사용하면 특정 요소에서 특정 이벤트가 발생했을 때 실행할 함수를 연결할 수 있습니다. 즉, "무슨 ..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개HTML을 작성하다 보면 class와 id를 언제 써야 할지 헷갈립니다. 둘 다 요소를 식별하는 이름표이지만 쓰임새가 다릅니다. class는 여러 개를 묶는 공용 이름, id는 문서 안에서 단 하나만 갖는 고유 이름이라고 기억하면 쉽습니다.2. 핵심 내용class: 반복되는 스타일과 그룹에 적합여러 카드, 버튼, 배지처럼 같은 디자인을 공유하는 요소들에는 class를 사용합니다. 한 요소에 class를 여러 개 붙일 수 있어 재사용성과 조합이 좋습니다.id: 한 페이지에서 유일한 대상에 사용헤더, 특정 섹션 앵커, 고유한 입력 필드처럼 "딱 하나"를 정확히 지목해야 할 때 id를 씁니다. 같은 id를 여러 요소에 중..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹페이지를 처음 만들 때 가장 먼저 부딪히는 질문이 바로 "HTML, CSS, JavaScript는 뭐가 다르지?"입니다. 이 셋은 각각 다른 일을 맡는 팀처럼 움직입니다. HTML은 구조를 만들고, CSS는 모양을 꾸미고, JavaScript는 동작을 담당합니다.2. 핵심 내용HTML: 뼈대와 의미를 만든다HTML은 제목, 본문, 버튼, 이미지처럼 페이지의 구성요소를 배치하고 의미를 부여합니다. 예를 들어 은 큰 제목, 는 문단, 은 버튼임을 알려줍니다.CSS: 보이는 방식을 결정한다CSS는 색상, 글꼴, 여백, 정렬처럼 "어떻게 보일지"를 정합니다. 같은 HTML이라도 CSS를 바꾸면 전혀 다른 분위기의 사이트로..