프로젝트 소개1. 진행 기간: 2024.07.31 ~ 2024.08.06 (7일)2. 인원: 5명3. 개발 환경HTML5 / CSS / Vanilla JSFirebase (Auth, Firestore DB)TMDB API (영화 데이터 조회)4. 깃허브 GitHub - spmrsong/movieDiveContribute to spmrsong/movieDive development by creating an account on GitHub.github.com 5. 팀 노션 16조_코드다이브 | Notion4. 와이어프레임teamsparta.notion.site + 정리해서 팀원분들께 공유했던 기획 내용 6. 와이어프레임 FigmaCreated with Figmawww.figma.com 구현 기능1. ..
css 최우선순위 속성 적용, 구글 아이콘 속성 적용하기구글폰트의 심볼&아이콘에서 임포트해온 아이콘이 기본 속성에의해 색상, 폰트 사이즈 변경이 먹히지 않았다. 자바스크립트로 스타일 속성을 적용해보니 태그에 직접 스타일이 추가되면서 속성이 적용됐는데, 그 때 아예 스타일 적용이 되지 않는게 아니라 우선순위 문제구나 하는 걸 깨달았다. css 파일에서 !important 를 지정해주었다!.saveButton { /* 생략 */ text-shadow: 0px 0px 3px black !important; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;} 중첩된 요소간 이벤트 버블링 막기위 요소들은 영화 카드..
자바스크립트 엔진자바스크립트 엔진 = 자바스크립트를 읽고 동작시키는 프로그램기존에 사용하던건 크롬 브라우저의 V8기존의 V8을 발전시켜 다른 환경에서도 사용할 수 있게 만들어 준것이 node.js고, 이걸 자바스크립트 런타임이라고 함 자바스크립트 실행 순서1) 실행 컨텍스트 생성2) 전역 컨텍스트 평가 스택에 추가3) 함수 컨텍스트 평가 스택에 추가4) 내부 함수까지 평가를 마쳤다면, 이벤트 루프에 밀어넣고 큐에 추가5) 동기/비동기 나눠서 수행 후 일이 끝났다면 스택을 하나씩 걷어낸다6) 스택을 모두 걷어내면 끝! 실행되는 방법1) 실행컨텍스트 = 자바스크립트를 실행하는 전체적인 맥락자바스크립트 엔진은 전역 스코프를 제일 먼저 평가함콜스택에 가장 먼저 전역 스코프가 쌓인다선언부 확인: 변수, 함수 선언..
Scope: 변수와 함수가 유효한 범위, JS에서는 주로 함수 스코프와 블록 스코프가 사용된다! 함수 스코프함수 내에서 선언된 변수는 함수 내에서만 유효하다function foo() { var x = 'local'; console.log(x); // x}foo();console.log(x); // 유효한 x가 없음! reference errorif(true) { var secret = '12345';}console.log(secret); // 12345 if문은 함수가 아니기 때문에 { } 영향 X 블록 스코프{ } 로 감싸진 블록 내에서만 유효하다! let, const는 블록 스코프를 지원한다.{ let y = 'block scoped'; console.log(y); // block..