Spring 사전캠프 Day 010 - [왕초보] 웹개발 5주차 완강

숙제를 확인한 오늘 바로 제출하다니!

 

숙제와 씨름하느라 TIL 작성 시간이 늦었지만, 어제까진 마감에 쫓겼다면 오늘은 여유가 생겼다. 운동과 저녁 식사를 마친 뒤에 다시 책상 앞에 앉았을 때 여덟 시 반을 향해 가는 시계를 보고도 느긋했다. 마음속이 잔잔한 물결과 같았다. 허둥지둥 글 분량을 채우는 데 급급하지 않고 차분하게 마무리 짓는 느낌이 기분 좋게 간지럼을 태운다.

▲ 위와 같이 작성한 내용이 새로고침 버튼을 눌러도 사라지지 않는다.

▲ 구글의 파이어베이스(Firebase)에 잘 저장된 점을 확인할 수 있다.

▲ 르탄이가 성에 무사히 도착했다. 방방 뛰는 모습이 귀엽다.

 

내일배움캠프에 참여한 지 열흘 만에 강의 하나를 다 들으니 르탄이만큼 기쁘다. 지금처럼 무리도 포기도 하지 말고 일정한 속도로 걸어야겠다. 매일 한 발짝이라도 앞으로 내딛어야겠다.

 

[습관 관련]

계획은 듬성듬성하게 세우자.

 

변수가 끼어들어도 괜찮도록.

 

[왕초보] 웹개발 강의를 이번 주말까지 들으려고 했는데 그보다 빨리 마쳤다. 만약 조급한 마음에 쉴 틈 없이 공부하기로 계획했다면 오늘 같은 행복은 느끼기 어려웠을 거다. 학생들한테도 계획표를 작성할 때 질병 같은 변수를 고려해서 하루에 너무 많은 걸 공부하려고 하지 말라, 그렇게 잔소리했으니 내뱉은 말에 앞으로도 쭉 책임을 져야 한다.

 

초조한 마음이 들 때면, 이 뿌듯한 하루를 떠올려서 빠듯한 계획을 머릿속에서 밀어내야겠다. 

 

[인용 및 참고 출처]

1. 강의: 스파르타코딩클럽, "[왕초보] 웹개발 종합반", 강의 소개, (2024.10.16)

2. 구글 검색: 티스토리, "비동기 동기", 동기와 비동기의 개념과 차이, (2024.10.16)

3. 구글 검색: velog, "동기 비동기", 동기, 비동기란?, (2024.10.16)

4. 구글 검색: 티스토리, "개발에서 task", task의 의미, (2024.10.16)

 

[학습 관련]

1. 3주차 숙제 관련: <h1>에 class 명찰을 붙여서 <style>에 글꼴 쓰는 법 외에 <h1>에 바로 적용할 수 있었다. 꼭 기억하자.

<style>

    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

 

    * {

        font-family: "Gowun Dodum", sans-serif;

    }

    .jumbotron {

        font-family: "Black Han Sans", sans-serif;

        font-weight: 800;

        font-style: normal;

    }

▲ 이렇게 해도 잘 적용되었지만,

<div class="jumbotron-message">

    <h1 class="display-5 fw-bold" style="font-family: 'Black Han Sans', sans-serif; ">스파르타 푸드파이터</h1>

    <p class="col-md-8 fs-4"> 본인만의 맛집을 소개하는 사이트입니다.

        <br>맛집을 소개해 주세요!

    </p>

</div>

▲ 손목은 소중하니까. <h1>뿐만 <h2>,<h3> 같은 태그를 꾸밀 때도 바로 style을 입력해야겠다. 

 

2. 코딩은 어떻게 공부해야 하는가?: 처음부터 논리를 모두 이해하려고 애쓰기보다는 직접 많이 해보기가 지름길!

 

3. async? await?: 자바스크립트(Javascript)에서 비동기 작업을 처리할 때 사용하는 키워드 

ⓐ 동기 vs 비동기: 요청과 그 결과가 동시에 나와야 한다면 동기, 그렇지 않으면 비동기 

ⓑ 동기(Synchronous): 직렬로 행위(task) 수행. 즉, 순서대로 진행되며, 이전 작업이 완료되어야 다음 작업이 진행됨 ▶ 비유: 손님이 식당에 와야 음식이 나옴.

ⓒ 비동기(Asynchronous): 병렬로 행위 수행. 즉, 여러 작업이 동시에 실행될 수 있으며, 한 작업의 완료를 기다리지 않고 다음 작업 진행 가능.

 

4. 스크래핑(Scraping): 웹 페이지의 특정 부분에서 필요한 정보를 추출하는 작업

 

5. 파이썬(Python)을 왜 사용하는가?: 서버를 완전히 컨트롤할 수 있음. 즉, 서버 주인이 자신만의 방식으로 서버 구축 및 관리 가능.

 

6. 5주차 숙제 관련: 별점이 숫자로 나올 때는 value가 숫자로 적히진 않았는지 확인하자.

<option selected>별점 선택</option>

<option value="1">⭐</option>

<option value="2">⭐⭐</option>

<option value="3">⭐⭐⭐</option>

<option value="4">⭐⭐⭐⭐</option>

<option value="5">⭐⭐⭐⭐⭐</option>

▲ 여기서 value가 전부 숫자라서 웹 페이지에서도 숫자로 표시된다. 따라서,

<option selected>별점 선택</option>

<option value="⭐">⭐</option>

<option value="⭐⭐">⭐⭐</option>

<option value="⭐⭐⭐">⭐⭐⭐</option>

<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>

<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>

▲ 숫자를 모두 별로 바꾸어야 웹 페이지에서도 별점으로 표시된다.

 

7. 오류가 발생한 까닭을 못 찾겠으면, 강의 자료와 대조하자!: 어느 강의 어느 부분에서 해결책을 찾을 수 있는지 기억하기만 해도 공부를 열심히 했다는 뜻이 된다. 같은 100분이라도 한 번에 몰아서 쓰기보다 십 분을 열 번 쏘개서 쓰는 편이 훨씬 낫다.

 

[기타 사항]

내일부터 드디어 자바(JAVA)를 공부한다. 자기 전에 여태까지 쓴 TIL을 다시 정독해야겠다.