간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest]이번 리팩토링은 firebase 모듈을 `js` 파일 하나하나에서 전부 초기화를 해주고, firebase 전체를 import해서 사용하던 부분을 정리해보았다. firebase 모듈을 초기화하고 import하는 코드만 20~30행 정도를 차지하는데 싹다 밀어버렸다. 💡 기존 구조import { initializeApp } from "https://www.gstatic...
프로젝트를 진행하던 중 고민거리가 하나 생겼다. 바로 모듈화된 자바스크립트 파일끼리의 데이터 공유방법이다. 예시 프로젝트 구조를 살펴보자. // api.jsexport const MAX_VALUE = 10// a.jsimport {MAX_VALUE} from 'api.js'const 갖고싶은변수 = 20;/* 각종 코드 ... */// b.jsimport {MAX_VALUE} from 'api.js'/* 각종 코드 ... */위와 같은 프로젝트가 있다고 가정 했을 때 둘 다 `constant`의 변수에 `import`를 해서 접근 한다. 하지만 어느 날 b에서 a의 변수 딱 하나, 더도 말고 딱 하나 `갖고싶은변수`에 접근이 필요할 경우가 생긴 것이다. 하지만 `type=module` 로 정의된 자바스..
단축평가자바스크립트에서 단축평가란 논리합(`||`) 또는 논리곱(`&&`)을 사용하여 조건식을 판별하는 과정에서 연산을 조기에 종료하는 것이다. 모든 조건을 판별하지 않고 최종 결과가 나오는 경우에 판별을 중단한다. 💡좌변, 우변논리연산자의 단축 평가를 알아 보기 전에 좌변, 우변의 개념부터 알아야 한다. 아주 간단하다. 논리연산자의 왼쪽에 있는 것을 좌변, 오른족에 있는 것을 우변이라고 칭한다. true || console.log('좌변이 false일 때 찍힘')위 예시에서 `true`는 좌변, `console.log()` 는 우변이다. 그럼 본격적으로 각 연산자의 단축평가 방식을 살펴보자.💡 논리합(OR) 단축평가`||` (OR) 연산자는 좌변이 참(truthy)일 경우 전체 표현식의 결과가 참..
혹시 자바스크립트에서 값이 있다, 없다를 구분하려면 `값 === undefind` 이런거 쓰고 있지는 않나 생각을 해보자. 근본적인 방법이지만 타이핑 하기 귀찮고, 괜히 없어보일수도 있다. 그럴 때 `truthy`와 `falsy` 값을 구분하면 훨씬 간결하고 효율적으로 쓸 수 있다. 💡 간결한 조건 처리function func(a) { if (a) { console.log('truthy') } if (!a) { console.log('falsy') }}// falsy 출력func(null);func(undefined);// truthy 출력func('null');func(123);값이 정의되지 않은 변수처리를 할 때 조건문을 `(값 === undefind || 값 === null || 값 ..
restrest문법은 spread문법과 생긴건 똑같다. 기능적으로는 완전히 반대의 역할을 수행한다. spread문법이 배열이나 객체의 요소를 펼쳐서 평탄화를 시켜준다면, rest는 반대로 펼쳐있는 값들을 배열로 묶어준다. 💡 우리가 알고있는 매개변수 받을 때 모습 function normal(a, b, c, d) { console.log(a, b, c, d);}normal(1, 2, 3, '사'); // 1 2 3 사 💡 rest를 사용해서 매개변수 받을 때function rest(...rest) { console.log(rest);}rest(1, 2, 3, '사'); // [ 1, 2, 3, '사' ]배열이 아닌 기본 리터럴을 전달해주었지만 받는 쪽에서 `...`을 붙여서 받게 되면 ..
구조 분해 할당구조 분해 할당(Destructuring)은 객체나 배열의 속성을 분해하여 변수에 값을 쉽게 할당 및 추출할 수 있는 문법이다. 특히 함수의 매개변수가 많아질 때 사용하면 아주 기분이 좋아진다. 가독성과 유지보수가 좋아진다. 기본 문법const obj = { name: "길동", age: 30,}const { name, age } = obj;console.log(name, age); // 길동 30`name`과 `age` 속성이 있는 `obj`객체를 정의'`const {name, age} = obj`': `obj` 속성에 정의된 값들을 `name`과 `age`에 할당이 때 `obj` 의 속성명과 같은 변수에 값을 할당순서는 상관 없음변수가 더 많거나 적어도 상관 없고, 속성명..
💡 Set 완전 100% 리얼 기초 문법 보기 [JS] Set | 배열에서 중복되는 값 지워줘~SetSet은 자바스크립트에서 기본적으로 지원하는 어쩌구 저쩌구 ... 배열에서 중복되는 값을 없애준다. const arr = [1, 2, 2, 2, 2, 2, 2, 2, 3];const set = new Set(arr);console.log(set); // Set(3) { 1, 2, 3 } : 중복은reactjy2.tistory.com이전에 Set을 이용해서 배열의 중복되는 값을 제거하는 방법을 알아봤지만 사실 개발하다보면 저런 단순한 1차원 배열에 값만 띡띡 들어있는 데이터보다 조금 더 복잡한 형태의 데이터를 다루는 일이 많다. (아마도) 예를 들어 .. JSON으로 데이터를 처리할 때 대충 이렇게 생..
SetSet은 자바스크립트에서 기본적으로 지원하는 어쩌구 저쩌구 ... 배열에서 중복되는 값을 없애준다. const arr = [1, 2, 2, 2, 2, 2, 2, 2, 3];const set = new Set(arr);console.log(set); // Set(3) { 1, 2, 3 } : 중복은 제거 되었지만 Set 형태로 반환되었다.console.log([...set]); // [ 1, 2, 3 ] : 전개 연산자를 사용해서 다시 배열로 강제 전환 시켜준다.💡 Set으로 배열 안의 중복된 객체 지우기 [JS] Set | 객체가 들어있는 배열에서 중복되는 값을 지워줘~💡 Set 완전 100% 리얼 기초 문법 보기 [JS] Set | 배열에서 중복되는 값 지워줘~SetSet은 자바스크립트에서..
클래스자바스크립트에서 클래스는 객체 지향 프로그래밍을 구현하는 문법적 구조이다. 클래스를 사용하여, 속성과 메서드를 정의할 수 있다. 클래스 정의class Person { constructor(name, age) { this.name = name; this.age = age; } printName() { console.log(`반갑다, 내 이름은 ${this.name} 그리고 나이는 비밀이야`); }}`class Person`: Person이라는 클래스를 생성함. 클래스 명은 PascalCase로 작명함 (국룰임 안지키면 혼남)`constructor(속성1, 속성2 ...)`: 클래스의 `인스턴스` (뒤에 설명) 를 생성할 때 자동으로 호출되는..
this`this`는 자신이 속한 객체를 참조하는 변수이다. (자기 자신(객체)을 참조한다.) 상황에 따라 참조하는 객체가 달라지는데 호출하는 주체가 있을 경우 해당 주체를 가리키게 되고, 호출하는 주체가 없다면 전역객체를 가리킨다. 호출하는 주체?설명하기 귀찮 어려우니 예시를 보도록 해요.// 메서드(객체 안의 함수)로서의 호출은 this 바인딩 OK const obj = { name:"길동", age:30, print: function(){ console.log(this.name, this.age); }}obj.print(); // 길동, 30 출력`obj`의 `print` 속성에는 함수가 저장되어 있다.`print` 를 호출하려면 어떻게 해야하나? => obj..
개인 프로젝트 진행중 내가 짠 코드가 너무나도 마음에 들지 않아서 코드 수정을 해보았다.(이번에도 박학하신 튜터님께 많은 도움을 받았음) 어쨋든 이번 글은 100% 기록 목적이고 수정한 영역에 대해서 아직 완전히 이해를 한게 아니기 때문에정리가 아주 중구난방일 것이다는 예고 (대충 정리하겠다는 소리 맞음)기존 코드// api 데이터 가져오는 함수 (fetchData)async function fetchData(searchCriteria, searchKey, processData) { const data = await fetch(.......) // api 데이터 받아옴 processData(data) // 받은 데이터를 콜백함수로 다시 전달}// 호출한 부분 (순서대로 인기, 장르, 개봉예정 영화 ..
DOMDOM은 HTML 문서를 구조화 해놓은 객체이다. 자바스크립트로 HTML의 요소에 접근해서 읽기, 쓰기, 수정, 삭제 등의 행동을 할 때 직접 HTML 요소에 접근하는 것이 아니라 DOM에 접근해서 다루는 것이다. 대충 이론은 여기까지 하고 몇 번쓰다보면 개념은 충분히 이해 되지만 메서드같은게 너무 많기 때문에 쓸 때마다 뭐였지? 하고 다시 검색해서 쓰게 되는 친구이다. DOM 으로 뭐시기어쩌구DOM에 대한 설명DOM에 대한 설명222222 아이템 1 아이템 2 아이템 3 문자열 변경대충 HMTL 코드 예시문서 탐색 및 가져오기 #idconst header1 = document.getElementById('header');const header2 = document.query..