- 전체보기(196)
- object(5)
- array(4)
- Map(4)
- 재귀함수(4)
- asynchronous(3)
- class(3)
- inheritance(3)
- API(3)
- git(3)
- 깊이우선탐색(DFS)(3)
- variable(3)
- promise(3)
- Event(3)
- JOIN(3)
- filter(3)
- IIFE(2)
- parseInt(2)
- callback Hell(2)
- split()(2)
- async(2)
- reverse(2)
- position(2)
- return(2)
- 알고리즘(2)
- Fetch(2)
- find(2)
- function(2)
- Sort(2)
- Defer(2)
- fill(2)
- isNaN(2)
- Object Oriented Programming(2)
- setInterval(2)
- slice(2)
- setTimeout(2)
- JSON.parse(2)
- Conditionals(2)
- canvas(2)
- Custom Hooks(2)
- 인증(2)
- Math.random(2)
- arrow function(2)
- private field(2)
- Prototype(2)
- encapsulation(2)
- reduce(2)
- optional chaining(2)
- 빅오표기법(2)
- foreach(2)
- First-class Function(2)
- callback(2)
- Default parameters(2)
- localstorage(2)
- async/await(2)
- 인가(2)
- SOME(2)
- 상태트리(1)
- else if(1)
- ScrollIntoView(1)
- contains()(1)
- static methods(1)
- terminal(1)
- numberic seperators(1)
- absolute(1)
- link(1)
- requestAnimationFrame(1)
- instance(1)
- JSON.stringfy()(1)
- relative(1)
- Spread Syntax (...)(1)
- querySelector(1)
- main axis(1)
- library(1)
- Polymorphism(1)
- default parameter(1)
- JSON.stringify(1)
- catch(1)
- http(1)
- Box Model(1)
- CRA(1)
- linux(1)
- at method(1)
- prototypal inheritance(1)
- transform(1)
- voiceChanged(1)
- 인접리스트(1)
- Event Handler(1)
- Request(1)
- Response(1)
- reference value(1)
- fillRect(1)
- operator(1)
- finally(1)
- 관심사의 분리(1)
- chaining method(1)
- first-of-types(1)
- findIndex(1)
- 시맨틱 태그(1)
- speak(1)
- 메모이제이션(1)
- speechSynthesis(1)
- recursion(1)
- navigator(1)
- for..of(1)
- flatmap(1)
- 시간복잡도(1)
- 정렬 알고리즘(1)
- localScope(1)
- ARC(1)
- React(1)
- Math.round(1)
- instanceof(1)
- isFinite(1)
- box tag(1)
- Module(1)
- router(1)
- OR assignment operator(1)
- ScrollHeight(1)
- capturing(1)
- 공간복잡도(1)
- item(1)
- Object.assign(1)
- Document(1)
- 빈도수 세기(1)
- await(1)
- 이진트리(1)
- useEffect(1)
- event loop(1)
- looping objects(1)
- searchParams(1)
- Side Effect(1)
- fixed(1)
- intersection observer api(1)
- parseFloat(1)
- node.js(1)
- parameter(1)
- while(1)
- 다중필터(1)
- Math Module(1)
- perspective(1)
- Flex(1)
- JavaScript(1)
- useParams(1)
- function declaration(1)
- Higher-order Function(1)
- UI(1)
- abstraction(1)
- Intl(1)
- method(1)
- main(1)
- Flexbox(1)
- layout(1)
- Object.create(1)
- selector(1)
- keyframes(1)
- hoisting(1)
- isInteger(1)
- ...arr(1)
- AJAX calls(1)
- prototype chain(1)
- classList(1)
- Math.PI(1)
- 쿼리스트링(1)
- template literals(1)
- json(1)
- assignment operators(1)
- concat(1)
- const(1)
- let(1)
- cross axis(1)
- replace(1)
- static properties(1)
- 시맨틱 웹(1)
- AND assignment operator(1)
- object literal(1)
- list-style-type(1)
- Rest parameters(1)
- fillStyle(1)
- object constructor(1)
- loop(1)
- getElementById(1)
- 가중치 방향그래프(1)
- carriage return(1)
- looping arrays(1)
- String(1)
- constructor function(1)
- key(1)
- clientHeight(1)
- commit(1)
- context(1)
- 이분검색(1)
- Shorthand property names(1)
- nullish assignment operator(1)
- for..in(1)
- jquery(1)
- 개발일기(1)
- closePath(1)
- 방향 그래프(1)
- State(1)
- inline block(1)
- hider-order function(1)
- this(1)
- self(1)
- 메타 태그(1)
- tofixed(1)
- 선언(declaration)(1)
- offsetHeight(1)
- Sass(1)
- Chaining(1)
- @property(1)
- React-slick(1)
- script(1)
- nullish coalescing operator(1)
- MediaQuery(1)
- apply method(1)
- splice(1)
- static method(1)
- preventDefault(1)
- Date object(1)
- git rabase(1)
- 인접그래프(1)
- Letter Spacing(1)
- block(1)
- function expression(1)
- execution context(1)
- inline(1)
- console(1)
- Ternary operator(1)
- Scope Chain(1)
- item tag(1)
- bind method(1)
- after(1)
- appendChild(1)
- framwork(1)
- 무방향 그래프(1)
- addEventListener(1)
- Flat(1)
- geolocation(1)
- short-circuiting(1)
- display(1)
- computed properties(1)
- github(1)
- parameters(1)
- JSX(1)
- toggle(1)
- 그리디 알고리즘(1)
- text-transform(1)
- event delegation(1)
- useNavigate(1)
- svg(1)
- asynchoronous callback(1)
- call method(1)
- 그래프(1)
- speechSynthesisUtterance(1)
- 조합알고리즘(1)
- Props(1)
- 선택자(selector)(1)
- CreateElement(1)
- if(1)
- remainder operator(1)
- synchoronous callback(1)
- Date(1)
- BigInt(1)
- bubbling(1)
- grid(1)
- getVoice(1)
- 위코드(1)
- WeCode(1)
- 넓이우선탐색(1)
- 결정 알고리즘(1)
- closure(1)
- private method(1)
- 절대경로(1)
- 상대경로(1)
- padStart()(1)
- 3D(1)
- getters and setters(1)
- promise.all(1)
- set(1)
- transform-style(1)
- nullish operator(1)
- Stateless(1)
- new line(1)
- beginPath(1)
- property value shorthand(1)
- container(1)
- scope(1)
- in operator(1)
- for loop(1)
- webspeech API(1)
- animation(1)
- tag(1)
- argument(1)
- Promise Chaining(1)
- public field(1)
- console API(1)
- fillText(1)
- insertAdjacentHTML(1)
- destructuring assignment(1)
- setters and getters(1)
- scroll event(1)
- aside(1)
- refactoring(1)
- substring(1)
- 클론코딩(1)
- DOM traversing(1)
- getContext(1)
- every(1)
You Aren't Going To Need It
Refactoring 2판 마틴파울러 2.5 ~ 정리 특정한 기술, 도구, 아키텍처 등을 내세울 때마다 항상 문제점을 찾는다. 무언가를 언제, 어디에 적용할지 판단하려면 손익을 제대로 이해해야 한다. 리팩터링의 궁극적인 목적은 개발 속도를 높여서, 더 적은 노력으로
로컬 상태 관리 Apollo Client에 위임하기 'local-only fields'
client측에서만 사용하는 상태관리를 해야할 때가 있다. 따로 서버 측으로부터 데이터를 요청하는 것이 아니라, client 측에서 localStorage, cookie 등으로 관리를 해주어야 할 때가 있는데, Apollo Client에서는 이때 로컬 상태 관리를 직접
[리팩토링 2판] Chapter 2. 리팩터링 원칙 정리
리팩터링 : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 리팩터링(하다) : 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. 특정한 방식에 따라 코드를 정리하는 것만이 리팩터링이다. 리팩터링하는
모던 자바스크립트 Deep Dive 49장 정리 - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축
Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있다. Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러개)의 파
모던 자바스크립트 Deep Dive 48장 정리 - 모듈
모듈(module)이란 애플리케이션을 구성하는 개발적 요소로서 재사용 가능한 코드 조각을 말함. 일반적으로 모듈의 기능을 기준으로 파일 단위로 분리함. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 함.✔️ 모듈은 공개가 피요한 자산에 한정하여
모던 자바스크립트 Deep Dive 47장 정리 - 에러 처리
발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 종료됨.Error 생성자 함수에는 에러를 상세히 설명하는 에러 메세지를 인수로 전달할 수 있음. Error 생성자 함수가 생성한 에러 객체는 message 프로퍼티와 stack 프로퍼티를 갖는다. message 프로
모던 자바스크립트 Deep Dive 46장 정리 - 제너레이터와 async/await
ES6에 도입된 제너레이터(generator)는 코드 불록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 1\. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지 시키거
use case 간단한 정리
시스템과 사용자의 상호작용을 다이어그램으로 표현한 것. 사용자의 관점에서 시스템의 서비스 혹은 기능 및 그와 관련한 외부 요소를 보여주는 것이다.사용자가 시스템 내부에 있는 기능 중에 어떤 기능을 사용 할 수 있는지 나타내며 유스케이스 다이어그램을 사용함으로써 고객과
모던 자바스크립트 Deep Dive 44장 정리 - REST API
REST(Representational State Transfer)의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고, REST API는 REST를 기반으
모던 자바스크립트 Deep Dive 43장 정리 - Ajax
Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 🔖 Ajax 이전의 웹페이지 작동 방식
모던 자바스크립트 Deep Dive 45장 정리 - 프로미스
먼저 서버의 응답 결과를 반환하는 GET 요청을 위한 함수를 작성해보면, ⭐️ 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에
테스트 주도 개발 방식으로 컴포넌트를 만들어보자-! feat) jest
지금껏 나는 그냥 무작정 기능들이 필요할 때마다 별다른 고민없이 컴포넌트를 무작정 만들어왔던 것 같다. 흑,, 괜차나 이제부터라도 제대로 고민해도... 늦지않아...(?)아무튼,,, 내가 "왜" 이 컴포넌트를 만드는지, 이 컴포넌트의 목적이 무엇인지 고민없이 만들면,
[git] 부분 커밋 하고 싶을 때
상황 : 기존의 커밋을 취소하고, 내가 한 커밋 파일 중 일부를 제외시키고 다시 커밋하고 싶을 때이전 커밋 되돌리기 git reset HEAD^커밋 잘 취소됬는지 확인해주기 git log제외시키고 싶은 파일 이름 확인하기 git statusgit add .해당 파일 제
모던 자바스크립트 Deep Dive 37장 정리 - Set과 Map
Set 객체는 중복되지 않는 유일한 값들의 집합(set)이다. 배열과 유사하지만, Set 객체는 배열과 다르게 동일한 값을 중복하여 포함할 수 없고, 요소 순서에 의미가 없으며 인덱스로 요소에 접근할 수 없다. Set은 수학적 집합을 구현하기 위한 자료구조로, Set을
모던 자바스크립트 Deep Dive 36장 정리 - 디스트럭처링 할당
디스트럭처링 할당(destructuring assignment, 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말함. 배열 디스트럭처링 할당의 대상(할당문의
모던 자바스크립트 Deep Dive 35장 정리 - 스프레드 문법
ES6에서 도입된 스프레드 문법(spread syntax) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬.Arraym String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와
모던 자바스크립트 Deep Dive 34장 정리 - 이터러블
이터레이션 프로토콜 이터러블 이터레이터 빌트인 이터러블 for ...of 문 이터러블과 유사 배열 객체 이터레이션 프로토콜의 필요성 사용자 정의 이터러블 사용자 정의 이터러블 구현 이터러블을 생성하는 함수 이터러블이면서 이터레이터인 객체를 생성하는 함수 무한 이터러블
모던 자바스크립트 Deep Dive 33장 정리 - 7번째 데이터 타입 Symbol
ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값. 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 값은 Symbol 함수를 호출하여 생성! 👉 Symbol 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과
모던 자바스크립트 Deep Dive 42장 정리 - 비동기 프로그래밍
자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업중단)이 발
모던 자바스크립트 Deep Dive 41장 정리 - 타이머
만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링(scheduling a call)이라고 한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아님. 하지만