$('#q2').text(b['name']) // q2에 딕셔너리 b의 'name' 항목인 '영수'를 출력
letc = [ // 리스트-딕셔너리 형태의 배열 생성
{ 'name':'영수', 'age':30 },
{ 'name':'철수', 'age':35 }
]
$('#q3').text(c[1]['age']) // q3에 c의 두 번째 항목의 'age' 값을 출력
}
functioncheckResult() { // 함수
letpeople = [ // 리스트-딕셔너리 형태의 배열 생성
{ 'name':'서영', 'age':24 },
{ 'name':'현아', 'age':30 },
{ 'name':'영환', 'age':12 },
{ 'name':'서연', 'age':15 },
{ 'name':'지용', 'age':18 },
{ 'name':'예지', 'age':36 }
]
$('#q2').empty() // q2의 기존 내용을 모두 비움
people.forEach((a) => { // 반복문
letname = a['name'] // 현재 항목의 name 값을 변수 name에 저장
letage = a['age'] // 현재 항목의 age 값을 변수 age에 저장
lettemp_html = `<p>${name}는 ${age}살</p>`// 백틱을 사용하여 문장 생성
$('#q2').append(temp_html) // 만들어진 HTML 문장을 q2에 하나씩 추가
})
}
2주차 강의를 듣고
처음에는 console.log()나 let, 배열, 딕셔너리 같은 기본 문법이 익숙하지 않았지만, 하나하나 직접 코드를 실행하고 결과를 눈으로 확인하면서 점점 이해가 됐다. 특히 변수, 반복문, 조건문 같은 개념은 다른 언어에도 공통적으로 등장한다는 점에서 기초를 잘 잡아두면 도움이 될 것 같다. 그리고 어쩌다 알게 됐는데 어려울 때마다 // 를 활용해서 설명을 읽어보니까 이해하기 훨씬 수월했다. letname=a['name']// 현재 항목의 name 값을 변수 name에 저장 이 변수에 대한 부분은 머리로는 어떤 의미인지 이해했는데 말이 참 어렵게 느껴지고 설명하기 뭔가 난해하게 느껴진다. 자꾸 반복하고 들여다보다보면 온전한 내 것이 되지 않을까 한다.
웹개발 종합반 3주차 수강 시작!
POSTBOX 열고 닫기와 CARD 생성해보기
functionopenclose() { // 영화 기록하기 버튼 클릭 시 박스 열고 닫기
$('#box').toggle(); // jQuery를 사용하여 박스의 표시 상태를 토글합니다.
}
functionmakecard() { // 영화 기록하기 버튼 클릭 시 카드 생성
letimage = $('#image').val();
lettitle = $('#title').val();
letcomment = $('#comment').val();
letstar = $('#star').val();
lettemp_html = ` // 카드 HTML 템플릿
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`;
$('#card').append(temp_html); // 카드 요소를 추가합니다.
}
전에 만들어봤던 '나만의 추억 앨범' 페이지와 '스파르타플릭스' 페이지에서 실습해봤다.
직접 반복해서 만들어보니 확실히 눈에 익고 손에 익는 느낌이다.
클라이언트와 서버의 개념 이해하기
클라이언트 : 우리가 사용하는 스마트폰, 앱, 브라우저 등을 통해 요청하는 것
서버 : 클라이언트의 요청을 받고 응답하는 것
API : 클라이언트와 서버가 데이터를 주고받기 위한 약속된 통신 방법
클라이언트
“서울 날씨 알려줘요!” 하고 서버에 요청을 보냄
서버
“서울은 맑아요☀️” 하고 응답을 돌려줌
API
“이 주소로 이렇게 요청하면 날씨 알려줄게”라고 정한 약속
GET
정보를 요청할 때 사용하는 방식. URL 뒤에 데이터 붙여서 보냄
Fetch
웹에서 서버에 데이터 요청을 보내고, 응답을 받아오는 기능을 하는 자바스크립트 내장 함수이다
temp_html = `<li class="bad">${gu_name}: ${gu_mise}</li>`; // bad 클래스 추가
} else { // 그렇지 않으면
temp_html = `<li>${gu_name}: ${gu_mise}</li>`; // 일반 리스트 아이템
}
$('#names-q1').append(temp_html); // 구 이름과 미세먼지 지수를 HTML에 추가
})
})
};
처음엔 어렵지만, 구조만 익히면 복붙해서 조금씩 바꾸기만 해도 쓸 수 있을 것 같다.
서버에서 미세먼지 농도나 현재 기온 같은 실시간 정보를 받아오는 걸 보면서 “진짜 웹 개발하는구나” 하는 실감이 들었다.
3주차 과제 도전
처음 HTML과 Bootstrap을 다루기 시작할 때는 구조도 많고 클래스 이름도 헷갈렸지만, 직접 한 줄씩 만들어보면서 이런 식으로 하는 감이 생겼다. 버튼, 카드, 폼 등을 일일이 꾸미지 않아도 Bootstrap 클래스를 활용하니 쉽게 깔끔한 디자인을 완성할 수 있어서 신기했다. 코드가 100줄, 200줄 넘다 보니 나중엔 내가 어디에 뭘 썼는지 헷갈릴 때가 있었다. 하다보면 익숙해지는 것도 있겠지만 작업할 때 깔끔하게 내가 알아볼 수 있도록 만드는 연습도 필요해보인다. class="p-5 mb-4 rounded-3" 이렇게 여러개가 적혀있다보니 전체를 복사 붙여넣기해서 위치를 조정해보려다가 한참 헤맸다. 지워도보고 여러가지 해보다가 rounded-3을 적고 적용했더니 폰트가 들어가길래 된줄 알았더니 rounded-3 가 있는 모든 클래스에 적용이 되는 걸 알게 되어서 고민해봤는데, 결론은 너무 간단했다. 저 많은 친구들과 무관하게 class="abc p-5 mb-4 ......" 그냥 쟤네 앞에다 새로 하나 넣어주고 .abc { 이렇게 작업해주면 되는 거였다. 과제를 하면서 단순히 강의만 따라가는 게 아니라, 직접 부딪혀보고, 에러가 나면 왜 그런지 찾아보고, 해결해보면서 내가 무엇을 알고 있고, 무엇을 모르는지 스스로 점검할 수 있었고, 하나씩 해결할 때마다 작은 성취감도 느꼈다. 내가 직접 답을 찾아가는 과정이 실제로 개발자로 성장하는 데 가장 중요한 훈련과 배움의 시간이라고 생각된다.
