Mong dev blog

전체 글206

프로토타입 (feat. 매운 맛🔥)
이 포스팅은 프로토타입 객체, 링크, 프로퍼티에 대한 설명은 물론, 이제까지 우리가 알고 있던 프로토타입 개념이 사실과 조금 다를 수 있다는 매운맛 정보가 담겨있습니다. (사실 안 매워용..ㅎㅎ) 1. 프로토타입 (feat. 매운 맛🔥) 자바스크립트는 프로토타입 기반 언어라고 불린다. 그런데 이 프로토타입은 무엇이며 어떻게 생성될까? 이 포스팅에서 자세히 알아보자 🙂 1) 프로토타입이란? (1) 프로토타입은 무엇일까 자바스크립트에서는 객체를 생성할 때, 원형을 복사하는 방식을 취한다. (ex. new Object()) 그리고 이 과정에서 객체에 프로토타입이 추가되는데, 우리는 프로토타입을 통해 객체 원형의 정보에 접근할 수 있게 된다. 만약 A객체를 기반으로 B객체를 생성했다면, B객체에서는 A객체의 정..
2021. 11. 4.
프로토타입이란? (feat. 순한 맛 🌝)
프로토타입은 무엇이며, 어떻게 사용하면 좋을까? 이 포스팅에서는 프로토타입에 대해 순하게 알아본다. 1. 프로토타입 (1) 프로토타입이란? js언어를 공부할 때 우리는 프로토타입이라는 단어를 듣게 된다. 프로토타입을 그대로 번역하면 '원형'이라고 해석되는데, 말 그대로 객체의 원형이다. 우리는 js에서 array, object와 같은 객체를 생성할 수 있다. 이때 생성된 객체는 사용자가 메소드를 추가하지 않았지만, array나 object의 메소드를 쓸 수 있게 된다. 그 이유는 무엇일까? 그건 바로 프로토타입에 원형의 정보가 담겨있기 때문이다. 사용자가 A객체를 이용해 B객체를 생성하면 그와 동시에 B객체에 프로토타입(B에 대한 정보)이 추가된다. 생성된 객체(B)는 프로토타입에 접근할 ..
2021. 11. 2.
클래스(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.

티스토리툴바