[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

[JS] 클래스 상속 / 클로저

자식 클래스가 생성자를 오버라이딩 하는 경우자식 클래스의 생성자가 호출됐을 때 무조건 부모 클래스의 생성자도 호출된다. 그런데, 자식클래스가 생성자를 오버라이딩 하는 경우가 생긴다.class Car { constructor (name, type, price) { this._name = name; // ...생략 }}class ElectronicCar { constructor (name, price, chargeTime) { super(name, 'e', price); this._chargeTime = chargeTime; } set chargeTime(value) { this._chargeTime = value; }}const elecCar = new Electr..

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

[24.07.28] 오늘 알게된 것들

클릭한 요소의 ID 출력하기필수 구현요소였던 alert 창으로 영화 ID 띄우는 기능!오늘의 작업을 시작하기 전 지난 요소들이 잘 작동하고있는지 확인을 해봤는데 영화 ID가 출력되지 않는 것을 발견했다.1) 각 영화 데이터를 불러올 때 ID가 잘 받아지고있는지 출력해봄 -> 아주 잘 들어오고있다.2) 클릭한 이벤트의 id를 콘솔 출력 -> 아무것도 없다!3) 클릭한 이벤트의 돔 요소를 출력 -> 영화 카드가 아니라 마지막에 추가했던 영화 제목 등이 보이는 infoLayer가 출력됐다! 내가 영화 id를 추가한 요소는 그 상위 요소인 movieCard 였기 때문에 infoLayer에는 id가 없고, 그래서 아무것도 출력되지 않은 것이다. 시도1) infoLayer css pointer-events:none..

• format_list_bulleted 일지
• · 2024. 7. 29.
• textsms