키티의 코딩공부

history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 브라우저에서 페이지 로딩을 하면, 세션 히스토리를 가짐 세션 히스토리는 페이지 이동할 때마다 쌓이게 되고, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능함 pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음 pushState : 세션 히스토리에 새 url 상태를 쌓는다. replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다. => 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다. hashbang url 형식에서 벗어날 수 있다. / => HomePage /l..

fetch API 써보기 컴포넌트 구조 app -> product -> productoptions, cart 오늘은 실습을 하며 실제 api 주소를 이용해서 복잡한 api 요청을 하는 컴포넌트 만드는 것을 하였다. innerHTML innerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용된다. innerHTML의 사용은 지양하는 것이 좋으며 일반 텍스트를 삽입 할 때는 Node.textContent 를 사용하는 것이 권장된다. 그렇다면, 더 나아가 innerHTML 대신 사용될 수 있는 문법들과 그에 대한 어떤 기대효과들이 있는지 알아보자. 세부적인 기능과 동작 방식은 다르지만 innerHTML 대신 사용할..

Promise 비동기 작업을 제어하기 위해 나온 개념으로 callback hell에서 어느정도 벗어날 수 있게 함 Promise로 정의된 작업끼리는 연결할 수 있고, 코드의 depth가 크게 증가하지 않게해준다 1) Promise 만들기 const promise = new Promise((resolve, reject) => { // promise 내부에서 비동기 상황 종료될 때, resolve 함수 호출 // promise 내부에서 오류 상황일 때, reject 함수 호출 }) Promise에서는 then을 이용해 비동기 작업 이후 실행할 작업을 지정함 function asyncPromiseWork() { //code... return new Promise((resolve, reject) => { //c..

ES6 Module 사용하기 [모던자바스크립트] module 이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드 조각 일반적으로 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 => 다른 모듈에서 접근할 수 없다.(캡슐화) 모듈은 재사용 되어야 의미가 있기 때문에 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. => export 공개(export)된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 이때 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자라고 함. 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. => import import..

컴포넌트 방식으로 생각하기(w. To do list) To-do 리스트를 추상화 하기 UI를 선언적으로 표현하기 위해 TO-DO 리스트를 Header, TodoFrom, TodoList, App의 4가지로 추상화 Header, TodoFrom, TodoList, App 하나하나가 컴포넌트이다. 컴포넌트의 재사용 가능, 기능 추가시 간편 1) TodoList 컴포넌트 만들기 명령형 코드 방식 //params.$target - 해당 컴포넌트가 추가가 될 DOM 엘리먼트 //params.initialState - 해당 컴포넌트의 초기 상태 function TodoList(params) { const $todoList = document.createElement('div'); c..

명령형 프로그래밍과 선언적인 프로그래밍 방식의 이해 명령형 프로그램 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 "어떻게 구현하는가"를 디테일하게 기술하는 것에 관점 선언형 프로그램 프로그램이 어떤 방법으로 해야하는 지가 아닌 무엇과 같은 지를 설명하는 경우 웹페이지는 선언형 -> 제목, 글꼴, 본문, 그림과 같이 "무엇"이 나타나야하는지를 묘사하는 것이기 때문 HTML, SQL 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-1 명령형 방식 function double(arr) { let result = []; for(let i=0; i number*2) } 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-2 만약 배열에 숫자가 아닌 문자열이 들어올 때 추가 보완 명령형 방식 조건이 많..

강의를 듣기 전 JS 사전 퀴즈 7문제를 풀어보았다. 오류를 찾고 해결방법을 물어보는 문제와 출력값 구하는 문제들이 나왔는데 '이게 뭐가 문제지?'라는 생각과 한참 생각해야 답이 나오는 문제들이었다. 찍은 것도 있었다.. 여전히 기초와 기본이 부족한 것 같다. 틈틈이 기초 강의들을 들어야겠다는 생각이 들었다. JS 사전 퀴즈 문제 1 Q) 다음 코드의 실행결과는? 'cherry'가 출력된다. 빈 문자열이 출력된다. undefined가 출력된다. 오류가 발생한다. ✅ function Cat(name, age) { this.name = name; this.age = age; } const cat1 = Cat('cherry', 6); console.log(cat1.name); 함수(Cat) 내에 함수를 ret..

자바스크립트 코드 트릭 변수 swap - 구조 분해 할당 이용 let a = 10, b = 26; [a, b] = [b, a]; 범위 루프 - 함수형 프로그래밍 let sum = 0; for (let i = 5; i k + 5) .reduce((acc, cur) => acc + cur, 0); 배열 내 같은 요소 제거 : set 이용 const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim']; const setNames = Array.from(new Set(names)); const setArrayNames = [...new Set(nam..

자료구조&알고리즘 - 백트래킹 모든 경우의 수를 탐색하는 알고리즘 DFS나 BFS를 이용할 수 있다. 효율을 위해 탐색하지 않아도 되는 곳을 미리 막는 것을 가지치기(Pruning)라고 한다. 자바스크립트는 재귀 효율이 나쁘기 때문에 DFS를 구현할 경우 스택을 이용하는 것이 좋다. 탐색에서 순환(Cycle)이 발생할 수 있다면 BFS를 이용하는 것이 편하다. BFS, DFS를 이용을 많이하기 때문에 외워두는 것이 좋다. 백트래킹의 핵심은 가지치기(백트래킹 작성 방법) 우선 모든 경우의 수를 찾을 수 있도록 코딩 이후 문제에서 특정한 조건을 만족하는 것만 탐색하고 나머지는 탐색하지 않도록 조건문을 작성한다. 즉, 절대로 답이 될 수 없는 것은 탐색을 종료한다. 자료구조&알고리즘 - 동적 계획법 동적계획법..

자료구조&알고리즘 - BFS, DFS BFS(너비 우선 탐색) 그래프 탐색 알고리즘으로 같은 깊이에 해당하는 정점부터 탐색하는 알고리즘 BFS의 특징 Queue를 이용하여 구현할 수 있다. 시작 지점에서 가까운 정점부터 탐색한다. 선의 수일 때 BFS의 시간복잡도는 O(V+E)다. DFS(깊이 우선 탐색) 그래프 탐색 알고리즘으로 최대한 깊은 정점부터 탐색하는 알고리즘 DFS의 특징 Stack을 이용하여 구현할 수 있다. 시작 정점에서 깊은 것부터 찾는다. V가 정점의 수, E가 간선의 수일 때 DFS의 시간복잡도는 O(V+E)다. 자료구조&알고리즘 - 그리디 자판기는 남은 금액을 어떻게 반환할까? 매 선택에서 지금 이순간 가장 최적인 답을 선택하는 알고리즘 최적해를 보장해주지 않음 그리디 알고리즘의 특..