Today I Learned

초창기의 자바스크립트 자바스크립트로 할 수 있는 것들브라우저의 동작 원리초창기의 자바스크립트는 단순한 DOM(Document Object Model ... 문서에 접근하기 위한 일종의 인터페이스) 조작, alert・confirm 등의 간단한 이벤트 조작으로만 사용되었습

프로그램은 순차, 분기, 반복, 참조로 구성됩니다. 패러다임은 이 4가지 요소를 어떻게 이용할 것인가에 대해 다룹니다.객체지향은 제어 흐름에서 전환을 객체를 통하여 간접으로 통제합니다.함수형은 제어 흐름을 변수할당 통제를 통해 제어합니다.출처: https://

자료구조 + 알고리즘 = 프로그램자료구조메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로, 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있습니다.상황에 맞는 올바른 자료구조를 고를 수 있는 능력이 필요하다!Stack,

Last In First Out스택 메모리스택은 Array (push, pop) / Linked List (top = head) 로 표현 가능하다.연습문제 올바른 괄호스택의 개념으로 count +1, -1을 사용하여 스택 배열 생성 없이도 문제를 풀 수 있다.First

이진 트리를 이용한 자료구조우선순위 큐 일반적인 FIFO(First In First Out)의 큐와 달리 우선순위가 높은 요소가 먼저 나가는 큐 우선순위 큐는 자료구조가 아니라 개념일 뿐으로, 다양하게 사용 가능하다.힙 이진트리 형태로, 우선순위가 높은 요소가 먼

요소들을 일정한 순서대로 열거하는 알고리즘특징 정렬 기준을 사용자가 정할 수 있음 비교식 정렬 / 분산식 정렬 삽입, 선택, 버블, 머지, 힙, 퀵 등 다양한 정렬 방식 존재비교식 정렬 다른 요소와 비교를 하며 정렬하는 방법버블 정렬서로 인접한 두 요소를 검사하

그래프 탐색 알고리즘같은 깊이에 해당하는 정점부터 탐색하는 알고리즘 시작 지점에서 가까운 정점부터 탐색Queue 를 이용하여 구현V (정점의 수), E (간선의 수) ... 시간복잡도 O(V + E)그래프 탐색 알고리즘최대한 깊은 정점부터 탐색하는 알고리즘 시작 정

평가 코드가 계산되어 값을 만드는 것ex) 1 + 2 가 평가되면 3(1 + 2) + 3 은 (1 + 2) 가 평가되어 3 + 4, 3 + 4 가 평가되어 7\[1, 2] 는 배열로 평가됨일급 값으로 다룰 수 있음 변수에 담을 수 있음 함수의 인자로 사용될 수

전개연산자도 이터레이터 프로토콜을 따름...arr, ...set, ...map, ...map.keys(), ... 의 방식으로 사용할 수 있음 제너레이터: 이터레이터이자 이터러블을 생성하는 함수즉, 제너레이터는 이터레이터를 리턴하는 함수function \*gen() {

var: function scope, 변수 재할당 가능 호이스팅 ... 실행할 때, function scope 상 맨 위로 선언이 끌어올려짐. (값 할당 전에 호출될 수 있음 ... 예기치 못한 버그 발생 가능)let: block scope, 변수 재할당 가능co

주어진 인자들을 통해 하나의 값으로 축약을 해나가는 함수go 와 다르게 함수를 리턴하는 함수함수들이 나열되어 있는 합성된 함수를 만드는 함수curry 함수는 받아둔 함수를 원하는 시점에서 평가시키는 함수함수를 받아서 함수를 리턴하고, 원하는 갯수만큼의 인자가 들어왔을

명령형 방식위 방법은 버튼을 추가하거나 했을 때, 구문들이 늘어나면서 코드 작동 예측이 힘들어짐.토글 버튼의 기능이나, 화면의 동작을 하나로 묶어 독립작인 형태로 만들어 주는게 좋다.ToggleButton 이라는 이름으로 추상화 하는 방법위 방법은 기능 추가와 확장 등

ES6로 넘어오면서 위 코드에서 바로 객체에서 값들을 꺼내오게끔 수정할 수 있다.ToDoForm 생성 파라미터에 이벤트 콜백을 넣고, text 를 입력 받으면 해당 콜백을 통해 text를 넘겨주는 방법위 코드는 아무것도 입력을 하지 않았을 때에도 todo 에 추가하게

비동기 Api의 처리는 한 곳에서 모아서 관리하는게 좋다 (api.js)Api 의 경우 처음부터 데이터를 만들어서 코드를 짜내려가기 보다는, 더미데이터를 만들어서 화면에서 렌더링이 되는지 테스트하면서 작성하는 것이 좋다.promise 는 비동기 작업을 제어하기 위해 나

fetch api 비동기 http 요청을 좀 더 편하게 사용할 수 있게 해주는 api XMLHTTPRequest 를 대체하여 사용됨 Promise 기반으로 동작 fetch 의 두번째 인자로 옵션을 줄 수 있음 fetch 응답 결과인 res 에서 리턴된 값은 Respo

SPA 일반 정적 웹페이지 -HTML 파일들로 페이지가 구성 url이 파일 경로 & 이름이 됨 url 상에 파일 명이 없을 경우 index.html 을 찾으려 시도 모든 게시물마다 html 을 만들어야 함 이러한 단점을 해결하기 위해 웹 애플리케이션이 등장

CSS 심화 (1) float 요소의 수평정렬에 사용 최근에는 1차원 레이아웃을 만드는 flex 가 있기 때문에 float 는 잘 사용되지 않음. display block 요소 ... float 속성을 부엽하면 inline 요소가 자동으로 block 으로 수정됨 (fl

기본적으로 History API 기반의 SPA 를 배포하려면 해당 서비스에서 404 error 를 처리할 수 있는 옵션이 필요함. (hash bang 이나 url 처리가 필요 없는 단일 페이지의 경우에는 필요가 없음)여러 클라우드 업체에서 제공하는 서버에서 직접 호스팅

무한스크롤: 컨텐츠를 페이징하는 기법 중 하나 아래로 스크롤하다가 컨텐츠의 마지막 요소를 볼 때 다음 컨텐츠가 있으면 불러오는 방식 SNS(페이스북, 트위터, 인스타그램) 에서 주로 사용됨무한 스크롤 구현 방식 (2가지)1\. window 의 scroll 이벤트를

고양이 사진 API 를 통해 사진과 폴더 렌더링폴더 클릭 시, 내부 폴더의 사진과 폴더를 보여줌 (현재 경로가 어디인지도 렌더링)루트 경로가 아닌 경우, 파일 목록 맨 앞에 뒤로가기를 넣음사진 클릭 시, 고양이 사진을 모달창으로 보여줌 (esc, 사진 밖 클릭으로 닫음

To Do App 만들기 user api 를 통해 사용자 목록을 그리고, 클릭하면 해당 사용자의 todo 목록을 가져오게 한다. 할 일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가하게 한다. TODO 를 추가하고 삭제하는 동안 낙관적 업데이트를 사용한

CSS 심화 (2) Grid function (container 에 사용) repeat(반복되는 갯수, 단위) repeat(2, 100px 200px) ... (100px|200px) cell 을 두번 반복 (100 | 200 | 100 | 200) minmax(최소 너비, 최대 너비) ... window 크기가 커지거나 줄어들 때 반응 fit-conte...

CSS 심화 (2) Grid function (container 에 사용) repeat(반복되는 갯수, 단위) repeat(2, 100px 200px) ... (100px|200px) cell 을 두번 반복 (100 | 200 | 100 | 200) minmax(최소

@if 조건에 소괄호를 열고 닫지 않아도 된다.반복문 1) @for $요소 from 시작점 through 끝나는지점 ... for (let i = 0; i < 3; i++) 와 같음 sass 에서는 through 대신 to 를 사용가능하다. (through

클래스 바인딩속성의 이름은 '' 로 묶어주어야 함data() 객체 데이터 내부에서 반응형 데이터를 활용해야 한다면, 이 데이터를 computed(계산된 데이터) 로 만들어 this 키워드와 함께 사용할 수 있다.객체 데이터 대신 배열 데이터로 동적인 html 클래스를

v-bind: 단방향 데이터 바인딩v-model: 양방향 데이터 바인딩 한글입력에서는 한 글자가 완료되고 다음 글자로 넘어가야 반영이 되는 현상이 있음 ... v-bind 를 활용한 양방향 데이터 바인딩 방법으로 사용해야 함v-for 을 활용한 데이터 출력을 통한 바

SFC ... 파일 단위로 Vue 를 관리 / 편리하지만 변환과정을 거쳐야하고, 패키지가 필요import \* as Vue from 'vue': 상대 경로가 없는 import ... node_modules 에 설치한 패키지에서 가지고 오는 방법 \* as ... 패키

Vue (5) 플러그인

<router-link> ... 페이지로 이동 / html 의 <a> 와 비슷<router-view> ... 페이지를 출력해주는 영역을 지정npm i vue-router@nextroutes 폴더의 vue 컴포넌트들은 하나의 페이지 역할을 한다고 보면 됨

스타일 시트를 이용 / 인라인 스타일 이용 / CSS in JS(emotion 라이브러리) 이용emotion npm i @emotion/react npm i -D @emotion/babel-plugon mpm i @emotion/styledcraco(create-

리액트를 잘 다루기 위해서는 컴포넌트를 잘 만들줄 알아야 하며, 컴포넌트의 중요도는 크다.text, header

컴포넌트는 트리 구조로 이루어져 있어, 프론트 개발을 하다보면 트리 레벨이 깊어지게 된다. 레벨이 깊은 트리 구조에서 최상위 컴포넌트와 최하위 컴포넌트에서 prop 을 주고 받고 싶다면 중간에 있는 컴포넌트를 거쳐 차례차례 넘겨줘야 할 것 또한 공통 상위 컴포넌트가

Upload(Drag & Drop) input type="file" input 은 꾸밀 수 없음 ... toggle 처럼 숨겨서 사용 input 에 대한 useRef 를 통해 엘리먼트에 직접 접근하도록 구현Badge 알림 등이 쌓인 수를 보여주는 UIIcon

useKey / useKeyPress 웹에서 단축키를 구현할 때 주로 사용useClickAway 특정 영역 외의 부분을 클릭하면 이벤트를 발생시킴 (modal, popup 등에서 주로 사용)useResize 타겟 엘리먼트의 크기가 변화하면 이벤트를 발생시킴useL

axios: 브라우저나 Node.js 에서 사용 가능한 http 클라이언트 라이브러리 promise 기반 동작 npm i axios / yarn add axiosJSON Placeholder: 간단한 api 제공 무료 서비스useReducer 를 통해 포스트 불러오

useImperativeHandle: 상위 컴포넌트에서 하위 컴포넌트를 이용하기 위한 함수들을 정의한 Hook라이브러리 등의 특수한 컴포넌트에서 상위 컴포넌트에서 하위 컴포넌트를 함수호출을 통해 제어하는 목적으로 사용Ref 를 통한 제어컴포넌트를 어떻게 설계해야 하는가

react 로만 만든 TODO를 타입스크립트로 재구현어플리케이션이 커지면 하위 컴포넌트가 많아지고, 데이터 전달을 위해 많은 컴포넌트를 거치게 됨 (Prop Drilling)Redux 는 Prop Drilling 을 해결하기 위해서 사용하는 라이브러리 자바스크립트 앱

MPA(Multi Page Application) + ajax + pushState ... 서버 사이드 렌더링브라우저가 페이지에 진입할 때 서버는 HTML 을 만들어서 내려주고, 이후로 페이지 전환이 발생하더라도 브라우저는 ajax 와 pushState 로 페이지 이동

수많은 데이터 속에서, 유의미한 정보를 찾고, 시각화 한다. 도로 교통정보 전광판, 코로나 전국 확진자 수 현황 등 ...주로 대시보드 형태더 자세한 정보를 시각화한 스크롤링 시각화시각화가 효과적인 이유 데이터에 형태를 부여하여 한눈에 파악할 수 있기 때문 데이터

selection ... D3 가 DOM 을 조작할 때 사용하는 기본 객체 단위d3.select(selector) selector ... Element 직접 지정하거나 selector 를 넣음 querySelector 로 DOM element 를 찾음 인자와 일치

selection.insert 새로운 요소를 삽입하는 메서드 위치를 지정하여 추가할 수 있고, 위치를 지정하지 않으면 선택한 selection 의 자식요소로 추가된다.selection.clone 선택한 모든 요소를 복제하여 선택한 요소 바로 뒤에 삽입하는 메서드

D3.js 데이터 조인

환율계산기 구현