Mong dev blog

1. 미리보기 See the Pen scroll direction by KumJungMin (@kumjungmin) on CodePen. 2. 코드 해석 html, css는 스크롤을 발생시키기 위한 사전 작업이다. 만약 scroll 방향 감지 코드를 보고 싶다면 js로 바로 이동하자. 1) html scroll을 발생시키기 위해 아래와 같이 dom을 구성했다. Scroll 2) css (1) 기본 스타일 설정하기 기본적으로 margin값이 설정되어 있으므로 0으로 변경해준다. body { margin: 0; } * { box-sizing: border-box; } text는 down, up 글자를 나타내는 역할을 한다. 스타일은 간단히 보자. .text { position: fixed; top: 50%;..

코드의 유지보수와 확장을 쉽게 하기 위해 지켜야 하는 원칙들이 있는데, 이번에는 SOLID원칙에 대해 알아본다. 1. solid 원칙? 1) solid 원칙의 정의 solid 원칙이란, 코드의 유지보수와 확장을 쉽게 하기 위해 지켜야 하는 원칙들을 말한다. 이 원칙을 적용하게 되면, 읽기 쉬운 코드를 만들 수 있으며 리팩토링도 원활히 진행할 수 있다. solid 원칙에는 5가지가 있는데, 이 5가지 원칙들에 대해 코드와 함께 살펴보자! 2. S.O.L.I.D 원칙 살펴보기 1) S (Single responsibility) 단일 책임 원칙 (1) 단일 책임 원칙은 분업화와 같다. SRP는 하나의 클래스는 하나의 책임만을 가져야 한다는 원칙이다. 우리의 일상생활을 예시로 들면 아래와 같다. 사람을 클래스로..

1에서 9까지의 숫자를 가지는 배열을 만들 때는 [1,2,3,4,5,6,7,8,9]와 같이 일일이 선언할 수 있지만, 일일이 작성하지 않고 함수로 만들 수 있는 방법은 없을까? 이 포스팅에서는 1~N까지의 숫자를 가지는 배열을 만드는 2가지 방법을 알아본다. 1. Array.from 사용하기 Array.from()은 새로운 배열 객체를 생성할 수 있다. Array.from(A, B) A에는 배열로 반환하고자 하는 이터러블 객체 B에는 배열의 모든 요소에 대해 호출할 맵핑 함수를 선언 : 먼저 첫번째 인자에 {length: 9}를 넣어주면, 길이가 9인 배열이 생성된다. const keyboard = Array.from({length:9}); //[undefined,undefined,undefined,un..

오늘은 간단하게 js의 sort()에 대해 알아볼까 하는데요! 그런데 이 sort()만 사용해서는 숫자를 정렬할 수 없습니다. 왜 그런지 한 번 알아볼까요? 1. sort()로 문자 정렬 sort로 문자열을 정렬하는 방법은 간단합니다. sort함수는 요소를 문자열로 변환 한 후, UTF-16 코드 단위 값을 비교하여 정렬을 합니다. 그래서 문자의 경우, 아래와 같이 작성하면 오름차순 정렬이 가능한 것이지요~ 주의, 이 함수는 원본 배열을 변형시킵니다, 원본 배열이 변형되는 걸 원치 않는다면 먼저 slice()로 배열을 복사합시다 texts = ['aa', 'b', 'd', 'c'] texts.sort() console.log(texts) // [&..

혹시 vue에 대해 아시나요? vue는 react와 같은 자바스크립트 프레임워크입니다. MVVM(Model-View-ViewModel) 패턴을 기반으로 하며, 재사용 가능한 UI를 묶어서 사용할 수 있다는 장점이 있죠! 그렇다면 vue로 서비스를 개발할 때 알면 좋은 정보는 무엇이 있을까요, 한 번 알아봅시다! 1. 업데이트된 정보만 랜더링하자 어느날, 웅이가 디저트 데이터를 가져왔습니다🍭 그리고 지우는 이 desserts 데이터를 vue에 랜더링시키고 싶어합니다. desserts = [{id:1, name: '초콜릿'}, {id:2, name: '사탕'}, {id:3, name: '치즈'}] 그래서 vue의 v-for을 사용해 데이터를 아래와 같이 랜더링시켰습..

1. 미리보기 아래 예시를 보면 프로필을 감싸는 원의 한쪽이 비어있는 걸 볼 수 있다. 그렇다면 어떻게 하면 이 원을 만들 수 있을까? border-left-color, border-right-color 속성에 대해 알아보자 See the Pen css100_day5 by KumJungMin (@kumjungmin) on CodePen. 2. 원 변형시키는 방법 1) 옆이 펑 뚫린 원은 어떻게 만들까? css에서 원을 만드는 방법은 간단하다. 바로 border-radius: 50%를 하는 것이다. 그럼 원 중에서 옆이 뚫려있는 원은 어떻게 만들까? 바로 border-left-color, border-right-color를 사용하는 것이다. (1) border-left-color...? 우리는 border..

사용자가 드래그한 영역의 텍스트 정보를 가져오는 방법이 있을까? 바로 getSelection을 사용하면 된다! getSelection에 대해 간단히 알아보자 :) 1. getSelection이란? 마우스 드래그 혹은 더블 클릭을 통해 선택된 텍스트 정보를 가져올 수 있다.const selection1 = window.getSelection(); //방법1 const selection2 = document.getSelection(); //방법2 selection은 방향을 가지며 선택 시작 지점(anchor) ~ 선택 끝 지점(focus)라고 한다. 아래 예시와 같이 왼 -> 오른쪽 방향으로 선택하면 anchor(0) ~ focus(2)가 된다. //드래그 방향(->) '안녕하'세요 만약 오 ..