TIL | 04

[본캠프 4일차]

 

24.12.27 Today I Learned💡

1.  데일리 미션

2.  데일리 스크럼 - 26일 미션2

3. 4, 5주차 강의

---

데일리 미션

 

미션1️⃣ 

새로운 용어 정리 중 헷갈리는 내용

 

📌 동기 방식(Sync.) vs 비동기 방식(Async.)

동기 방식은 작업을 순차적으로 처리하며, 다음 작업을 실행하기 위해 이전 작업의 완료를 기다린다.

비동기 방식은 작업을 독립적으로 실행하며, 다른 작업을 실행하면서 작업의 완료를 기다리지 않는다.

 

📌 AJAX(Async JavaScript and XML)

자바스크립트의 라이브러리 중 하나이며 비동기식 자바스크립트와 XML의 약자이다.

전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법으로,
자바스크립트로 서버에 데이터를 요청하는 것이다.

XML은 데이터를 표시하고 교환하기 위한 마크업 언어로 HTML과 유사하지만,

미리 정의된 태그가 없어 필요에 따라 태그를 직접 정의할 수 있다. 

참고: https://aws.amazon.com/ko/what-is/xml/

XML이란 무엇인가요? - Extensible Markup Language(XML) 설명 - AWS

 

다른 팀원 분의 답변을 함께 살펴보다가 아래와 같은 답변을 보고
보통 클라이언트 통신에서는 비동기 방식을 통해 여러 프로세스를 동작하게 하고, 요청받는 값에는 await를 통해 값을 받아온다.
await에 대해 이야기를 나누었다.

4주차 쯤 강의에서 

await addDoc(collection(db, "movies"), doc);

let docs = await getDocs(collection(db, "movies"));

부분에서 await 문법이 궁금했는데,
await를 사용하면 서버에 요청한 값을 받고 나서야 다음 문법이 진행된다고 설명해주셨다. 👍

 

미션2️⃣

웹개발 종합반을 수강하면서 배웠던 내용의 최종본을 갖고 응용했다.

나의 다짐 사이트

 

 

데일리 스크럼

 

내가 한 과제 페이지

 

다른 팀원분들의 이야기를 들어보니 나의 모자른 부분.. 도 보였고
같은 화면이지만 서로 다른 코딩방법을 살펴볼 수 있었다.
너무 재밌자나..☺️

 

📍수정 및 깨달은 내용
1. (제목 밑 소개글)줄 바꿈 방식:

<p> 대신 <br> 태그를 활용할 수 있음.

 

2. 화면 크기 조정:
개발자 도구에서 아이콘 클릭 시 화면 크기 조정 가능.
예시: @media (max-width: 768px) 활용하여 모바일 사이즈에 맞게 CSS 변형 가능 (수민님의 코드 참고).

 

 

---

 

 

내일 할 일

1. 프론트엔드 기초 강의 수강

2. 미니 프로젝트 발표회