서론 React 강의를 듣던 중 성능을 최적화할 수 있는 프레임워크인 MillionJS에 대해 알게 되었고, 어떠한 메커니즘으로 성능 개선이 이루어지는 지 궁금해 MillionJS 공식문서를 보고 나서 알게 된 점을 적어보려고 합니다. 우선 React의 virtual DOM 방식을 알아보고, MillionJS이 동작하는 방식이 virtual DOM과 어떠한 차이점이 있는 지 보겠습니다. 리액트의 virtual DOM 동작 방식 virtual DOM은 컴포넌트가 리렌더될 때 기존의 값과 현재의 값을 비교하고, 값이 바뀐 부분만을 찾아 리렌더하기 때문에, 모든 코드가 재평가의 대상이 되는 실제 DOM에 비해 효율적이라고 볼 수 있습니다. 개발자 도구에서 보면 값이 변경된 부분만 깜빡이며 바뀌고 있습니다. 예..

🔨 컴포넌트의 재사용 React는 component로 이루어져 있고, 데이터만 달라지면서 동일한 컴포넌트를 재사용할 수 있습니다. 아래의 커스텀 컴포넌트 에 MY_HOBBY의 데이터를 각각 다르게 props로 전달하는 코드를 보겠습니다. const MY_HOBBY = [ { title : "Movie", description : "Watch movie at theater", }, { title : "Running", description : "Run 3km", }, { title : "Football", description : "Kick a ball with our team", }, ]; 1. spread operator를 사용하여 배열의 인덱스로 props를 전달합니다. import Hobby fro..

0. HTML 요소 inline VS block - inline : 하나의 태그가 자신의 width만큼(내부 컨텐츠만큼)만 차지하는 덩어리 ,, ,,,,, - block : 하나의 태그가 자신의 width와 상관없이 좌우공간을 모두 차지하는 덩어리 ,,~,,,,,,,,,,등 HTML tag는 block 이 대다수를 차지하므로, 예외적으로 자주 쓰는 , , 정도가 inline에 해당한다~ 정도만 알고 있으면 될 것 같습니다. 1. 중앙정렬 - inline 요소의 경우 bring me center!! 이 글씨를 박스의 정중앙에 위치하게 하고 싶습니다. span은 inline 요소에 해당하며, inline 요소를 중앙정렬할 경우는 .container { /* default */ height: 60px; wid..

💡 자바스크립트에서 변수를 생성하는 let 과 const 내부값 변경이 어떤 식으로 이루어질 수 있는 지 알아보겠습니다. 변수를 생성하는 방법은 총 두 가지입니다. let 과 const, var let은 변수, 즉 변하는 값을 넣는 container 로 적합하며, const는 상수, 변하지 않는 값을 넣는 container로 적합합니다. 그렇다면 아래 예시와 함께 이해를 넓혀 가보겠습니다. 알다시피 const 내부값 변경은 불가합니다. 하지만 이러한 경우가 있죠. 배열 같은 객체를 const 로 선언했을 때에는 내부값이 변경되는 것처럼 보입니다. 하지만 객체를 const 로 선언할 때, 변하지 않는 값은 10, 20, … 의 value 값이 아니라 내부 주소값이므로, 내부 주소값만 변경되지 않는다면 객체..

💡 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy)란 무엇인지? 두 복사의 다른 점과 복사를 이용하는 방법에 대해 알아보겠습니다. 깊은 복사 (Deep Copy) let a = 1000; let b = a; b = 2000; console.log(a, b); // 1000 2000 변수 b 는 a 의 값을 참조했지만, 두 변수의 값은 독립적입니다. 따라서, 변수 a의 값은 여전히 1000입니다. 이처럼 변수의 “값” 만을 참조하는 복사를 깊은 복사(Deep copy)라고 합니다. 얕은 복사 (Shallow Copy) let existedNums = [100, 200, 300, 400]; let newNums = existedNums; newNums[0] = 1; console.log..

💡 자바스크립트에서 사용하는 소수점 올림, 버림, 반올림에 대해서 알아보겠습니다❗ 1. 소수점 내림 Math.floor는 소수점 이하 값을 버리고 정수 부분을 내려줍니다. 주목할 케이스는 음수 일 경우 입니다. Math.floor(3.14); // 3 Math.floor(-3.14); // -4 3.14는 3 과 4 라는 정수의 사이값입니다. 따라서, 소수점 이하 값을 버리고 3 과 4 중 작은 값인 3이 결과값이 됩니다. -3.14는 -4와 -3 이라는 정수의 사이값입니다. 따라서, 소수점 이하 값을 버리고 -4, -3 중 작은 값인 -4가 결과값이 됩니다. 2. 소수점 올림 Math.ceil은 소수점 이하 값을 버리고 정수 부분을 올려줍니다. 주목할 케이스는 내림과 마찬가지로 음수 입니다. Math...

예전에 HTML과 CSS에 대해 공부하고, 요약해서 포스팅했던 네이버 주소를 여기에 남깁니다. https://blog.naver.com/tim1007_/223095526613 [프로드] HTML,CSS - 3. HTML 태그 태그를 사용해보자! abbr은 title 속성을 사용하여 뜻이나 설명을 제공한다. 커서를 갖다 대면 설명을 볼 ... blog.naver.com 이어질 포스트는 네이버 클론코딩을 위한 학습과 과정에 대한 내용입니다.