17. 선언 방식
JavaScript는 HTML에서 다음 세 가지 방식으로 선언할 수 있다.
17-1. 내부 방식 (Internal JavaScript)
<script>
alert("내부 방식으로 작성된 JavaScript입니다.");
</script><script>태그 내부에 코드를 작성- 보통
<body>하단에 위치해 HTML 로딩 이후 실행되도록 함
17-2. 인라인 방식 (Inline JavaScript)
<button onclick="alert('인라인 방식')">클릭</button>- HTML 태그의 속성으로 JS 코드 직접 삽입
- 유지보수가 어렵고 추천되지 않음
17-3. 외부 방식 (External JavaScript)
<script src="main.js"></script>- JS 코드를 별도
.js파일에 작성하고 링크함 - 가장 실무적인 방식 (HTML, CSS, JS 분리)
주의사항
<script>는 HTML 요소보다 뒤쪽에 위치해야 DOM 요소를 정상 인식함<head>에 넣을 경우DOMContentLoaded이벤트나$(document).ready()필요
18. 제이쿼리(jQuery)
개요
- JS의 문법을 간결하고 브라우저 호환성 있게 사용할 수 있도록 설계
- DOM 조작, 이벤트 처리, Ajax 등 간편하게 처리 가능
기본 문법
$(선택자).동작함수(매개변수);- 접근:
$("#id"),$(".class") - 동작:
.html(),.text(),.css() - 이벤트:
.on("click", function() {...})
예제
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$("#text").text("버튼 클릭됨!");
});
});
</script>
<button id="btn">클릭</button>
<p id="text">기본 텍스트</p>19. 동기 vs 비동기 통신
19-1. 동기(Synchronous)
- 요청 → 응답을 받을 때까지 대기
- 흐름이 차단됨
alert("닫기 전까지 다음 코드 실행 안 됨");
console.log("이건 나중에 출력됨");19-2. 비동기(Asynchronous)
- 요청 → 기다리지 않고 다음 코드 즉시 실행
- 흐름을 멈추지 않음
setTimeout(() => {
console.log("3초 후 출력");
}, 3000);
console.log("이건 먼저 실행됨");동기 vs 비동기 비교
| 항목 | 동기 (Synchronous) | 비동기 (Asynchronous) |
|---|---|---|
| 실행 순서 | 순차 처리 | 병렬 처리 가능 |
| 흐름 차단 | O | X |
| 사용자 경험 | 멈춤 발생 가능 | 자연스러운 UX |
| 예시 | alert(), form submit | setTimeout(), fetch() |
JSON 예시
{
"name": "Emma",
"age": 25,
"skills": ["JavaScript", "Python"]
}let data = {
name: "Emma",
age: 25,
skills: ["JavaScript", "Python"]
};
console.log(data.skills[1]); // "Python"fetch 예제 (비동기 통신)
fetch("https://api.example.com/data")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error("에러 발생:", err));20. 동적 요소 생성
HTML 요소를 JS로 동적으로 생성하는 방법 정리
핵심 메서드
| 동작 | 메서드 |
|---|---|
| 태그 생성 | document.createElement() |
| 텍스트 생성 | document.createTextNode() |
| 속성 생성 | document.createAttribute() |
| 속성 추가 | setAttributeNode() |
| 요소 추가 | appendChild() |
텍스트 포함 요소 생성
let span = document.createElement("span");
let text = document.createTextNode("생성된 텍스트입니다.");
span.appendChild(text);
document.getElementById("container").appendChild(span);이미지 생성 예시
let img = document.createElement("img");
let src = document.createAttribute("src");
src.value = "https://image-url.com/example.png";
img.setAttributeNode(src);
document.getElementById("container").appendChild(img);댓글 동적 생성 실습 예시
- input에 댓글 입력
- 등록 버튼 클릭 or Enter 시 li 생성
- 삭제 버튼도 함께 생성
→ 실습 전체 HTML은 마크다운 상단 참고
Data Scientist, interested in CV, NLP
너무 깔끔해요~