[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.26] 헤매고 또하고 헤매고 다시하고

생각보다 기능 분리하는게 헷갈려서 꽤 오래걸렸다..🥹 그래도 계속계속 하다보면 늘겠지.. js 파일 모듈화하기api로 데이터를 가져오는 것에 감이 잡히질 않아 처음에는 데이터를 받아오고, HTML 구조로 출력하는 것을 모두 하나의 파일에서 처리하도록 작성했다. 테스트를 조금 거치면서 내가 작성한 코드의 흐름이 이해가 돼서 분리를 해보긴했는데.. 정상적으로 작동도 하지만 고민이 생겼다 지금 분리한 구조는 app.js에서 tmdb.js의 fetch()를 호출 -> fetch가 마무리되면 movie.js의 함수를 호출해 데이터로 HTML 구조를 추가함 각 함수를 불러오는 건 app.js인데 데이터는 tmdb.js에서 가져옴어차피 tmdb.js에서 fetch한 데이터를 export해뒀고, 그걸 app.js가 ..

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

[JS] 참조타입의 변형을 막는 방법 (freeze, seal)

참조타입(객체)은 속성을 추가/제거하거나 값을 변경하는 등 여러 변경이 일어날 수 있다.만약 어떤 객체가 더이상 변경되지 않도록 막고싶다면 경우에따라 freeze(), seal()을 사용할 수 있다. freeze() - 모든 변경을 막는 경우새로운 속성 추가/제거, 속성의 값 변경을 포함한 모든 변경을 막는다. 설정 가능 여부, 쓰기 가능 여부가 모두 거짓이 된다!또한 변경을 막은 객체를 반환한다. const obj = { prop: 42,};const returnObj = Object.freeze(obj);obj.prop = 33; // 처리X, 에러발생Xconsole.log(obj.prop); // 42console.log(obj === returnObj); // true  seal() -..

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

[JS] 배열이 조건을 만족하는지 확인하기 (every, some)

오늘은 달리기반 수업에서 얕은 복사 깊은 복사를 복습하고 배열 메서드와 객체 메서드를 추가적으로 알아보았다.배열의 요소들이 특정 조건을 만족하는지 확인하기 위하여 배열 메서드인 every()와 some()을 활용할 수 있다! every() - 모든 요소가 조건을 만족하는지 확인하기콜백함수로 참과 거짓을 판단하고 모든 요소가 참일 때 true를 반환한다. 그렇지 않은 경우 false!콜백함수는 순차적으로 요소에 적용되면서 이번 순서의 요소, 이번 요소의 인덱스, every()를 호출한 배열을 매개변수로 받는다. const arr1 = [1, 20, 30];const arr2 = [100, 200, 300];function isBiggerThan10(element, index, array) { retu..

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

협업을 위한 Prettier 설정하기

prettier! 자바스크립트 공부를 시작하면서 계속 사용해오던 코드 포맷터다. 크게 신경쓰지 않아도 자동으로 코드 스타일을 정리해줘서 정말 편리하다. 지난 미니 팀프로젝트에서 팀원분의 제안으로 prettier를 다함께 설정해 시작했지만, 개인마다 다른 환경과 확장 프로그램 영향인지 배열만 다른 코드가 변경사항으로 push/pull 되는 경우가 종종 있었다. 제대로 적용된다면 너무 편할 것 같아서 다음 팀프로젝트에는 적용해보고싶었는데, 개인 프로젝트를 시작하는 김에 협업용으로 설정하는 방법을 알아보았다.  패키지 설치npm install --save-dev --save-exact prettier 터미널을 통해 prettier 패키지를 설치한다.  .prettierrc.js 생성echo module.exp..

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

[JS] Generator 로그 순서 이해하기

generator에대해 공부하다가 generator 객체는 어떤 식으로 출력이 되는지 궁금했다.그래서 콘솔에 로그를 찍어보았는데 로그가 찍히는 순서가 예상과 달라 고민에 빠졌다.. const addCoffee = function(prevName, name) { setTimeout(function() { coffeeMaker.next(prevName ? prevName + ", " + name : name); }, 100);};const coffeeGenerator = function* () { const espresso = yield addCoffee("", "에스프레소"); console.log(espresso); const americano = yield..

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