모던 자바스크립트 Deep Dive 정리 증가/감소(++/--) 연산자 ▶ 증감 연산자는 위치에 의미가 있다 ▷ 전위 연산자 : 먼저 피연산자의 값을 증가/감소시킨 후 다른 연산을 수행 // 전위 연산자 예시 // ... return ++this.size; // size를 1 증가시킨 값을 리턴 // ... ▷ 후위 연산자 : 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소 // 후위 연산자 예시 const x = 1; console.log(x++); // 1 console.log(x); // 2 문자열 연결 연산자 ▶ + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다 비교 연산자 ▶ 동등/일치(==/===) 비교 연산자 비교 연산자 사례 설명 == x == y ..

참고링크 https://jsdoc.app/ Use JSDoc: Index Index Getting Started Getting Started with JSDoc 3 A quick-start to documenting JavaScript with JSDoc. Using namepaths with JSDoc 3 A guide to using namepaths with JSDoc 3. Command-line arguments to JSDoc About command-line arguments to JSDoc. Configuring jsdoc.app Using namepaths with JSDoc 3 JSDoc 3 에서의 Namepaths - 문서의 다른곳에 있는 JavaScript 변수를 참조할 때 해당 변수..

참고 링크 https://jsdoc.app/ Use JSDoc: Index Index Getting Started Getting Started with JSDoc 3 A quick-start to documenting JavaScript with JSDoc. Using namepaths with JSDoc 3 A guide to using namepaths with JSDoc 3. Command-line arguments to JSDoc About command-line arguments to JSDoc. Configuring jsdoc.app Getting Started with JSDoc 3 JSDoc 3 (최신버전) 이란? - JavaScript를 위한 API 문서 생성기 - 소스코드에 직접 코멘트..

모던 자바스크립트 Deep Dive 정리 표현식 삽입 ▶ + 연산자는, 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다 ▷ 예) console.log( 'My name is' + 100 + 20 ); // My name is10020 ▶ 템플릿 리터럴에서 ${ } 안에는 표현식이 위치하며, 평가된다 ▷ 예) console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3 Null 타입 ▶document.querySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환 ▷ 예)

모던 자바스크립트 Deep Dive 정리 값의 할당 ▶변수 선언은 런타임 이전에 미리 실행(undefined로)된다고 배웠다 ▶값의 할당은 런타임에 실행 변수 선언에 별도의 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못하는 것이다 평가 Evalutate (계산) ▶10 + 20 은 30으로 평가된다 ▶값은 표현식이 평가되어 생성된 결과이다 리터럴 ▶사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 ▶3은 숫자 리터럴이다 표현식 ▶값으로 표현될 수 있는 문 ▶표현식 : 변수에 할당 가능 ▷예) 10 + 20 ▷x = 100 (할당문) ▷크롬 개발자 도구에서 실행시 평가된 값 반환 ▶표현식이 아닌 문 : 변수에 할당 불가 ▷var score; ▷console.log(10..

모던 자바스크립트 Deep Dive 정리 변수 ▶하나의 값을 저장하기 위해 확보한 메모리 공간 자체와 이것을 식별하기 위해 붙인 이름 ▶메모리 주소를 변수로 감싸서 사용 ▶변수에 할당하지 않으면 재사용할 수 없다 참조 (Reference) ▶변수에 저장된 값을 읽어들이는 것 식별자 ▶핵심 기능은 식별 ▶변수의 상위 개념이며 그밖에 함수, 클래스의 상위 개념이기도 함 ▶메모리 주소를 기억 (값이 아닌) 변수 선언 ▶var, let, const ▷var, let을 이용한 변수 선언은 undefined 초기화를 수반 ▶변수 선언은 런타임 이전에 미리 실행됨 → 호이스팅 가능케함 ▷호이스팅 : 변수 선언문이 참조문 위에 있는 것처럼 동작하는 것 // 호이스팅 사례 console.log(foo); // undef..

타겟 이미지 제일 먼저 떠오르는 것은 z-index 가운데 낀 요소를 relative position으로 주고 양쪽 요소들을 옮겨볼 수도 있을까 했지만 생각이 나질 않음 내 코드 코드 양을 줄여보려고 클래스도 딱딱 맞아 떨어지는 것이 아니게 조금 지저분하게 했다 아웃풋 결과 Score: 601.04 {625}, 100% match 정리 margin 대신 flex layout으로 중앙을 잡은 것으로 byte 수가 조금 늘어난것 같지만.. 이게 더 정확한 방법이라 본다

타겟 이미지 개별 요소를 골라 스타일 하기 vs grid 방식으로 6개 만들고 color on/off 하기? 방법이 떠올랐다. 내 코드 border-radius는 4가지를 사용할 경우 왼쪽 위 모서리부터 시계방향으로 적용됨 아웃풋 결과 Score: 602.26 {543}, 100% match 정리 다음에는 grid를 써서 6개의 아이템을 만들고 그 안에서 세분화해봐야겠다