코딩

선형 자료구조  1) 배열 2) 연결 리스트  3) 스택 4) 큐 5) 해시테이블 6) 데시 비선형 자료구조 1) 그래프 2) 힙 3) 트리 4) 트라이  배열 여러 개체 값을 순차적으로 나열한 선형 자료 구조 배열 크기 및 배열 확인  Array.length : 배열 요소의 개수 확인  Array.isArray() : 배열 타입 확인  배열 추가 삭제 Array.push() : 배열 추가 - LIFO Back Array.pop() : 배열 삭제 - LIFO Back Array.shift()  : 배열 추가 - LIDO Front Array.unshift()  : 배열 추가 - LIFO Front  Array.splice() : 배열 요소 삭제 및 변경 Array.slice() 배열 요소 삭제  dele..

완전탐색으로 경우의 수를 푸는 알고리즘 1) 순열: 서로 다른 n개의 원소중에 r를 중복 없이 골라 순서에 상관있게 나열하는 경우의 수     3개의 알파벳으로 단어를 만드는 경우의 수  for문을 사용하면 3번중첩되기 때문에 좋은 코드가 될 수 없다let input -["a", "b", "c"]let count = 0;function permutation(arr){ // for i -> 첫번째 index 위치시킬 요소 a,b,c [i,0,0] for(let i = 0; i 두번째 index 위치시킬 요소[i,j,0] for(let j = 0; k 세번째 index위치시킬 요소 [i, j,l] if(i == k) continue; if(j == k..

시간 복잡도  : 입력 크기의 값에 대해 단위 연산을 몇번 수행하는지 계산하여, 알고리즘의 수행 시간을 평가하는 방법 3가지 점근적  표현 O (빅오): 최악의 상황을 고려하여 성능 특정 결과 표현   Θ (세타) : 평균적인 경우에서의 성능 측정 결과 표현 Ω(오메가) : 최선의 상황일때 의 성능 특정 결과 표현   Big-O Complexity ChartBig-O 복잡도를 표기할 때 알고리즘별로 속도를 표기한 차트입니다. 요소들이 증가해도 빠른게 O(log n), O(1)이고 제일 느린게 O(nl)입니다.  빅오 표기법 예제 - 1function big_o(n) { let sum = 0; // 1회 sum = n * 2; // 1회 return sum; // 1회} 총 3회 라인 코드가 ..

1. 버튼 클릭 시 모달이 나옵니다.2. 모달이 활성화된 상태에서 스크롤 안되도록 막습니다.3. 취소, 확인, 모달 말고 다른 곳을 클릭 시 모달이 꺼지도록 합니다.  요소를 각 변수에 할당ㅎ줍니다. const $button = get('.modal_open_button') const $modal = get('.modal') const $modalConfirmButton = get('.modal_button.confirm') const $modalCancelButton = get('.modal_button.cancel') const $body = get('body') 모달창 열기, 닫기를 토글을 사용하여 열거나 닫도록 만들어 줍니다.  const toggleModal = () => { $..

캐러셀의 기능을 구현하기 위해 Carousel 클래스 생성해줍니다.  class Carousel { constructor(carouselElement) { this.carouselElement = carouselElement // 캐러셀을 감싸는 요소(div) this.itemClassName = 'carousel_item' // 캐러셀 내의 각 이미지 요소의 클래스 이름 this.items = this.carouselElement.querySelectorAll('.carousel_item') // 캐러셀 내의 모든 이미지 요소들을 배열로 저장 this.totalItems = this.items.length // 캐러셀에 있는 이미지의 총 개수 this..

스크롤이 바닥에 닿게 되면  맨 처음에 데이터를 불러오는 함수를 만들어줍니다. const getPosts = async (page, limit) => { const API_URL = `https://jsonplaceholder.typicode.com/posts` const response = await fetch(API_URL) if (!response.ok) { throw new Error('에러가 발생했습니다.') } return await response.json() } console.log를 통해 가져온 데이터를 확인합니다. const loadPosts = async () => { const response = await getPosts(page, li..

스크롤를 아래로 내릴수록 위에 있는 프로세스 바가 색이 채워지는 걸 볼 수 있습니다.  먼저 스크롤 이벤트를 주기 위해서 스크롤이 될때마다 onScroll이라는 함수가 실행되도록 합니.;(function () { 'use strict' const get = (target) => { return document.querySelector(target) } window.addEventListener('scroll', () => { onScroll() })})() height에 보여주는 영역을 제외한 나머지 스크롤 영역의 높이를 계산이 되어야하기 때문에 scrollHight - clientHight를 빼 줍니다. 스크롤 높이는 scrollTop를 통해 알 수 있습니다.이 두 가지를 사용해서 ..

클래스  - 객체를 만들기 위한 설계도  - 프로토타입 성질을 좀더 사용하기 위한 "문법적 부가기능"  - 프로토타입과 달리 constructor 라는 함수가 별개로 있습니다.  - 클래스 선언은 호이스팅 되지 않습니다.// 클래스 선언class Car { name = "avante"; brand = "hyundai"; constructor(){}}// 클래스 표현식let Car = class { name = "avante"; brand = "hyundai"; constructor(){}} 좋은 클래스 만드는 법  - 높은 응집도와 낮은 결합도를 가진 클래스를 설계해야 합니다.     (응집도: 한 모듈 내부의 요소들이 서로 관련되어 있는 정도)     (결합도: 서로 다은 모듈 간 상호 의존 정도) ..

객체지향 프로그래밍(OOP, Object Oriented Programming) - 코드의 간결함을 유지하고 재 사용성을 향상하기 위한 프로그래밍 방법 - 프로그램을 명령어의 나열이 아닌 독립된 개념들의 상호작용으로 바라보는 것 - calss와 object 개념 사용 - class로 object의 상태와 기능을 기술할 수 있고 이를 이용하여 object를 생산할 수  있음   필수 개념 객체(object) : 특정 정보를 구성하는 독립적인 개념/ 단위를 일컫는 말 클래스(class): 객체를 생성할 수 있는 내부 변수와 함수를 정의한 설계도 멤버변수(member Variable): 클래스 객체의 각종 상태값을 저장하고 있는 자체 변수 메서드(method): 클래스, 클래스 객체가 보유한 자체 함수 생성자..

함수 정해진 입력으로 원하는 결과값을 반환해주는 코드 블록입니다. function이라는 키워드로 선언 가능하며 함수 입력값을 parameter 또는 argument라고 부릅니다. 또한, 변수에 할당할 수 있으며, 다른 함수의 인자값 또는 리턴값으로도 사용할 수 있는 일급합수입니다. // 함수 정의 function multiply(p1, p2){ return p1 * p2}// 변수 할당let multuply = function(p1,p2){return p1 * p2}//함수 호출multiply(3,5);  함수 문법1) 화살표 함수   ES6에서 소개된 신기능, 함수를 function 키워드 없이 표현 가능합니다.let num1 = (a, b = 1) {return a + b} 2) 나머지 입력값   함..