word-break 한 줄의 끝에 도달할 때 단어가 어떻게 분리되어야 하는지를 지정하는 속성 영어나 라틴어 같은 알파벳으로 이루어진 단어의 경우 기본적인 분리 규칙을 따라가도록 설정 normal(기본값) 단어가 끝나지 않으면 줄 바꿈을 허용하지 않습니다. break-all 단어가 끝나지 않더라도 줄 바꿈을 허용하여, 글자들을 가능한 한 많이 한 줄에 넣으려고 할 때 사용됩니다. keep-all 단어가 끝나기 전까지는 줄바꿈을 하지않으며, 단어 내부의 문자들이 한줄에 모두 포함되도록 합니다. 기본적으로 `normal` 속성을 사용할 경우, 단어와 단어 사이에서 자연스럽게 줄 바꿈이 이루어집니다. break-word 단어가 행의 끝에 닿았을 때, 자동으로 줄 바꿈이 되도록 합니다. 일반적으로는 분리할 수 없..

다양한 CSS 프로퍼티의 값으로써 사용됩니다. CSS2 이후에 만들어졌으며, 현재의 모든 CSS 버전에서 사용가능합니다. 종류 attr(): 선택된 요소의 어트리뷰트의 값을 리턴 a:after {content: " (" attr(href) ")";} calc(): CSS 프로퍼티 값 계산 수행 width: calc(100% - 100px); conic-gradient(): conic gradient를 생성 background-image: conic-gradient(red, yellow, green); cubic-bezier(): Bezier curb 정의 transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); hsl(): Hue-Saturation-..

new Error()와 new Promise.reject()는 모두 예외를 발생시키는 메소드입니다. 그러나 사용 용도가 다르므로, 주로 다른 상황에서 사용됩니다. new Error()는 예외 상황이 발생했을 때, 개발자가 사용하기 위한 에러 객체를 생성합니다. 이 객체는 예외 발생 원인, 위치, 스택 트레이스 등을 포함할 수 있으며, 개발자가 디버깅을 할 때 유용합니다. 일반적으로, throw new Error() 구문을 사용하여 예외를 발생시키며, try...catch 문을 사용하여 예외를 처리합니다. 반면에 new Promise.reject()는 Promise 객체에서 거부(reject) 상태를 생성합니다. 이는 비동기 작업이 실패한 경우, 해당 Promise 객체가 거부 상태를 가지게 됩니다. Pr..

어떤 블로그에서 `return Error()`와 `return new Error()`를 혼용해서 사용하는 것을 보았다. `Error()`와 `new Error()`는 무슨 차이가 있을까. `new Error()`는 `Error` 객체의 새 인스턴스를 만듭니다. `Error` 객체는 예외를 나타내는데 사용됩니다. 이 객체는 `name` 프로퍼티와 `message`프로퍼티를 가지며, `stack` 프로퍼티도 포함할 수 있습니다. `new Error()`를 호출하면 새로운 `Error` 객체가 생성되고, 해당 객체는 반환됩니다. 반면에 `Error()`는 `new Error()`와 다른 방식으로 사용됩니다. `Error()`를 호출하면 `new Error(message)`와 같은 결과가 나옵니다. 즉, `ne..

`return new Error()`와 `throw new Error()`는 모두 `Error` 객체를 생성하여 함수 호출자에게 오류를 알리는 방법입니다. 그러나 이 두가지 방법은 약간 다른 결과를 가져옵니다. return new Error() `return new Error()`는 함수의 실행을 중지하지 않습니다. `Error` 객체를 반환하며, 이 객체는 함수 호출자에게 전달됩니다. 호출자는 반환된 `Error` 객체를 처리허가나, 그냥 무시할 수 있습니다. throw new Error() `throw new Error()`는 함수의 실행을 즉시 중지하고 `Error` 객체를 throw합니다. 이것은 호출자에게 예외를 발생시키는 것입니다. 호출자는 예외를 처리해야 합니다. 예를 들어봅시다. throw..

프런트앤드는 백엔드로 API를 호출하고 전달받은 response를 가공해 화면에 그려주는 일을 하다보니 대량의 데이터를 가공해야할 일이 많아 배열 메소드를 활용할 때가 많습니다. 또, 네트워크 통신보다 화면이 그려지는 시간이 빠른 SPA 프로그래밍 특성상 페이지가 그려진 이후에 데이터를 전달받을 수 있습니다. 그렇게 된다면 이를 감지해 화면에 다시 리렌더링을 해주어야하는데요. 배열은 참조값인 특성상, 식별자가 주소값과 바인딩되어 있어 주소값이 가리키는 데이터가 바뀌어도 이를 감지할 수 없습니다. 이 때문에 배열 가공시에 새로운 배열이 리턴되는지 기존의 배열에서 변경이 일어나는 것인지 체크를 하며 설계를 해야하는데요. 이번에는 새로운 배열을 리턴하는 메서도와 아닌 메소드를 구분지어 보겠습니다. 아래는 MD..

회사 업무중에 객체로 이루어진 두 개의 배열에서 email이 다른 객체만 추출하여 새로운 배열로 만들어야하는 로직이 필요했습니다. const arr1 = [ { name: 'Alice', email: 'alice@example.com' }, { name: 'Bob', email: 'bob@example.com' }, { name: 'Charlie', email: 'charlie@example.com' } ]; const arr2 = [ { name: 'Alice', email: 'alice@example.com' }, { name: 'Bob', email: 'bobby@example.com' }, { name: 'Charlie', email: 'charlie@example.com' } ]; const r..

animation 요소는 스타일을 서시히 변화시켜주는 것을 말합니다. CSS 속성을 원하는 만큼 많이, 원하는 만큼 여러 번 변경할 수 있습니다. CSS Animation 을 사용하려면 먼저 Animation에 대한 몇 가지 @keyframes을 지정해야 합니다. 키프레임은 요소가 특정 시간에 가질 스타일을 나타냅니다. 예를 들어, 요소의 크기, 위치, 색상 등을 지정하여 특정 시간에 어떻게 보일지를 설정할 수 있습니다. 이러한 키프레임을 사용하여 요소의 애니메이션을 만들 수 있으며, 이를 이용하여 요소가 부드럽게 움직이거나 변화하는 효과를 줄 수 있습니다. @keyframes animation-name animation-duration animation-delay animation-iteration-c..