오물오물 개발일기

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 : 정렬