1. 웹의 동작 개념
1. 클라이언트(브라우저)는 주소를 통해 API로 요청을 보내고, 서버에게 받은 HTML(데이터) 파일을 그려주는 역할을 함.
2. 요청은 API라는 창구에 보냄. (정해진 약속대로 요청을 보내는 것) ex: 주소창에 주소를 입력하고 엔터를 입력
3. 서버는 API 요청에 맞는 HTML 파일을 클라이언트에게 돌려줌.
2. HTML
- html 은 크게 <head> 영역과 <body> 영역이 있음
- 중요한 팁,
Alt+Shift+F자동 줄 맞춤
3. CSS
- 기본 알아두면 좋을 코드들
배경관련
background-color
background-image = url('')
background-position: center;
background-size: cover;
사이즈
width
height
가운데 정렬
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
폰트
font-size
font-weight
font-family
color
간격
margin: 위 오른쪽 아래 왼쪽
padding- 부트스트랩 CDN 링크
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">- 부트스트랩 링크
" https://getbootstrap.com/docs/5.3/ "
4. JS
- console.log 위에 안내창 뜨는 거
- 리스트: let a = []
- 딕셔너리: let a_dict = {}
1. 반복문
- for 문
- 전통적인 반복문입니다. 배열의 인덱스를 사용하여 반복합니다.
- 배열 인덱스를 사용하여 반복
- 반복문 중간에
break나continue를 사용하여 흐름 제어 가능.
- forEach문
- 배열의 각 요소를 순회하며 콜백 함수를 실행.
break,continue를 사용할 수 없음.- 배열만 사용 가능, 다른 반복 가능한 객체에는 사용 불가.
- 더 간결한 코드로 사용할 수 있음.
- 콜백 함수의 매개변수로 현재 요소, 인덱스, 배열 전체를 받을 수 있음.
- 둘의 성능차이
forEach는 배열 메서드로 내부적으로 콜백을 호출하므로 성능이for문에 비해 약간 느릴 수 있습니다.- 하지만 성능 차이는 미미하므로 일반적으로 배열 순회에는
forEach를 사용하는 것이 가독성 측면에서 더 유리할 수 있습니다.
2. 조건문
- if 문
if (조건) {
// 조건에 맞다면~
} else {
// ~가 아니라면~
}3. 반복문+조건문
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})4. DOM
- document는 웹문서
- . 은 ~의 라는 의미
getElementById→ html 요소 가져와ById에 의해 바꾸고 싶은 아이디 즉 셀렉터를 넣고, 바꿀 내용 적기!
5. JQuery
1. 사용이유
- 순수 javascript만 사용하면 길고 복잡해짐 > 따라서, JQuery를 쓰는 겁니다!
- Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
- 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야 해서, JQuery라는 라이브러리가 등장
- JQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드.
- 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
2. 사용방법
- <head> 와 </head> 사이에 아래를 넣으면 끝
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>- Query에서는 해당 함수 정의와 사용 방식이 변하지 않으며, jQuery의 이벤트 핸들러나 다른 기능 안에서 JavaScript 함수를 사용할 수 있습니다.
document.getElementById('hello').innerHTML = '안녕';위에 코드를 아래처럼 쓸 수 있다.
$('#hello').html('안녕');
$('#q1').append(temp_html);
$('#q1').empty();
오늘의 회고
- 웹 강의를 들었는데 들을 만 했다. 강의력이 좋아서 처음에 이 수업을 들었으면 더 쉽게 공부를 하지 않았을까 싶다.
- 바로 3주차 강의를 들을까 했지만, 하루에 너무 많은 수업을 듣기보다는 이렇게 정리하고 내일 다음 주차 수업을 듣는게 나을 거 같아서 오늘은 여기까지만 하기로 했다 !
'백엔드 부트캠프[사전캠프] > TIL' 카테고리의 다른 글
| [내일배움캠프-사전캠프 10일차] Web 5주차 (1) | 2025.02.05 |
|---|---|
| [내일배움캠프-사전캠프 09일차] Web 3주차 ~ 4주차 (2) | 2025.02.04 |
| [내일배움캠프-사전캠프 07일차] SQL 강의 (0) | 2025.01.31 |
| [내일배움캠프-사전캠프 06일차] SQL 3주차, 4주차 강의 (0) | 2025.01.27 |
| [내일배움캠프-사전캠프 05일차] SQL 수업 듣기 (2) | 2025.01.24 |