CodingCredit

DOM 연습하기 li 하나를 생성하는 과정 const root = document.getElementById("root"); const creatLi = function () { const li = document.createElement("li"); const input = document.createElement("input"); const span = document.createElement("span"); input.type = "checkbox"; span.textContent = "음식"; //li.textContent로 하면 input이 출력되지 않는다. li.appendChild(input); li.appendChild(span); root.appendChild(li); return li;..

재귀 익숙해지기 재귀함수를 짜면서 느끼는건 어렵다는 느낌도 있지만 결국엔 익숙하지 않기 때문에 어렵다고 생각되는 것 같다는 것이다. 재귀라는 낯선 흐름을 억지로 생각하려고 하기때문에 머리가 아프다는 느낌이었다. 결국 재귀라는 것에 익숙해지는 것이 재귀를 쉽게 다룰 수 있는 방법이 될 것이라 생각한다. 재귀함수 - unpackGiftbox 문제 : 선물 상자에 대한 정보를 담은 배열과 문자열을 입력받아 조건에 맞는 선물이 있는지 여부를 리턴해야 한다. 입출력 예시 : const giftBox = ['macbook', 'mugcup', ['eyephone', 'postcard'], 'money']; let output = unpackGiftbox(giftBox, 'iphone'); console.log(ou..

정렬과 재귀 정렬 정렬은 배열에만 적용되는 개념이라고 할 수 있다. 그 이유는, 배열과 객체의 가장 큰 차이인 순서때문이다. 배열에서만 순서라는 값이 적용되므로 정렬을 한다는 의미는 배열을 사용한다는 의미와 같다. 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을 결합하여 렌더링 트리를 형성 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산 개별 노드를 화면에 페인트 랜더링 엔진, 웹킷의 동작과정 웹킷은..