Mong dev blog

분류 전체보기214

[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.
NVM 버전 설정 쉽게 하기(with. nvmrc)
NVM은 node version manager로 노드 버전을 쉽게 변경하고 관리할 수 있다. 프로젝트의 경우, 각 프로젝트별로 요구하는 노드 버전이 다를 수 있기 때문에 매번 node를 재설치하고 삭제하기 보다는 NVM을 이용해 해당 프로젝트에서 쓸 노드 버전을 바뀌주는 게 편리하다. 자세한 NVM 사용법은 여기를 참고하는 걸 추천한다. 🤔 그런데 프로젝트별로 요하는 노드 버전을 프로젝트에 미리 기록해둘 수는 없을까? 가능하다! 바로 .nvmrc 파일을 만들면 된다. 방법 또한 간단하다. .nvmrc 설정파일 이용하기 먼저, 프로젝트의 루트 디렉토리에 .nvmrc 파일을 생성한다. mkdir .nvmrc 그 다음, ..nvmrc 파일에 해당 프로젝트에서 요하는 노드 버전을 작성하면 끝이다! (v를 써도 ..
2022. 2. 20.
nvm으로 node버전 관리하기(mac)
🧐 프로젝트마다 요하는 node버전이 다르며, 여러 개의 프로젝트를 진행할 경우 노드 버전을 변경해줘야한다. 하지만 조금 더 편하게 노드 버전을 변경할 순 없을까? 이번시간에는 nvm에 대해 알아보았다! 1. nvm이란? nvm은 node version manager로, 여러 노드 버전을 관리하는 스크립트이다. nvm명령어을 이용해 다양한 버전의 노드를 빠르게 설치하고 변경할 수 있다. 유사한 노드 버전 매니저로는 n이 존재한다. 2. nvm 사용법 😉 nvm을 사용하기 위해서는 설치가 필요하다. mac에서는 어떻게 설치하고 적용하는지 알아보자! 1) brew로 설치하기 brew 명령어를 사용해 nvm을 설치해준다. 설치후 brew update를 사용해 brew 패키지를 업데이트 해주자. brew ins..
2022. 2. 15.

티스토리툴바