- 전체보기(260)
- 프로그래머스(113)
- 자바스크립트(32)
- 코딩애플(28)
- 모던 자바스크립트 Deep Dive(22)
- React(13)
- 자료구조(11)
- 알고리즘(10)
- 노마드코더(9)
- github(8)
- node.js 교과서(7)
- Firebase(6)
- git(5)
- JavaScript(5)
- 초보자를 위한 리액트 200제(5)
- ES6(5)
- CSS(4)
- 스택(4)
- 객체지향(4)
- Summer/Winter Coding(~2018)(3)
- class(3)
- setter(2)
- extends(2)
- 코딩테스트 입문(2)
- typescript(2)
- promise(2)
- 상속(2)
- 완전탐색(2)
- BFS(2)
- DP(2)
- GET(2)
- 프론트엔드(2)
- 스택/큐(2)
- react router(2)
- DFS(2)
- 빅오 표기법(2)
- 반응형 웹(2)
- 2019 카카오 개발자 겨울 인턴십(2)
- Constructor(2)
- html(2)
- clone(2)
- 트리(2)
- push(2)
- 2017 팁스타운(2)
- REST(2)
- 2018 KAKAO BLIND RECRUITMENT(2)
- big o notation(2)
- heap(2)
- Prototype(2)
- 코테(2)
- set(2)
- js(2)
- 탐욕법(Greedy)(2)
- 재귀(2)
- CS(2)
- getter(2)
- stack(1)
- queue(1)
- Pull Request(1)
- 해시(1)
- priority queue(1)
- 그래프 순회(1)
- 유효성검사(1)
- yarn(1)
- recursion(1)
- 이중 연결 리스트(1)
- 2020 카카오 인턴십(1)
- 문제해결접근법(1)
- 분할 정복(1)
- shadow dom(1)
- 해시 테이블(1)
- imperative(1)
- arguments(1)
- router(1)
- 클라우드(1)
- Document(1)
- 탐욕법(1)
- 빈도수 세기(1)
- await(1)
- useEffect(1)
- for ~ in(1)
- Insertion Sort(1)
- Selection Sort(1)
- Spread(1)
- async(1)
- 월간 코드 챌린지 시즌1(1)
- branch(1)
- Flex(1)
- export(1)
- &&(1)
- 공간 복잡도(1)
- 선형 검색(1)
- reducer(1)
- method(1)
- unshift(1)
- Object.create(1)
- hoisting(1)
- 2019 Kakao Blind Recruitment(1)
- template literals(1)
- npx(1)
- Unidirectional Data Flow(1)
- 얄코(1)
- Primitive Data Type(1)
- Reference Data Type(1)
- box-sizing(1)
- 자바사크립트(1)
- events(1)
- Helper Method Recursion(1)
- declarative(1)
- 검색 알고리즘(1)
- 해시함수(1)
- 웹브라우저 동작원리(1)
- build(1)
- gh-pages(1)
- Big O(1)
- font awesome(1)
- React 완벽 가이드(1)
- 퀵 정렬(1)
- State(1)
- this(1)
- arrow function(1)
- 2022 KAKAO BLIND RECRUITMENT(1)
- 다중 포인터(1)
- 크로스 브라우징(1)
- 너비우선탐색(1)
- Sass(1)
- styled components(1)
- 모바일앱(1)
- fork(1)
- 깊이우선탐색(1)
- shift(1)
- 생명주기 함수(1)
- preventDefault(1)
- 문제 해결 패턴(1)
- storage(1)
- localstorage(1)
- Pop(1)
- remove(1)
- 동기식처리(1)
- 정렬(1)
- reverse(1)
- 코딩앙마(1)
- 이진 검색(1)
- ES5(1)
- 2021 KAKAO BLIND RECRUITMENT(1)
- array(1)
- spread operator(1)
- super(1)
- 삽입 정렬(1)
- 단일 연결 리스트(1)
- proptypes(1)
- geolocation(1)
- 벤더 프리픽스(1)
- random(1)
- tagged literals(1)
- interval(1)
- 다익스트라 알고리즘(1)
- 우선순위 큐(1)
- 변수(1)
- svg(1)
- 2021 카카오 채용연계형 인턴십(1)
- Database(1)
- Map(1)
- 그래프(1)
- .env(1)
- CRUD(1)
- 합병 정렬(1)
- Props(1)
- 큐(1)
- 2023 KAKAO BLIND RECRUITMENT(1)
- 시간 복잡도(1)
- Date(1)
- web-components(1)
- grid(1)
- 운영체제(1)
- 트리 순회(1)
- 기수 정렬(1)
- 2021 Dev-Matching: 웹 백엔드 개발자(상반기)(1)
- deep copy(1)
- memo(1)
- for ~ of(1)
- netlify(1)
- 이진탐색트리(1)
- 투두리스트(1)
- function(1)
- 정규표현식(1)
- 로그인(1)
- 웹 접근성(1)
- Pure Recursion(1)
- virtual DOM(1)
- scss(1)
- destructuring(1)
- object(1)
- timeout(1)
- organization(1)
- 2022 Kakao Tech Internship(1)
- 시맨틱태그(1)
- dll(1)
- firestore(1)
- import(1)
- 백엔드(1)
- 호출 스택(1)
- weatherAPI(1)
- 기준점 간 이동(1)
- cleanup function(1)
- 선택 정렬(1)
- 비동기식처리(1)
- npm(1)
- instance(1)
- POST(1)
- ReactDOM(1)
- querySelector(1)
- 라이브러리(1)
- 프레임워크(1)
- INSERT(1)
- React Hooks(1)
- default parameter(1)
- Symbol(1)
- merge(1)
- linux(1)
자바스크립트 중급 강좌
Temporal Dead Zone(TDZ) let과 const는 할당하기 전에 사용 불가능 var : 함수 스코프(함수 외부에서 사용 불가능, 블록 외부에서 사용 가능) let, const : 블록 스코프(블록 외부에서 사용 불가능) 블록 : 함수, 제어문, 반복문 등
# ?. / ?? 연산자
여러 문자, 숫자를 한 변수에 저장하고 싶을 때는 object를 사용한다. ?.(optional chaining operator) : 오브젝트에서 변수를 꺼낼 때 사용하는 신문법 왼쪽이 null 이나 undefined면 undefined 남겨줌. 중첩된 object
# shadow DOM
Shadow DOM : 일반적으로는 볼 수 없는 숨겨진 HTML Web Component와 합쳐 쓰면 HTML 모듈화를 할 수 있다. 예시) 내부적으로 여러개의 div를 이용해서 만들어진 것임. 숨겨진 코드를 확인하기 위해서는 개발자도구 -> 설정 -> show u
# Web Components
Web Component : 반복해서 쓰는 태그 뭉치들을 커스텀 태그로 축약해서 쓸 수 있다. 브라우저의 기본 기능 중 하나. class를 이용해 만듦. -> 긴 HTML도 함수처럼 재사용이 가능하다. 상식) 웹개발을 잘하기 위해서는 브라우저 기능을 잘 알아야 한다.
# Map, Set
Map : key,value 저장하는 자료형 -> "자료간의 연관성"을 표현하기 위해 씀. Map 만드는 법 : new Map() 자료 넣는 법 : set() 자료 꺼내는 법 : get() 자료 삭제하는 법 : delete() 자료 갯수 세는 법 : size 특징
# Symbol
Symbol 이란? : Object의 비밀스런 key값 만드는 법 var 심볼 = Symbol('설명'); 용도 비밀스런 데이터를 저장하고 싶을 때 사용함. import 해온 파일/라이브러리 쓸 때 거기 있던 object에 자료를 추가하고 싶으면(기존 코드 해칠 염
# for in/for of
반복문의 용도 코드 여러번 실행 array,object에서 자료 꺼내쓸 때 For 반복문 종류 for(초기값;조건식;증감식) 복잡함 forEach() arr.forEach array 전용 for in for(var key in 오브젝트) object 전용 예시
# Async/await
Async : Promise 대신 사용할 수 있는 ES8 문법 async를 function 앞에 붙이면 함수가 Promise 역할을 할 수 있다. 단점 : 성공만 가능 await 키워드 : 프로미스가 해결될 때까지 기다리게 해줌. async function 안에서만
# Promise 연습문제
htmljsjQurey로 Ajax 요청을 하려면 $.ajax 혹은 $.get 를 써야한다.(상단에 jQuery 설치 파일도 첨부되어 있어야 함.)
# class, extends, getter, setter 연습문제
정답!정답!: a가 b로부터 생성된 오브젝트인지 아닌지를 T/F로 알려주는 연산자.getter에는 parameter 쓰면 안됨!, return 써줘야함몇 개가 들어올지 모르기 때문에 rest parameter(...)이용해서 array에 저장.forEach 사용해서 하
# Promise
📌 Promise란 무엇인가? 성공/실패 판정 기계. (성공하면 then(), 실패하면 catch()를 실행) ⭐️ 콜백함수 디자인 패턴이 마음에 안들시 대신 사용할 수 있음. 새로운 기능이라기보다는 코드/함수 디자인 패턴일 뿐이다. ajax 요청, setTimeou
# import, export를 이용한 파일간 모듈식 개발
JS 파일에 있는 변수, 함수 등을 다른 파일에서 가져다 쓰는 방법 (html - js, js - js 간에 가능) type = "module" 로 수정. 가져올 파일의 요소를 import 해당 JS 파일에서 해당 요소를 export 기본 형태 html librar
# Destructuring 문법
: Array, Object에 있는 중요한 자료들을 변수로 꺼내고 싶을 때 사용하는 문법 1. Array 안에 있는 데이터를 변수에 담는 방법 var arr = [2,3,4]; var [a,b,c] = [2,3,4]; 등호로 기본값 지정 가능 var [a,b,c =
# 동기 / 비동기처리, 콜백함수
Q. 자바스크립트는 동기적인가 비동기적인가? >### 자바스크립트는 동기적으로 처리된다.(Synchronous) 동기식 : 한번에 코드 한줄씩 차례로 처리하는 방식 원인 : stack은 하나밖에 없기 때문에. 병렬 x >### 자바스크립트는 가끔 비동기적인 처리도
# constructor, prototype 연습문제
문제 1 > ### 아래 오브젝트와 똑같은 오브젝트를 constuctor를 사용해 만들고, sayHi() 함수도 추가하기 예상 정답: 함수 만드는 부분이 조금 헷갈렸음! (정답!) 문제 2 >### 다음 코드의 출력 결과는? 예상 정답: 'Kim' (정답!) 이유
# getter, setter
필요성 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는게 대세를 이루고 있다. 이유 : 데이터의 무결성을 보존하기 위해. >### "원본 데이터는 immutable 해야 한다." 장점 object 안의 데이터가 복잡할 수록
# 객체지향 (4) class, extends, super
📌 class ES6의 class 신문법으로 constructor를 만들 수 있다. 만드는 방법 class 안에 constructor를 만들고 새로 생성할 때는 이전과 동일하게 new 키워드를 사용함. 상속가능한 함수 추가하기 방법 1) 함수를 construct
# 객체지향 (3) Object.create
Object.create( ) 상속을 이용해 오브젝트를 만드는 간단한 문법(ES5) class 문법에 밀려 인지도는 낮음. 사용법 Object.create(부모 object); 부모 object를 prototype으로 만들 수 있다. 예제 자식 object는 비어
# 객체지향 (2) Prototype
Prototype: 부모 유전자 constructor를 만들면 자동으로 생긴다. 상속기능을 구현하는 장치이다. >### ⭐️ prototype에 값을 추가하면 모든 자식들이 물려받을 수 있다. constructor.prototype.속성 = 값; 자바스크립트에서 어
# 객체지향 (1) constructor
constructor : object 생성기계 object는 그냥 복사하면 안됨. object를 여러개 복사하고 싶을 때 사용함. 상속기능을 구현하는 장치이다. 상속(inheritance) constructor가 가진 속성들을 그대로 물려받는 오브젝트를 만드는 것.