"QA 하셔야겠는걸요?!! 아주 꼼꼼히 알려주셔서 감사합니다!"
사전캠프 둘째 주 첫날인 오늘, 저번에 이어 강의 자료에서 오타를 한 개 더 발견했다. 마지막으로 다닌 회사에서 출판 예정인 교재를 펼친 다음 형광펜으로 한 글자씩 칠해가며 눈에 불을 켜고 오타를 잡아낸 날이 엊그제 같은데, 손에 밴 그 경험이 아직은 녹슬지 않았다. 담임 매니저님의 답장을 보고 교육업계의 QC(Quality Control) 직무와 비슷한 직무가 'QA(Quality Assurance)'라는 이름으로 IT 분야에도 있음을 깨달았을 때, 간질거리는 설렘으로 심장이 뛰었다.
공부하고 싶은 게 많다는 사실은 지금 하는 공부부터 제대로 하라는 채찍질과 같았다.
이조차 설렁설렁하면 다른 공부에선 어떻게 성과를 낼 수 있을까?
지독히도 코를 괴롭힌 감기가 마지막으로 기침이 되어 발악하는데, QA 직무를 알아갈수록 그 거슬림을 핑계로 대기 어려웠다. 지금 하는 백엔드 공부에서 햇사과같이 탐스러운 열매를 맺는다면, 그 다음엔 뭘 하든 해낼 수 있겠지.
이번 주에 할 일은 딱 하나다.
공부하자.
[습관 관련]
매일 아침 TIL을 정독하자.
fetch.then이 아니고 fetch(url).then이다.
.then(res => json)이 아니고 .then(res => res.json())이다.
별표(*)는 모든 요소를 선택하는 선택자, 즉 명찰이다.
매일 아침 그날까지 쌓인 TIL을 읽는다면, 머지않아 두 자릿수, 세 자릿수에 다다를 TIL 분량이 아찔해서라도 더 열심히 외우고 기억하려고 애쓸 것이다.
잊지 말자.
내일모레 Day 010이다.
[인용 및 참고 출처]
1 구글 검색: 네이버, "개발 분야 QA", QA란 무엇인가?, (2024.10.14)
2. 강의: 스파르타코딩클럽, "[왕초보] 웹개발 종합반", 강의 소개, (2024.10.14)
[학습 관련]
1. Fetch 연습 1: gu_mise 값이 40 초과일 때만 빨간색 입히기
① let temp_html = ``; 입력 ▶ 빈 값으로 설정
② 조건문 입력
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>
<script>
function q1() {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
$('#names-q1').empty();
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
①let temp_html = ``;
② if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
}
$('#names-q1').append(temp_html);
});
})
}
</script>
2. $(document).ready() 함수: document라는 객체가 준비되면, 즉 html 문서 로딩이 완료되면 실행되는 함수. 즉, 새로고침할 때 바뀌는 게 아니라 연결된 url의 데이터에 따라 바뀌는 것
$(document).ready(function () {
alert('안녕!');
})
3. Fetch 연습 2:
① <body>에서 '<p>현재 서울의 미세먼지 : 좋음</p>' 입력
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<p>현재 서울의 미세먼지 : 좋음</p>
<button onclick="openclose()">추억 저장하기</button>
</div>
▼ ① 결과
② <script>에서 $(document).ready() 함수 입력▼: 아래의 코드는 해당 url의 RealtimeCityAir의 row에 있는 첫 번째 딕셔너리의 IDEX_NM 값만 불러오는 것
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
})
})
③ <body>에서 <span> 태그 활용: <span> 태그는 <p> 태그 안에서 글자를 묶을 때 사용하는 태그로 입력했다고 웹 페이지에서 바뀌는 것은 없다.
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<p>현재 서울의 미세먼지 : <span>좋음</span></p>
<button onclick="openclose()">추억 저장하기</button>
</div>
④ <span>에 id 명찰 달아주기: <p>태그에 달면 '현재 서울의 미세먼지 : 좋음' 전체에 해당하기 때문에 <span>으로 바꾸고 싶은 특정 부분만 지정하면 훨씬 편하다.
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<p>현재 서울의 미세먼지 : <span id="msg">좋음</span></p>
<button onclick="openclose()">추억 저장하기</button>
</div>
⑤ <script>에서 '$('#msg').text(mise);' 입력: 텍스트를 바꾸어야 하기 때문에 .text() 함수 사용
<script>
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise);
})
})
4. <span> 태그에 값이 나오는 게 싫다면?: ▼ <span>과 </span> 사이에 있는 값을 지우면 된다.
[기타 사항]
드디어 내일 면담이다. 지금 웹개발 숙제도 허덕이는데, SQL에 JAVA의 존재를 깔끔하게 잊고 말았다. SQL과 JAVA가 언제 머릿속에 들어가냐고 아우성친다.
내일 반드시 어떻게든 숙제를 해내서 제출해야겠다.
'끝을 보는 용기' 카테고리의 다른 글
| Spring 사전캠프 Day 010 - [왕초보] 웹개발 5주차 완강 (0) | 2024.10.16 |
|---|---|
| Spring 사전캠프 Day 009 - [왕초보] 웹개발 4주차 완강, 3주차 숙제 끝, 면담, 책 『오늘부터 IT를 시작합니다』 읽기 60% (0) | 2024.10.15 |
| Spring 사전캠프 Day 007 - [왕초보] 웹개발 3주차 수강 (3-7) (0) | 2024.10.13 |
| Spring 사전캠프 Day 006 - 책 『오늘부터 IT를 시작합니다』 읽기 20% (0) | 2024.10.12 |
| Spring 사전캠프 Day 005 - [왕초보] 웹개발 3주차 수강 (1/2) (0) | 2024.10.11 |