230313 웹개발 2주차

째깍단 2023. 3. 14. 00:12

웹개발 종합반 2주차는 Java script로 웹이 동작을 수행하게하는 방법을 공부한다.

말그대로 script를 주어 작업을 수행하게 하는데, head문에 작성하는 것이 일반적임.

JQuery, JQuery에 따라오는 .append , Fetch 문에 대해서도 함께 공부하였다.

Java script에서 사용하는 기본적인 용어들.

<head>

<script>
	function //함수
    console.log //콘솔에 로그를 띄워 개발 내용 확인 및 공유
    a, b, c ...  //변수
    '문자열'  //작은 따옴표 안 글자를 출력함
    alert  //경고창 띄우기
    hey()  //함수 설정
    let a = //함수 세부 수행내용 ...
</script>

</head>

JQuery 는 $()로 사용하며 비교적 간단하게 원하는 바를 적용할 수 있도록 해준다.

$ = id를 주는 것(=class, 정의)

문자열, 꾸미기 등 여러가지 활용을 하니 앞으로 차근차근 익숙해져가기.

이 안에서 if else 문, forEach문을 사용하여 데이터를 보기 좋게 출력할 수 있다.

if else는 조건문 / forEach는 반복문을 통한 동작 수행

let people = [
	{ 'name': '철수', 'age': 15 },
	{ 'name': '영희', 'age': 25 }]

if ( a > 20 ) {
	temp_html = `<p>${name}는 ${age}살이며, 성인입니다.</p>`
} else {
	temp_html = `<p>${name}는 ${age}살이며, 청소년입니다.</p>`
}
$('#q1').append(temp_html)

이렇게 출력하면 결과는

영희는 25이며, 성인입니다.

철수는 15이며, 청소년입니다.

로 나올 것임.

(코드 일부만 작성하여서 이것만 쓴다고 나오진 않는다..)

for 문은 반복문인데, Each가 붙으면서 각각을 반복하는 반복문이 되었다.

let people = [
	{ 'name': '철수', 'age': 15 },
	{ 'name': '영희', 'age': 25 }
    ]

people.forEach(('name') => {
let temp_html = `<p>${name}</p>`
$('#q1').append(temp_html)
}

forEach문, append를 통해 동작 수행시 이름을 순차 출력할 수 있도록 한다.

(이게 맞는 코드인지는 모르겠는데ㅋㅋ 나중에 연습문제 하면서 직접 실행해봐야겠다)

` `

Backtick 이라 하며, html로 변환해줌.

$(`#실행하고자하는 부분`).empty()

동작을 실행하면 그 부분이 empty! 비워지게 된다.

Fetch문은 어떤 데이터가 있었을 때 URL에서 데이터를 가져와 활용할 수 있도록 한다.

데이터에서 필요한 부분을 추리고 필요조건(if else)을 붙여 원하는 방식으로 자료를 출력해낼 수 있다.

서버 - 클라이언트 간 통신

서버는 가져오고자 하는 데이터가 위치한 곳

API 는 창구!

클라이언트 요청에 의해 API를 거쳐 code를 가져옴

// 이후 더 덧붙일 내용이 있으면 추가로 작성하기로 한다.

내일목표

- 오전 중 2주차 웹개발 클래스, 파이썬 1주차를 마무리하고, 숙제 제출하기

- 팀 프로젝트 진행하기

오늘 내용에 파이썬 1주차랑 비슷한 부분이 있어서 즐거웠다:)

갑작스레 AI웹개발반에 합격하게 되었다.

이번주는 미니 프로젝트를 진행해야하니 공부시간을 잘 조절해야할 것 같다.

각오하고 있었다해도 갑작스레 추가된 일정들에 압박을 받는 것도 사실이어서

일정으로 스트레스 받지 않게 조심하고,,, 잘 나아가 보면 좋겠다.

화이팅!