팀프로젝트 - 영화검색사이트 만들기

프로젝트 소개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. ..

• format_list_bulleted 프로젝트/팀 프로젝트
• · 2024. 8. 7.
• textsms

[24.08.06] 팀프로젝트 6일차

내일은 발표! 오늘 마무리를 하고 발표준비를 하기로 했다.발표하며 소개할 내용들을 정리하고있는데 담당 튜터님이 오셔서 코드를 보며 개선할 부분을 짚어주셨다.더보기1. 테스트용 console.log 지우기2. config/URL 등 상수들 하나의 파일에 모아 임포트해 사용하기3. 함수 내부와 함수 호출에서 사용하는 변수명이 다를 경우 의미를 정확하게 할 수 있는 이름이 무엇일지 생각해보기4. 구조분해할당 사용해서 fetch한 데이터들 더 가독성 좋게 받아보기5. 댓글 시간 2024-08-06과 같은 양식으로 출력하는 방법 -> toISOString으로 받아 어떻게 그 부분만 받아 사용할 수 있을지 고민해보기 (split, slice 활용)6. 주석 작성 습관 계속 가져가기 bbb -> 추후 주석을 자동으로..

• format_list_bulleted 일지
• · 2024. 8. 6.
• textsms

[JS] 자바스크립트 실행 컨텍스트

자바스크립트 엔진자바스크립트 엔진 = 자바스크립트를 읽고 동작시키는 프로그램기존에 사용하던건 크롬 브라우저의 V8기존의 V8을 발전시켜 다른 환경에서도 사용할 수 있게 만들어 준것이 node.js고, 이걸 자바스크립트 런타임이라고 함 자바스크립트 실행 순서1) 실행 컨텍스트 생성2) 전역 컨텍스트 평가 스택에 추가3) 함수 컨텍스트 평가 스택에 추가4) 내부 함수까지 평가를 마쳤다면, 이벤트 루프에 밀어넣고 큐에 추가5) 동기/비동기 나눠서 수행 후 일이 끝났다면 스택을 하나씩 걷어낸다6) 스택을 모두 걷어내면 끝! 실행되는 방법1) 실행컨텍스트 = 자바스크립트를 실행하는 전체적인 맥락자바스크립트 엔진은 전역 스코프를 제일 먼저 평가함콜스택에 가장 먼저 전역 스코프가 쌓인다선언부 확인: 변수, 함수 선언..

• format_list_bulleted JavaScript
• · 2024. 8. 2.
• textsms

[24.07.31-24.08.01] 팀프로젝트 1, 2일차 (부제: 정말 다양한 깃오류들..)

팀프로젝트가 시작됐다! 어떤 주제일지 궁금했는데 화요일까지 진행했던 개인프로젝트를 팀에서 하나 선정해 디벨롭시키는 것이 과제였다. 어떤 기능들을 추가로 구현할지, 어떻게 구현할지 정리하며 회의를 정말정말 오래 했다. 구현 기능 + 와이어프레임 회의왓챠 넷플릭스 티빙 등등 여러 레퍼런스들을 참고해가면서 와이어프레임을 짰다.엄청 뭐가 많고 이것저것 있었는데 ㅋㅋㅋㅋ 피그마 고수 팀원분이 계셔서 깔끔하게 정리해주셨다 짱 ㅎㅎㅎ 이야기를 나누다보니 팀원들 모두가 한번도 구현해보지 않은 기능을 손대게 되었다. 욕심이 나면서도 걱정되는 분위기였어서 조금 정리를 하기위해 내가 이야기한 기능들과 우선순위를 정리하고 확인을 요청드렸다. 또 구현할 기능 이야기를 하면서 api에서 특정 정보를 가져오는 것이 가능한지 이야기..

• format_list_bulleted 일지
• · 2024. 8. 2.
• textsms

[JS] Scope, Class, this 바인딩

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..

• format_list_bulleted JavaScript
• · 2024. 7. 31.
• textsms

[CSS] Safari z-index

개인프로젝트 진행 중 사파리에서 z-index를 설정해둔 요소가 생각대로 보이지 않는 것을 발견했다! css animation을 이용한 물결치는 효과가 타이틀을 가리지 않게 하기위해 z-index를 적용해주었는데, safari는 그대로 가려진다😶‍🌫️  시도이 외에도 폰트사이즈, 물결 애니메이션의 위치가 다르게 나타나는 것은 과제 해설 영상에서 소개해주신 reset.css를 적용해 해결했지만 위 현상은 해결되지 않았다.혹시 글자에만 인덱스를 적용한 것이 문젠가 싶어서 wave에도 각각 인덱스를 줘봤지만 해결되지 않았다.검색해보니 safari의 z-index 문제는 꽤 흔하게 일어나는 문제인 것 같다.  원인safari가 다른 브라우저와 렌더링 알고리즘이 달라 발생하는 문제다. 특히 두개 이상의 요소에..

• format_list_bulleted HTML + CSS
• · 2024. 7. 30.
• textsms