오물오물 개발일기

원문: A Proposal For Type Syntax in JavaScript A Proposal For Type Syntax in JavaScript Today we’re excited to announce our support and collaboration on a new Stage 0 proposal to bring optional and erasable type syntax to JavaScript. Because this new syntax wouldn’t change how surrounding code runs, it would effectively act as comments. W devblogs.microsoft.com TypeScript를 만든 MS가 타입 구문을 JavaScript..

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..

React ? - 2013년 페이스북에서 만든 자바스크립트 라이브러리로 에어비앤비, 넷플릭스, 인스타그램 등등 사용 프레임워크와 라이브러리? -> 2020/12/21 - [지식] - 💡 Framework & Library & API ? 💡 Framework & Library & API? ✨ 제어 흐름에 대한 주도성이 누구에게 있는가 !? - 프레임워크는 전체적인 흐름을 스스로가 쥐고있으며 사용자는 그안에 필요한 코드를 짜 넣는다. 반면에 라이브러리는 사용자가 전체적인 baegofda.tistory.com - 사용자 정의태그 즉, 컴포넌트 단위로 사용되어 가독성, 유지보수, 재사용성이 뛰어나다. - 다양한 이벤트에 맞게 반응하게 만들어졌다. - MVC 패턴중 View를 담당한다. - React-native..

* 드림코딩 강의를 기반으로 정리된 글 입니다. 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..