3주차 WIL(개인 프로젝트, 팀 프로젝트)
한 주를 대체휴일로 시작하고 나서인지 앞 선 2주 보다 더 빨리 지나갔다.
강의를 듣고 - 이를 토대로 개인 프로젝트를 진행하는 거라 팀원 간의 유대가 거의 안생겼던 한 주였던거 같다.
그래도 공지나 개인 프로젝트 리뷰를 위해 대화를 만들고 이어가려고 해봤다.
물론 일찍이 마무리한 팀원도 있었지만 저장하다가 프로젝트가 엎어진 팀원, 각 스텝을 전혀 밟지 못 하는 팀원 등 다양했다. 엎어진 팀원은 이전의 작업을 보여줬을 때 충분히 잘 해나가고 있는거 같아서
최대한 편의를 이해해주면서 시간을 넉넉하게 갖게끔 리뷰 시간을 여유있게 가져서 괜찮았는데,
아예 시작조차 힘들어하는 팀원은 마무리만 하고 도와주려고 했지만,
튜터님과 기나긴 튜터링 시간을 오래 보낸 후 완료했다는 이야기를 들었다.
사실 그리 오래 걸리는 스텝들은 아니라 조금만 방향을 잡아주면 초보자도 어느정도 해낼 수 있다고 생각했다.
그래도 다행이였다.
팀원들 프로젝트 중 한개를 선별하여 이를 디벨롭 하는게 팀프로젝트인데
card를 클릭 시 각 card 해당하는 상세 페이지 구성 (다시 홈으로 돌아오는 UI 구현 포함) ,
이 페이지에 리뷰를 작성 가능하게 구현하는데, 작성자 - 리뷰 - 확인 비밀번호를 localStorage에 적재하고
요청시 삭제도 가능하게 구현하는 것이다.
기본 바탕은 이번주에 마무리 된 거라 시멘틱한 코드를 구성한 팀원의 코드로 구성을 하는게 좋을거 같다는 생각이다.
목요일 13시까지니까 촉박하다면 촉박한데 빠르게 정리해서 진행하면 충분할 거 같다는 생각도 꽤 든다.
이렇게 한 주를 정리해보고
*문법 몇 개 memo
* forEach
const movieCards = document.querySelectorAll(".movie-card");
movieCards.forEach((card) => {
const title = card.querySelector(".movie-title").textContent.toLowerCase();
if (title.includes(searchKeyword)) {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
* form 내부에서 input 과 button 의 동작
- form 태그에 submit 이벤트 핸들러가 있는 경우, input에 내용 입력 후 button 클릭 또는 Enter 입력 시 submit 이벤트 핸들러가 실행된다.
- form 안에 있는 button 태그에 type을 명시하지 않은 경우 기본 type은 submit 이며, submit이 아닌 다른 타입을 명시하면 버튼 클릭 시 submit 이벤트가 발생하지 않는다.
* async/await
- async 함수는 항상 Promise 를 반환한다.
- await 뒤에 있는 건 항상 Promise 다.
- await Promise 는 Promise Result를 반환하며 약속이행이 될 때 까지 기다린다.
async function printData() {
const response = await fetchData();
console.log("response: ", response)
const result = await response.json();
console.log("result: ",result); }
async function fetchData() {
const result = await fetch('https://jsonplaceholder.typicode.com/posts/1');
return result; }
printData();
* css Tip
/* 주로 테마 색상들은 변수로 관리 */
:root {
--bg-header-color: #ffe194;
--bg-card-color: bisque;
}
header {
background-color: var(--bg-header-color);
}