오물오물 개발일기

Variable & Constant (with scope) 어플리케이션을 실행하면 쓸 수 있는 메모리가 할당됩니다. 메모리는 비어있는 박스와 같고 어플리케이션에 제한적으로 할당되어 있습니다. 때문에 변수를 선언하는 작업은 신중히해야합니다. 1. 변수(Variable) 변수란 변경될 수 있는 값을 말합니다. (mutable) 1-1. let let은 ES6부터 생겼습니다. 참고 let food = "sushi"; 위와같이 let을 이용하여 선언하게되면 아래와 같이 됩니다. let food라는 변수를 정의하면 메모리에 값("sushi")이 저장이 되고 그 값을 가르키는 포인터가 생깁니다. let food = "sushi"; food = "curry"; 이때 값을 다시 변경해 준다면 본래의 값은 삭제가 되고 ..

Vanilla JS를 이용한 DropDown Menu 만들기 - 선택창이나 메뉴를 숨길시 필요한 DropDown 형식의 메뉴 - dropdown__toggle 을 클릭시 dropdown__items 에 show라는 클래스가 추가된다. .dropdown__items { max-height: 0; overflow: hidden; border: 1px solid rgba(224, 226, 231, 0.75); border-radius: 3px; transition: max-height 300ms ease-in-out; } .dropdown__items.show { max-height: 100vh; } - dropdown__btn 을 클릭 하면 dropdown__toggle에 선택 메뉴가 표시되고 dropdow..

Vanilla JS를 이용한 Tab Menu 만들기 - 자주 쓰이고 기본적인 TabMenu 만들기이며 기본 원리는 탭에 따른 내용은 display : none -> block .tab-container__item.active { border-bottom: 2px solid #369fff; } - 메뉴가 선택 될 시 active라는 클래스를 추가적으로 가지며 border-bottom에 변화를 준다. .content-container__content { display: none; } .content-container__content.target { display: block; } - 메뉴 선택시 해당하는 content에 target라는 클래스를 추가적으로 가지게 하고 display를 활용하여 표시한다. Ta..

* 드림코딩 강의를 기반으로 정리된 글 입니다. 1. join 배열을 합쳐서 string 형식으로 바꿔준다. 2. split 구분하여 자르고 배열로 만들어준다. 3. revers 배열의 순서를 반대로 바꿔준다. 4. slice 배열의 특정한 부분을 리턴한다. 5. find 원하는 조건에 맞는 데이터를 찾을 수 있다. 6. filter 7. map 원하는 데이터값만 배열로 나타낼 수 있다. 8. some, every some : 모든 함수들 중에 조건에 맞는게 있는지 every : 모든 함수들이 조건에 맞는지 9. reduce 원하는 시작점부터 결과값을 누적하면서 진행 10. sort sort : 정렬

* 드림코딩 강의 기반으로 정리된 글 입니다. 1. Declaration const arr1 = new Array(); // 아래 방식을 많이 사용하며 위를 사용하는것과 같다. const arr2 = [1, 2]; 2. Index position .length : 배열의 갯수를 찾을 수 있다. array[i] : 해당 인덱스 번호에 해당하는 데이터를 검색 할 수 있다. 3. Looping over an Array 4. add, delete, copy add - push : 뒤에서부터 차례대로 추가된다. - unshift : 앞에서부터 차례대로 추가된다. delete - pop : 뒤에서부터 차례대로 삭제된다. - shift : 앞에서부터 차레대로 삭제된다. 더보기 * unshift, shift - pus..

* 드림코딩 강의 기반으로 정리된 글 입니다. * OOP (Object Oriented Programming) Class : template (청사진, 설계도) Object : Instance of a class (클래스의 객체화) JavaScript : Introduced in ES6 1. Class declarations 2. Getter and Setter get이라는 키워드로 리턴하고 set으로 설정한다. getter를 정의한 순간 this.age는 메모리에 올라가는 데이터를 불러오는게 아니라 getter를 호출한다. setter를 정의하는 순간 = age; 즉, 값을 할당할때 setter를 호출한다. setter안에서 전달된 value를 this.age에 할당할때 메모리값을 업데이트하는게 아니라..

* 드림코딩 강의 기반으로 정리된 글 입니다. * First Class Function 함수를 변수에 대입 할 수 있다. 함수를 인자로 전달 할 수 있다. return을 함수로 반환 할 수 있다. * Function expression * Callback funciton

* 드림코딩 강의 기반으로 정리된 글 입니다. * Default Parameters ES6에서 추가되었습니다. * Rest parameters ES6에서 추가되었습니다. * Early return, Early exit

* 드림코딩 강의 기반으로 정리된 글 입니다. 1. Use Stirct ES5 에 추가 JavaScript 실행시 오류 메세지 알림 2. Variable 값을 할당해도 변경이 가능하다. (mutable) let 과 var 가 있지만 ES6이후에는 let만 사용 한다. 더보기 * var - var hoisting : 변수선언이 아래에 위치하여도 맨위로 끌어 올려서 사용한다. - no block scope : 블럭 안에 변수를 선언해놔도 어디에서나 사용이 가능하기 때문에 규모가 커질 경우 선언하지 않은 값들이 할당되어서 문제를 야기시킨다. 3. Constants 한번 값을 할당하면 절대 바뀌지 않는다. (immutable) security (보안) : 해커들이 코드를 변경하지 못하게 해준다. thread s..

* 드림코딩 강의 기반으로 정리된 글 입니다. * async & defer HTML 문서는 위에서부터 아래로 차례대로 parsing 한 후 css와 병합해서 DOM요소로 변환한다. 와 사이 어디에나 위치해도 작동은 하나 위치에 따라 웹페이지 로딩의 차이, 속도 등 차이가 있다. 태그 사이에 위치 할 경우 동작 순서는 아래와 같다. parsing 하던 html을 멈추고 JavaScript를 다운받고 다시 html을 parsing하게 된다. JavaScript가 사이즈가 크거나 인터넷이 느리면 사용자가 웹사이트를 보는데 시간이 많이 소요된다. 태그의 끝에 위치 할 경우 동작 순서는 아래와 같다. HTML를 먼저 parsing 한 후 JavaScript를 다운 받는다. 사용자가 기본적인 HTML content..