Mong dev blog

전체 글207

[JS] JSON.stringify, 세 개의 인자
💡 이번시간에는 JSON.stringify의 세 가지 인자(value, replacer, space)를 알아보았다! 1. JSON.stringify 기본 사용법 JSON.stringify는 값을 JSON 문자열로 변환해준다. 아래 예시는 obj객체를 JSON 문자열로 변환한 모습이다. const obj = { id: 12, name: 'john', }; JSON.stringify(obj); // {"id":12,"name":"john"} 2. 두 번째 인자, replacer 🤔 그런데, 만약 JSON 문자열로 변환하려는 값을 변형하고 싶을 때는 어떻게 해야할까? 이 경우에는 JSON.stringify의 두번째 인자(replacer)를 이용하면 된다. 두 번째 인자는 함수나 혹은 JSON화 ..
2022. 3. 30.
[JS] 크기 변화를 감지하는 두 가지 방법(resize, ResizeObserver)
🤔 화면 크기나 특정 요소의 크기가 변할 때, 그 변화를 감지할 수 있을까? 이번 시간에는 화면과 요소의 크기 변화를 감지하는 방법을 알아보았다. 1. resize, 브라우저 크기에 반응 1) resize 이벤트란? window.addEventListener("resize", function() { // window resize시 처리 }) resize 이벤트는 브라우저의 크기가 변경될 때 발생한다. 만약, 브라우저 크기 변화에 따른 dom의 변경 크기를 구하려면 getBoundingClientRect(), getComputedStyle()를 사용해줘야한다. 2) 예시 아래 예시는 브라우저 크기를 변경한 뒤, div의 변화된 너비를 화면에 출력했다. See the Pen resize example by ..
2022. 3. 26.
[JS] JS에서 요소의 스타일 접근하는 방법
😃 이번시간에는 JS로 요소의 스타일에 접근하는 방법인, window.getComputedStyle와 Element.style에 대해 알아보았다! 1. 스타일에 접근하는 방법 1) getComputedStyle()? (1) 형태 window.getComputedStyle(el[, pseudo-class]); getComputedStyle는 요소(el)의 모든 CSS 속성값을 객체 형태(CSSStyleDeclaration)로 반환해준다. 첫번째 인자로는 요소(el), 두번째 인자로는 의사요소(:checked, :first-child)을 넘길 수 있다. 두번째 인자는 옵션이며 기본값은 null이지만, 특정 브라우저(Firefox 4, SeaMonkey 2.1) 전에는 필수값이므로, 값을 꼭 넘겨줘야한다. (..
2022. 3. 23.
TDD에 대해 알아보자! (with. jest)
👀 이번시간에는 TDD는 무엇이며, TDD 중에서 단위테스트도 직접 해보자! 1. TDD(Test Driven Development)? 1) TDD란? TDD(테스트 주도 개발)은 말 그대로 개발보다 테스트를 우선 실행하는 걸 말한다. 그림1은 기존 개발 프로세스로 설계 → 개발 → 테스트 순으로 진행된다. 만약 테스트 결과 실패를 하게 되면 설계를 수정하고 개발 코드를 변경하므로 비용이 높다. 하지만 그에 비해 그림2(TDD)는 개발자는 먼저, 요구사항에 맞는 테스트 케이스를 작성한다. 그 다음, 테스트 케이스를 통과를 위한 코드를 작성하고, 해당 코드를 리팩토링하는 방식이다. 2) TDD의 장점 (1) 개발 목적에 집중이 가능하다. 💡 내가 작성하는 코드에 대한 이해, 문제 구체화가 가능하다. 개발자..
2022. 3. 19.
[CSS] accent-color
1. accent-color속성? accent-color는 특정 요소에 색상을 지정할 때 사용된다. accent라는 말처럼 브랜드 컬러처럼 강조 색상을 요소에 적용할 때 유용하다. accent-color는 prefers-color-scheme와 같이 사용하면, 라이트&다크모드를 모두 지정할 수 있다. accent-color는 아래 요소에 적용된다. 2. 미디어쿼리, prefers-color-scheme 🙂 먼저, prefers-color-scheme은 어떻게 쓰는지 알아보고 accent-color 예시를 보자 CSS의 미디어 쿼리 중 하나로, 사용자 OS 시스템 모드에 따라 다른 스타일을 지정할 수 있다. @media (prefers-color-scheme: light) { /* light모드일 때 색상..
2022. 3. 16.
Promise.allSettled?
😆 이번시간에는 promise.all과 유사한 promise.allSettled에 대해 알아보았다! 1. Promise.allSettled의 필요성 여러 프로미스 객체를 병렬적으로 진행할 때, 우리는 Promise.all을 사용할 수 있다. const promise1 = Promise.resolve(3); const promise2 = Promise.resolve(4); Promise.all([promise1, promise2]).then(() => { console.log('success'); }); // success 단 Promise.all의 경우, 하나의 프로미스라도 실패하면 에러로 처리된다. const promise1 = Promise.resolve(3); const promise..
2022. 3. 13.
[CSS] has 선택자
1. has 선택자? (has selector) has 선택자는 특정 요소를 가지는 요소를 선택할 때 사용할 수 있다. JQuery에서 제공하던 기능이나, 일부 브라우저에서 사용 가능하다. 특정 자식 요소를 가지는 부모 요소를 선택할 때 유용하다. p:has(span) { color: red; /* span요소를 가지고 있는 p요소를 선택 */ } 아래 예시는 has선택자를 사용해, a 요소를 자식으로 가지는 li요소에 빨간 배경색을 준 코드이다. See the Pen has selector by KumJungMin (@kumjungmin) on CodePen. 그런데, 빨간색 배경이 아래 그림처럼 떠야 하는데, 작동하지 않는 모습을 발견할 것이다. 2. 호환 브라우저는..? 😂 슬프게도.. 대부분의 브..
2022. 3. 12.
[CSS] 텍스트가 이미지를 감싸게 해보자!
👀 이번 시간에는 shape-outside, shape-margin, margin을 이용해 글자가 이미지 모양에 따라 배치되도록 해보자! 1. 미리보기 See the Pen word wrap image by KumJungMin (@kumjungmin) on CodePen. 2. 자세히 알아보기 1) html html 구조는 단순한데, 제목, 내용, 그리고 2개의 이미지만 배치하면 된다. Wrap Text Around Images ... 2) (CSS) 기본 스타일 지정하기 🙂 기본 스타일은 본문의 핵심은 아니므로, 본론으로 넘어가고 싶다면 3) 이미지 설정하기를 보자 body의 margin, padding을 0으로 초기화하고 배경색을 지정한다. body { margin: 0; padding: 0; bac..
2022. 2. 27.
[css] Aspect Ratio, 요소를 비율대로 조정하기
👀 이번시간에는 요소의 크기를 비율대로 조정할 수 있게 하는 Aspect Ratio에 대해 알아보았다! 1. Aspect Ratio란? Aspect Ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다. 만약 요소의 너비를 100px로 지정하고, aspect-ratio: 3/1을 하면 높이는 33.333px이 된다. aspect-ratio: 3 / 1; aspect-ratio: 4; aspect-ratio: auto; aspect-ratio: auto 1 / 1; 인터넷 익스플로러를 제외한 브라우저에서 지원하는 속성이다! 1) 사용법 (1) width / height 지정 /을 이용하여 width / height 비율을 지정할 수 있다. 3/1이라고 지정하면, 너비는 3, 높이는 1의 비율을..
2022. 2. 20.

티스토리툴바