프론트엔드 공부 블로그 프론트엔드 공부 블로그

ES 2020에서 새로운 자바스크립트 문법을 지원하게 되었다. Optional chaining은 다음과 같이 작성할 수 있다. const a = {}; const b = a?.name; // a && a.name 위의 예제처럼 사용할 수 있는데, b의 값은 물론 undefined이다. 하지만, 위의 예제로는 이 문법의 유용함을 알리기에 조금 무리가 있다. React에서 자바스크립트를 사용할 때 유용하게 사용할 수 있었는데, props로 받은 객체 데이터에 어떤 데이터는 있을 수도 있고 없을 수도 있다. 이럴 때 만약 객체 내부에 있을 수도 있고 없을 수도 있는 데이터가 객체이고, 그 객체의 데이터 내부의 프로퍼티에 접근할 일이 있을 수 있다. 이때 별도로 조건문을 설정하지 않으면, 존재하지 않는 객체 (..

큐는 FIFO(First In First Out)의 특징을 가지는 자료구조이다. 자바스크립트에서 큐를 만든다면, 가장 쉬운 방법은 다음과 같이 .shift()를 사용하는 방법이다. const queue = []; // 큐에 삽입 queue.push(2); queue.push(3); queue.push(4); console.log(queue); // [ 2, 3, 4 ] // 큐에서 하나씩 꺼내기 const one = queue.shift(); const two = queue.shift(); const three = queue.shift(); console.log(one, two, three); // 2, 3, 4 하지만, 자바스크립트를 사용할 수 있는 많은 코딩테스트에서 shift()를 사용하면, 효율적..

SCSS는 CSS를 편하게 사용하고 코딩하듯이 사용하기 위해서 만들어졌다. Sass 버전 3에 추가된 것이 Scss이다. 변수 사용 $color: red; $default-margin: 15px; $colors: red, blue, green, black, white; $map: ( morning: white, night: black ); p { color: $color; } @import를 통해서 scss파일을 불러와 그 파일의 변수를 사용할 수 있다. 함수 사용하기 @function box-calculator($row: 4, $pixel: 512) { @return $pixel / $row; } .flex-box { flex: box-calculator(4, 1024); } 반복문 // for ol ..

자바스크립트는 비동기로 작동한다. 하지만 웹 페이지의 로딩을 기다리거나, 입력을 기다리거나, 다운로드가 완료된 후에 실행되야 하는 코드가 있을 수 있다. 따라서 이때는 동기적으로 작동이 될 수 있도록 한다. // 비동기 const printHi = () => { setTimeout(() => { console.log("안녕!") }, Math.random() * 100); } const printWhat = () =>{ setTimeout(() => { console.log("우리 뭐할까?"); }, Math.random() * 100); } const printBye = () => { setTimeout(() => { console.log("잘가!") }, Math.random() * 100); } p..

자바스크립트 enum과 같은 변수를 만들기 위해서 Object.freeze()를 사용할 수 있다. const obj = { a: 1, b: 2, } obj.a = -1; console.log(obj); // {"a": -1, "b": 2} Object.freeze(obj); obj.b = -2; console.log(obj); // {"a": -1, "b": 2} 위와 같이 Object.freeze()를 적용하면, 더 이상 객체의 프로퍼티가 수정되지 않는다. Object.isFrozen() 메서드를 통해서 이 객체가 freeze 되었는지 판별할 수 있다. console.log(Object.isFrozen(obj)); // true 참고자료 : https://developer.mozilla.org/ko/d..

package.json은 프로젝트에 대한 정보를 가지고 있다. 이를 통해서 협업할 때 같은 버전의 모듈들로 프로젝트를 함께 진행한다. 이것으로 협업때 다른 모듈 버전을 사용함으로써 생길 오류를 방지한다. 우리들은 선배들이 먼저 만들어 놓은 모듈을 사용하여 빠르고 검증된 라이브러리를 사용할 수 있다. node.js에서 외부 라이브러리를 받는 가장 대표적인 방법이 npm(Node Package Manager)를 사용하는 것이다. 그리고 프로그램이 실행되기 위해서 어떤 패키지가 필요한지 적어둔 것이 바로 package.json이라고 할 수 있다. package.json에는 여러 속성이 있다. name, version, desciption은 프로그램의 정보를 담고 있다. scripts를 통해서 CLI에서 사용 ..

DOM : Document Object Model javascript를 통해서 DOM을 조작하여 HTML을 변경할 수 있다. js -> DOM -> HTML 조작 script의 위치에 따라서 실행결과가 달라질 수 있다. script 요소를 만나면 웹브라우저는 HTML 해석을 잠시 멈춘다. script 요소는 등장과 함께 실행되기 때문에 만약 head 부분에 script가 존재하고, 이 script가 HTML의 body의 내용을 수정한다면, 오류가 발생할 수 있다. 따라서 이럴경우 script는 반드시 body의 마지막 부분에 존재해야 한다. JS에서 DOM은 document 객체에 구현되어 있다. -> DOM 구조를 조회할 때는 console.dir()을 통해서 확인할 수 있다. (Object처럼 볼 수..

정렬 알고리즘으로 버블, 선택, 삽입, 퀵, 합병 정렬을 배웠었다. 하지만, C언어로만 이 코드들을 작성했었기에 자바스크립트로도 정렬 알고리즘을 기록하기로 하였다. 물론, 자바스크립트에서는 arr.sort((a, b) => a - b) 알고리즘으로 손쉽게 배열을 정렬할 수 있다. 🍇 버블 정렬 가장 쉽게 생각할 수 있는 정렬 방법으로 앞뒤의 숫자를 비교하여 정렬이 필요하다면, 앞뒤의 숫자를 바꾼다. 이미 정렬된 상태라면, 중간에 반복문을 중단할 수 있다. 평균적으로 O(N^2) 시간복잡도를 가진다. (큰 배열을 정렬할 때 부적합하다) const bubbleSort = function (arr) { let sorted; for(let i = 0; i < arr.length; i++){ sorted = fa..