slice메소드나 Spread Operator를 활용해서 새로운 배열을 생성한 경우 그냥 복사가 되었다고 넘어가면 절대 안된다. "새로운 배열이 생성이 되었기 때문에 원본엔 영향을 주지 않겠지?" 라고 생각한다면 다음과 같은 문제를 겪을 수 있다. 동일한 배열을 생성하기 위해서 다음과 같이 spread 연산자를 사용하였다. 이제 복사를 했으니 한번 복사본을 변경해볼려고 하는데 원본도 변경이 되는 현상이 발생했다. 우리는 원본이 변경되는 것을 막기 위해서 spread 연산을 하였지만 우리가 원하는 결과를 얻을 수 없었다. 근데 왜 이런 현상이 발생하게 된 걸까? const array = [1, [2, 3]]; const shallowCopy = [...array]; shallowCopy[1][0] = 9;..
자바스크립트라는 언어를 배우면서 다른 언어와는 어떤점이 다른가에 대해서 고민을 한적이 있었고, 그 중 하나가 바로 오늘 이야기할 주제이다. 1. Call by reference와 Call by value란? 함수 호출의 대표적인 방법는 call by reference와 call by value가 있다. call by value의 경우 값을 복사해서 호출하는 방법이고, call by reference의 경우 값을 참조해서 호출하는 방법이다. 사실 처음 배우는 입장이라면 참조가 어떤 개념인지 전혀 모를 수 있다고 생각한다. 참조라는 개념은 C의 주소값 개념을 이해하게 된다면 쉽게 이해할 수 있다. 2. 어? 자바스크립트 Call by reference처럼 동작하던데 자바스크립트 또한 c, c++ 처럼 cal..
우리가 서버로부터 데이터를 가져와서 브라우저에 숫자를 보여주는 경우 100000을 1,000,000과 보여주고 싶은 경우가 빈번하게 발생한다. 다양한 방법에 대해서 알아보도록 하자! 1. 정규 표현식을 활용한 방법 function numberWithCommas(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 2. toLocaleString() const num = 123456789; console.log(num.toLocaleString()); 3. Intl.NumberFormat( ).format( ) 최근에 많이 사용하는 방법이며, format의 인자부분에 숫자, 문자열 타입 둘 모두 처리 해주게 된다. console.log..
이번에 우리가 문자열의 길이가 고정된 형태일 경우 빈칸을 동일하게 채울 때 자주 사용하게 되는 메소드인 padStart와 padEnd에 대해서 알아보도록 하자! padStart는.. 문자열의 최대길이를 입력하고 입력된 문자열에서 나머지 부분을 앞에 채워주게 되는 메소드이다. 문자열.padStart(문자열최대길이, "채워줄문자열") 만약 아래와 같이 이진수의 포맷자체가 4자리수가 아닌 5자리수인 경우 4자리수를 5자리로 만들고 싶을 때 사용하는 방법을 알아보도록 하자. 비교적 간단하게 padStart를 사용하면 해결할 수 있다. let binary1 = "1110"; let binary2 = "11101"; // 최대 자리를 5로 설정하고 나머지를 앞에 0으로 모두 채워준다. binary1 = binary..
flex에 대해서는 좀 깊게 알아 볼 필요가 있다. inline-block이나 float를 이용해서 레이아웃을 구성할 수 도 있겠지만 레이아웃을 구성하기 위해 나온 속성이 flex와 grid는 다른 어떠한 속성들보다도 편할 수 있기 때문이다. flex는 레이아웃을 구성하고 싶은 아이템들이 내부에 있는 부모요소에 적용을 시켜줘야 된다. Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 한다. 이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item이라고 부른다. flex는 자신의 직계자식까지만 영향을 미친다는 것에 주의하도록 하자. 자손에게는 영향을 주지 않는다는 것을 기억하자 flex로 컨테이너는 가로를 모두 차지하며, 높이는 아이템들만큼 자동으로 맞춰..
float라는 속성은 원래 이미지 옆에 텍스트가 물 흐르듯이 레이아웃을 구성하기 위해서 만들어졌다. 아래의 그림참조 span, img와 같은 요소에게 float속성을 적용하면 display속성이 자동으로 block으로 변하기 때문에 width,height,margin,padding속성값을 자유롭게 적용 시킬 수 있다. 헷갈리는 점 자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다는 점 그래서 자동으로 Block레벨 요소(컨테이너 박스)는 자식들의 컨텐츠 높이를 차지하게 되어 있지만 높이가 아예 없는 상태가 된다. 왜 이런 현상이 발생하는 것일까? 블록 레벨 요소와 인라인 요소들은 normal flow에 따라 레이아웃이 결정된다. 하지만 f..
static, relative, sticky 속성값 부모박스안에서 위치변경이 일어나게 된다. relative relative는 부모박스안에서 위치 변경이 일어나며 원래 자신이 위치해있던 위치를 알고 있기 때문에 다른 요소들의 위치 변경이 일어나지 않는다. absolute absolute는 static속성이 아닌 부모 박스 안에서 위치 변경이 일어나며, 만약 부모요소중에 static이 아닌 것이 없다면 최상단 요소인 body에서 위치 변동이 일어난다. absolute를 사용하면서 유의해야 될점으로는 주변에 있는 다른 요소들이 absolute로 된 요소의 위치를 알 수 없기 때문에 다른 요소들의 위치도 변동이 일어 난다는 것이다. fixed fixed는 들어 있는 부모 박스와 관계 없이 현재 사용자가 보고 ..
line-height 단위 normal이 기본단위이며 폰트 family에 따라 기본 line-height 값이 달라진다. 부모요소로부터 상속이 가능한 속성이다. 폰트를 '디자인 하신분들이 어떻게 디자인했냐'에 따라서 달라진다. "font-size만큼 크기를 잡아도 왜 height의 값이 더 클까?" line-height = font-size + 상/하 halfleading이기 때문이다. font-size만큼 크기를 잡기 위해서는 line-height : 1로 설정해주면 된다. leading영역들이 없어지고 폰트사이즈만큼만 line-height를 가져가게 된다. 그래도 약간의 위 아래 공간이 남는데 폰트를 가져와서 따로 디자인을 설정하지 않는 이상 거의 불가능하다. 하지만 negative margin으로 ..
CSS에는 크게 두 가지 박스 유형이 존재한다 인라인 박스 / 블록 박스 외부 디스플레이 타입 Block Box 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 콘테이너에서 사용 가능한 공간을 채운다. width, height 속성을 가질 수 있다. 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다. Inline Box 기본적으로 컨텐츠 박스만큼의 크기만 가진다. 자신이 필요한 부분만을 차지 새로 줄로 행을 바꾸지 않고 행으로 나열이 된다. width, height속성을 사용할 수 없다. 패딩과 보더 속성을 사용할 수 있지만 스타일적으로 보이기는 하지만 실제로는 적용되지 않고(다른 요소들을 밀어낼 수..
선택자란? HTML의 특정 요소를 선택하여 스타일주기 위해 사용하는 css의 문법스타일 선택자의 종류 전체 선택자(Universal Selector) 에스터리스크라고 하며, 모든 HTML문서에 있는 요소들에게 접근하여 공통적인 스타일을 줄 수 있는 선택자 * { margin: 0 auto; } 타입 선택자(Type Selector) HTML문서에 있는 태그이름이 선택된 모든 요소들에게 스타일을 줄 수 있는 선택자 p { color: blue; } h1 {color: red;} 아이디 선택자 - id는 웹페이지 내에서 유일하게 존재해야 되며, 여러개의 요소에게 적용 될 수 없다. - ' # '이라는 문자를 사용하여 HTML문서내에 동일한 아이디이름을 가진 요소를 선택할 수 있다. 이 문단은 평범한 p태그를..
