CodingCredit

정렬과 재귀 정렬 정렬은 배열에만 적용되는 개념이라고 할 수 있다. 그 이유는, 배열과 객체의 가장 큰 차이인 순서때문이다. 배열에서만 순서라는 값이 적용되므로 정렬을 한다는 의미는 배열을 사용한다는 의미와 같다. array.sort var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Zeros', value: 37 } ]; // value 기준으로 정렬 items.sort(function (a, b) { if (a.value > b.value) ..

reduce 연습하기 대표적인 배열 내장 메소드 중 reduce가 가장 어려운 것 같다. 조금더 익숙해질 때까지 반복 연습해야겠다. ruduce 예제 객체배열에서의 값 합산. 객체로 이루어진 배열에 들어있는 값을 합산하기 위해서는 반드시 초기값을 줘야한다. var initialValue = 0; var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { return accumulator + currentValue.x; },initialValue) console.log(sum) // 6 배열의 중복 항목 제거 let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; let result = a..

Twittler과제 Today's ?! console.log로 debugging console.log로 debugging하는데 익숙해져야겠다는 생각을 했다. 필터링 함수를 작성하였는데, 데이터가 제대로 push되어있지 않은게 문제였는데 같은 스터디 분이 console.log로 찍고 바로 알아보셨고 끝나고 혼자해보니 금방 해결할 수 있었다. 맨위에 'use strict'작성 →스트릭모드로 작성하겠다. flex의 grow(팽창 지수), shrink(수축 지수), basis(기본 크기) 그동안 grow만 신경써서 작성하고 나머지는 1 auto로 작성하면서 별로 신경도 쓰지 않았다. tweet리스트 전체 ul의 basis를 auto로 했을 때 tweet리스트 전체 ul의 basis를 1px줬을 때 스크롤이 ba..

랜더링, 노드, iterable, 렉시컬스코프 오늘은 주말이라 평소 궁금했던 용어들을 공부해봤다. 아직 전부 이해된 건 아니지만, 기록을 위해 정리해서 작성하고자 한다! 랜더링 랜더링은 한마디로 클라이언트(사용자)에서 서버에 파일을 받아 브라우저에 뿌려주는 과정이라고 볼 수 있다. data를 html로 변환해서 렌더링 엔진에 전달하고 렌더링 엔진은 html로 입력받은 값을 해석해서 표준출력장치(모니터) 로 출력해준다. 랜더링 과정 HTML 마크업을 처리하고 DOM 트리를 빌드 CSS 마크업을 처리하고 CSSOM 트리를 빌드 DOM 및 CSSOM을 결합하여 렌더링 트리를 형성 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산 개별 노드를 화면에 페인트 랜더링 엔진, 웹킷의 동작과정 웹킷은..

동기와 비동기 모르는 개념을 검색하면 자꾸 동기 비동기라는 용어가 나와서 공부해봤다. 동기 비동기? 동기 : 요청과 그 결과가 동시에 일어난다. 비동기 : 요청과 결과가 동시에 일어나지 않는다. 동기와 비동기는 어떤 작업을 처리할 때, 시각의 차이라고 할 수도 있다. 동기는 같은 목적의 행위가 동시에 이루어지며 (ex. 계좌이체에서의 출금과 입금) 비동기는 목적도 다르고 동시에 이루어지지도 않는다. (ex. 나는 반죽을하고, 오븐은 구워서 빵을만든다.) (ex 빵이 구워질때까지 가만히 기다린다면 나는 블록상태이다.) (ex 빵이 구워지는 동안 다른요리를 한다면 나는 논블록 상태이다.) Non-Blocking I/O 란? 자바스크립트는 기본적으로 싱글쓰레드 방식을 채택중입니다. 이 때 비동기적 처리(Asy..

Twittler 과제 수행중_ DOM DOM.. 너무 생소해서 아직 감도 안오는데 twittler라는 트윗창을 만드는 과제를 받았다. 처음엔 키보드에 손만 까딱까딱.. 뭐부터 해야하는지 처음으로 살짝 멘붕왔다. 자바스크립트로 문제만 풀다가 DOM으로 웹페이지를 구현하려고 하니, 갑자기 너무 생소했던 것 같다. 근데 하나씩 하다보니 자바스크립트로 알고리즘을 풀면서 했던 생각의 경로를 따라가게 되는 것 같았고 어찌어찌 거의 끝낼 수 있었다. 뭐야 이거 일기아닌데.. querySelectorAll로 할당한 변수에 addEventListener 메쏘드 사용하기 const usernameAll = document.querySelectorAll(".username"); const sameUser = function..