codinghatso

Javascript는 함수형 개발 언어에 최적화 되어있습니다. 우리가 개발을 할 때 함수를 만들때는 주의사항이 있습니다. 함수는 항상 어떤 목적을 수행하기 위한 하나의 기능 단위로 만들어져야 한다는 것입니다. 함수를 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때) 2. 입출력기능을 만들 때 Arrow fucntion 장점 1. 함수 본연의 기능을 아주 잘 표현하는 문법입니다. 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해줍니다. input을 집어 넣어 output을 출력하는 함수의 본 개념을 뜻함. 파라매터로 값을 받아 return을 이용하여 뱉어내는 것. 2. 소괄호 생략이 가능합니다. var someFunc = x => { return x *..

JS는 window라는 거대한 오브젝트 안에서 구현되는 형식을 취하고 있다. 전역에서 this를 출력하면 window 오브젝트가 호출되는 모습을 볼 수 있다. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다. this는 나를 담고 있는 오브젝트를 출력해준다. function person(){ this.name = 'kim' } 여기에서 this는 새로 생성되는 오브젝트(instance)이다. constructor(생성자) 안에서 사용하면 constructor로 새로생성되는 오브젝트를 뜻합니다. constructor는 오브젝트를 복사해서 생성해주는 장치입니다.

클래스의 상속은 만들어 놓은 클래스의 기능들을 그대로 가져다 쓸 수 있으면서도, 상속받은 클래스의 고유한 기능을 추가할 수 있기 때문에 체계적으로 구조화 된 서비스를 개발하는데 아주 중요한 역할을 합니다. 키워드 // 1. extends - 상속받을 클래스를 지정하는 지시자입니다. class ChildClass extends ParentClass {} //이런 방식으로 부모 클래스(Parent Class)를 상속받게 됩니다. 호출하지 않으면 부모 클래스의 생성자에서 초기화한 변수나 //메서드를 사용할 수 없게 됩니다. //2. super - 부모 클래스의 생성자(constructor()) 를 호출합니다. 자식 클래스의 생성자에서 호출하며, //부모 클래스의 생성자를 호출합니다. class ChildCla..

// 1. class 클래스명 {} 으로 클래스 외형을 정의합니다. class Estimate {} // 2. 클래스 내부에 생성자(constructor) 함수를 정의합니다. // 클래스 1개에 생성자는 1개만 올 수 있습니다. 필수 함수이며, function 키워드는 사용하지 않습니다. class Estimate2 { constructor() {} } // 3. 생성자에 파라메터를 추가합니다. // new 키워드로 클래스를 생성할 때 인스턴스 변수는 "const" 로 설정하는 것이 기본입니다. // ES6의 클래스에는 "let unit=[];" 과 같은 변수 선언 X, 메서드만 O. // 따라서 클래스 객체를 가리키는 this 지시자로 클래스 안에 변수 값을 대입해 동적으로 생성해야 합니다. class..

Flexbox의 구성 container item container display flex : container에 display의 속성, flex 값을 주어야 flexbox 기능이 적용된다. flex-direction row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다. flex-wrap nowrap (default) wrap wrap-reverse flex-flow 다음의 속성들을 간략히 한 속성입니다. flex-direction and flex-wrap. justify-content flex-start (default) ..

a[href]{} : href 속성을 가지는 태그 전부 a[href="naver.com"] : href 가 naver.com인 속성을 같는 태그 a[href^="naver"] : ^는 naver로 시작하는 속성을 같는 태그 a[href$="com"] : ^는 naver로 끝나는 속성을 같는 태그 드림코딩 아카데미 → http://academy.dream-coding.com/ 드림코딩 유튜브 → http://www.youtube.com/c/드림코딩by엘리

Cascading Style Sheet *cascade : 작은 폭포, 폭포처럼 흐르다, 연속화, 연속적인, 종속, 직렬 Cascading Author style : 우리가 만든 .css 파일 | 우선순위 1 User style : 유저가 다크모드 같은 브라우저의 설정 값을 바꾸는 것 | 우선순위 2 Browser : 브라우저에서 기본으로 기정된 스타일 | 우선순위 3 * ! important : 모든 우선순위를 무시하고 가장 중요한 것을 지정해 버리는 것. 이것은 좋지 않은 구조를 만들 위험이 있어 조심히.. 아니 사용하지 않은 것을 추천한다. selectors (지정자, 선택자) Universal * type Tag ID #id Class .class State : Attribute [] 기본 문법 ..

Emmet 기본 내장 기능 활용 팁. emmet 문법 정리 div.class div#id div>ul>li 자식 div>ul+ol 형제 ul>li*5 반복 div>ul>li^ol 부모 div>(header>ul>li*2>a)+footer>p 그룹 tip1. ol>li*3 -ol 태그 안에 li태그를 3개 생성하는 기능이 있습니다. // ol>li*3 --result tip2. div.container>div.item.item${$}*10 -div태그 안에 class="container"를 부여하고 그 자식으로 div태그 안에 class="item item$(순차적 숫자)" {$(순차적 숫자)}컨텐츠를 *10 열번 생성합니다. // div.container>div.item.item${$}*10 --resu..