Mong dev blog

개발 기술194

클래스(class)는 무엇인가
해당 포스팅에서는 ES2015 이후에 추가된 클래스에 대해 알아보았다. 1. 클래스란? 1) 생성자? 클래스? (1) ES2015 이전, 생성자를 사용했다. ES2015 이전에는 클래스를 지원하지 않아, 생성자를 이용해 객체를 생성했다. 우리가 이러한 생성자를 사용한 이유는 객체의 형태(속성, 메소드)를 정의하기 위함이었다. //생성자 function Animal({type, age}) { //속성 this.type = type; this.age = age; } //메소드 Animal.prototype.nameTag = function() { return `이 동물의 종류는 ${type}이며, 나이는 ${age}이다.`; } new 를 사용해 객체를 선언하고 속성을 정의할 수 있다. const anima..
2021. 10. 31.
블록 스코프, 함수 스코프의 차이 (javascript)
js에는 변수를 선언할 때 스코프라는 개념이 언급된다. 그렇다면 이 스코프는 무엇이며, 블록 스코프와 함수 스코프의 차이는 무엇일까? 1. 블록 스코프, 함수 스코프 (1) 스코프란? 스코프(scope)는 변수에 접근할 수 있는 범위를 말한다. 스코프는 크게 전역 스코프와 지역 스코프로 나눌 수 있다. 전역 스코프(global)는 어디에서든 해당 변수에 접근 가능한 걸 의미한다. (전역변수) 지역 스코프(local)의 경우, 한정적인 범위에서 해당 변수에 접근이 가능하다. (지역변수) 지역 스코프에는 함수 스코프와 블록 스코프가 있으며 이 포스팅에서는 두 스코프에 대해 알아본다. (2) 함수 스코프와 var 함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수스코프라고 한다. 함수 스코프는 ..
2021. 10. 30.
scroll 방향 감지하기 (with. js)
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%;..
2021. 10. 29.
focus 관련 선택자를 알아보자(focus, focus-within, focus-visible)
우리는 input, button, a 태그와 같이 포커스 가능한 요소를 클릭시, 선택자를 사용해 스타일을 지정할 수 있다. 일반적으로 focus 선택자를 사용하겠지만, 사실 focus 관련하여 여러 선택자가 존재한다. 이 본문에서는 focus, focus-within, focus-visible 선택자에 대해 알아본다. 1. focus와 focus-within 선택자 1) focus (:focus) (1) focus 선택자? focus선택자는 사용자가 요소를 선택(마우스 클릭, 탭)했을 경우, 해당 요소에서 사용할 수 있다. input:focus { /*input에 적용한 스타일*/ } (2) 사용 예시 focus 선택자는 주로, 선택된 요소 자체에 스타일을 지정할 때 사용된다. See the Pen in..
2021. 10. 27.
SOLID 윈칙 (solid principle)
코드의 유지보수와 확장을 쉽게 하기 위해 지켜야 하는 원칙들이 있는데, 이번에는 SOLID원칙에 대해 알아본다. 1. solid 원칙? 1) solid 원칙의 정의 solid 원칙이란, 코드의 유지보수와 확장을 쉽게 하기 위해 지켜야 하는 원칙들을 말한다. 이 원칙을 적용하게 되면, 읽기 쉬운 코드를 만들 수 있으며 리팩토링도 원활히 진행할 수 있다. solid 원칙에는 5가지가 있는데, 이 5가지 원칙들에 대해 코드와 함께 살펴보자! 2. S.O.L.I.D 원칙 살펴보기 1) S (Single responsibility) 단일 책임 원칙 (1) 단일 책임 원칙은 분업화와 같다. SRP는 하나의 클래스는 하나의 책임만을 가져야 한다는 원칙이다. 우리의 일상생활을 예시로 들면 아래와 같다. 사람을 클래스로..
2021. 10. 25.
종이 글자 애니메이션 (with. clip-path)
1. 미리보기 See the Pen text paper animation by KumJungMin (@kumjungmin) on CodePen. 2. html A. 구조 구조는 사진과 같이 frame안에 h1태그(text)가 포함된 간단한 구조이다. SKYBLUE B. 데이터 속성 사용하기 우리는 before, after(가상 클래스)로 글자(SKYBLUE)를 만들고 효과를 줄 것이다. 하나의 방법으로 before에 content를 사용해서 글자를 지정할 수 있다. /*ex*/ &::before { content: 'SKYBLUE'; /*this!*/ } 그런데, 이 글자를 html단에서 작성하여 바로 이용할 순 없을까? 있다! html에서는 데이터 속성을 만들 수 있는데, 이 데이터를 j..
2021. 10. 22.
버튼 커서 애니메이션 (with. js)
이번 시간에는 버튼 hover시 커서를 따라 그라데이션이 나타나도록 해보았다. 1. 미리보기 See the Pen button-gradient by KumJungMin (@kumjungmin) on CodePen. 2. 코드 보기 1) html Button html 구조는 간단한다! 버튼(btn-gradient)을 추가하고, span(title)을 이용해 글자를 넣는다. 2) scss (1) (1) 글자에 스타일 설정하기 (a) 구글 폰트에서 원하는 폰트를 import하고 title에 적용한다. (b) pointer-events: none을 설정하여, 글자에 pointer 이벤트를 비활성화시킨다. @import url('https://fonts.googleapis.com/css2?family=Pa..
2021. 10. 20.
타입스크립트 타입, union & intersection
이번에는 타입스크립트의 union과 intersection타입에 대해 알아본다. 1. 유니온 타입(union type) 2) 유니온 타입이란? (1) any타입의 경우 우리가 함수의 파라미터 타입을 선언한다면 타입 체크가 가능하다. 아래 예시는 string타입의 파라미터를 console에 출력하는 함수이다. function logMessage(value:string) { console.log(value); } logMessage('adsda'); 이 함수에 올바른 타입의 파라미터를 넘기면 함수는 문제없이 작동된다. logMessage('adsda'); 하지만, 만약 string 타입을 받는 파라미터에 number타입의 파라미터를 넘기면 에러가 발생한다. logMessage(1..
2021. 10. 19.
svg animation (with. feGaussianBlur, feOffset etc..)
1. svg로 효과를 만든다고? svg는 벡터기반 그래픽을 정의할 수 있다. 이 말은 곧! svg를 이용하여 그래픽 효과를 만들 수 있다는 말이다. 오늘은 내용이 긴 관계로 1,2 편으로 나누어 설명하며, 1편에서는 svg로 효과를 만드는 방법을 알아볼 것이다. 2. svg로 효과를 만드는 방법 1) 사전 준비하기 (1) filter에서 효과를 만들자 에 를 추가하고, 내부에서 효과를 생성한다. 이렇게 생성한 효과는 filter의 id값을 사용해 적용할 수 있다. 2) feGaussianBlur, 블러효과 (1) feGaussianBlur란 대상에 대해 블러 효과를 만들 수 있다. (2) 속성 설명 in : 효과를 적용할 대상을 지정한다. (SourceGraphic로 지정시 원본에 효과가 적용됨) std..
2021. 10. 18.

티스토리툴바