Frontend

history API 1. history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 브라우저에서 페이지 로딩 시, 세션 히스토리를 가짐 세션 히스토리는 페이지 이동할 때마다 쌓인다. pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음 👉 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다. hashbang url 형식에서 벗어날 수있다. ( / => HomePage, /detail => DetailPage) 일반 url형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수 있다. * hashbang이란 ? : 말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용..

Module 1. import - export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 import name from "module-name"; // module-name 내 export default로 내보내진 것을 가져옴 import * as allname form "module-name"; // allname 이름으로 지정하여 export 된 것을 가져옴 export const NAME = 'EUNA' export const AGE = '24' // 함수 export export default function 함수이름 () { } import { loadItem } from "module-name" // 모듈내 export된 것 중 특정 값만 가져옴 import loadItem ..

컴포넌트 방식으로 생각하기(w. To do list) 1. To-do 리스트를 추상화 하기 - UI를 선언적으로 표현하기 위해 TO-DO 리스트를 Header, TodoFrom, TodoList, App의 4가지로 추상화 👉 컴포넌트의 재사용 가능, 기능 추가시 간편 1) TodoList 컴포넌트 만들기 ◼ 명령형 코드 방식 function TodoList(params) { const $todoList = document.createElement('div'); const $target = params.$target; $target.appendChild($todoList); this.state = params.initialState; this.render = () => { ..

명령형 프로그래밍과 선언적인 프로그래밍 방식의 이해 1. 명령형 : 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 2. 선언형 : 프로그램이 어떤 방법으로 해야하는 지가 아닌 무엇이 같은 지를 설명하는 경우 👉 HTML, SQL 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-1 1. double() 함수 만들기 1) 명령형 방식 function double(arr) { let result = []; for(let i=0; i number*2) } .- 코드가 간결하며, 유지보수하기 쉽다. 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-2, 2 💡 만약 배열에 숫자가 아닌 것들이 들어온다면 ? 1) 명령형 function double(arr) { let result = []; for(le..

사전 문제 1 function Dog(name, age) { this.name = name; this.age = age; } const dog = Dog('happy', 3); console.log(dog.name); 위 코드는 오류가 발생하는데, 그이유는 Dog 함수는 반환 값이 없기에 dog엔 undefiend 값이 들어가게 되고, undefined.name을 찾을 수 없기에 오류가 발생한다. 또한 추가로 함수안에 있는 this는 window를 가르키기에 window.name을 찍으면 happy 가 나온다 ✅ 왜 this가 window를 가르킬까 ? - 그 이유는 함수를 new를 통해 생성하지 않았기 때문이다. - new를 사용하지 않고 함수를 선언할 시 함수 내부의 this는 window를 가르킨다..

자료구조&알고리즘 - 코딩 테스트 준비 방법 1. 알고리즘을 잘 공부하는 법 1) 문제 풀 때 중요한 것 항상 여러가지 풀이법이 있음을 기억 항상 예외가 있을 수 있음 내 답이 베스트인지 의심 시행착오는 기록 ! 다른 사람의 코드를 많이 보자 너무 쉽게 포기하진 말고, 너무 오래 끌지도 말자 2. 코딩 테스트 준비 방법 1) 나의 성향 파악 미리 생각하고 의사 코드를 작성해야 잘 풀리는 사람 일단 코드를 작성하면서 풀어야 잘 풀리는 사람 ( 나 ) 2) 메모하기 : 코드에 주석을 달거나, 노트에 메모하면서 풀자 3) 디버깅 하면서 풀기 3. 좋은 코드를 만드는 방법 1) 간결하고 가독성 좋은 코드 변수, 함수 이름 잘 정하기 중복 코드 제거 함수형 프로그래밍(고차 함수 이용하기) 2) 가지치기 3) 자바..

자료구조&알고리즘 - BFS, DFS [Algorithm] DFS 정리 (tistory.com) [Algorithm] DFS 정리 1. DFS란? - DFS 는 깊이 우선 탐색 을 말합니다. - 루트 노드에서 시작하여, 해당 노드들의 자식을 우선적으로 탐색합니다. * 미로찾기로 예시를 들면, 한 방향으로 갈 수 있을 때까지 계속 가다가 aeunhi99.tistory.com [Algorithm] BFS 정리 (tistory.com) [Algorithm] BFS 정리 1. BFS란? - BFS 는 너비우선탐색을 말합니다. - 루트 노드에서 시작하여 인접한 노드를 탐색하는 방법입니다. Q. 너비우선 탐색을 하면 순서가 어떻게 될까요? A. 0 - 1 - 2 - 3 - 4 - 5 -6 1) 특징 - 두 노 ae..

💡 실습 문제 - 가장 먼 노드 [프로그래머스] 가장 먼 노드(JavaScirpt) (tistory.com) [프로그래머스] 가장 먼 노드(JavaScirpt) 코딩테스트 연습 - 가장 먼 노드 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 aeunhi99.tistory.com 자료구조&알고리즘 - 트리 1. 트리 - 방향 그래프의 일종으로 정점으로 가르키는 간선이 하나 밖에 없는 구조 1) 용어 Degree(차수) : 한 정점에서 나오는 간선의 개수 Level : 루트부터 리프노드까지 단계(루트가 0,1로 시작하여 커진다) 2) 특징 루트 정점을 제외한 모든 정점은 반드시 ..

자료구조&알고리즘 - 큐 1. 큐 - First In First Out 개념을 가진 선형 자료구조 - Linear Queue와 Circular Queue가 존재함 - EnQueue, Rear, Front, DeQueue 1) Linear Queue 선형 큐 ⓐ Array로 구현 class Queue { constructor() { this.queue = []; this.front = 0; this.rear = 0; } enqueue(value) { this.queue[this.rear++] = value; } dequeue(){ const value = this.queue[this.front]; delete this.queue[this.front]; this.front++; return value; } ..