목차 will-change 속성이란? will-change css 속성은 요소의 변화를 미리 브라우저에게 알려주어 브라우저가 미리 최적화를 하게 할 수 있는 속성입니다. 사용법 will-change: auto; // 기본 값 will-change: scroll-position; // 요소의 스크롤의 위치가 변한다는것을 미리 알림 will-change: contents; // 요소의 내용이 바뀐다는 것을 미리 알림 will-change: transform; // 이렇게 CSS 속성을 직접 명시할 수 있습니다. will-change: opacity; /* 이렇게 적게되면 어느 부분에 적용될까요?*/ will-change: background; /* 속기로 적게된 속성은 아래와 같이 모든 것에 적용하는 것과 ..
목차 오늘은 자료구조인 연결 리스트에 관해 공부를 해보려 합니다. 연결 리스트(Linked List) 이름에서 알 수 있듯이 Linked List는 링크를 이용해서 리스트를 만든다는 뜻입니다. 그림으로 간단히 나타내면 이런 형태입니다. 연결 리스트는 여러개의 노드로 이루어져 있고 각각의 노드는 데이터와 주소를 기억하고 있습니다. 연결 리스트 구조에서 맨 앞을 HEAD라고 하며 맨 마지막을 TAIL이라 합니다. 노드는 link를 통해 다음 노드에 접근할 수 있으며, 노드들은 다음에 올 노드의 정보를 가지고 있습니다. (이해를 위해서 link라는 단어를 썼지만 link를 reference 혹은 address라고 합니다.) 자바스크립트를 알고 있는 저에게는 이거 배열이랑 비슷한거 아닌가? 생각이 들었습니다. ..
목차 코딩테스트를 풀다가 어느분이 padEnd를 사용해서 해결하시는 것을 보고 공부하고 정리한 내용입니다. 처음에 그 코드를 봤을 때머리가 띵했습니다. 문자열 앞에 문자 추가하기 (padStart) (MDN 정의) 현재 문자열에 다른 문자열을 채워넣어서 주어진 길이에 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작부터 적용됩니다. String.padStart(targetLength, [,padString]) targetLength보다 String의 길이가 만약 더 길다면? -> 그냥 String이 반환됩니다. targetLength보다 작을 때만 문자열이 채워넣어집니다. padString을 안넣으면 어떻게 될까요? -> 빈 문자열이 채워넣어집니다. padString이 채워넣어지다가 문..
목차 지난 게시물 nullish 연산자에 이어 옵셔널 체이닝 연산자에 대해 알아보겠습니다. 옵셔널 체이닝(optinal chaining)연산자 개념 optional chaning연산자 (?.)는 객체 내의 key에 접근할 때 그 참조가 유효한지 아닌지 직접 명시하지 않고도 접근할 수 있는 연산자입니다. ?. 앞의 평가대상이 만약 nullish ( undefined 또는 null ) 일 경우 평가를 멈추고 undefined를 반환합니다. 우리는 코드를 짜면서 객체내의 값을 접근하는 경우가 종종 있습니다. 하지만 항상 그 key값이 존재하는 경우 보다는 없는 경우도 있습니다. 예를 들어, 학생들의 점수 데이터를 가진 객체가 있습니다. mark라는 학생과 john이라는 학생의 영어점수를 접근하려고 합니다. 그..
목차 nullish 연산자란 nullish 연산자는 자바스크립트 최신 스펙에 추가되어 브라우저에서 지원 하는지 확인하고 사용하시길 바랍니다. nullish 연산자는 간단히 말해서 값이 있는 변수를 찾을 수 있는 연산자입니다. 코드를 통해서 nullish를 사용하지 않을 때와 사용할 때의 차이점을 볼게요. const a = null; const b = 'hello nullish'; // nullish 사용 x console.log((a !== null && a !== undefined) ? a : b); // nullish 사용 console.log(a ?? b); // 결과: hello nullish 여기에서 nullish 연산자(??)는 앞에 있는 a의 값을 평가할 때 'undefined' 인지 'n..
