전체 글
-
JS_코드를 값으로 다루는 go, pipp, curry 함수TIL/프로그래머스 웹 데브코스 2021. 8. 12. 10:10
자바스크립트에서는 코드를 값으로 다루는 go, pipe, curry라는 함수들 있다. go 함수 함수를 위에서부터 아래로, 왼쪽에서부터 오른쪽으로부터 평가하면서 연속적으로 함수를 실행하고 이전에 실행된 함수의 결과를 다음 함수에 전달하는 함수 인자들을 받는데, 인자들을 통해서 하나의 값으로 축약을 해나가는 로직으로 구현되어 있다. 이 인자들을 이용해서 인자의 1번째 인자를 그 다음 인자(함수) 에게 전달을 하고 그 함수의 결과를 또 다음 함수의 인자로 전달을 해야한다. 즉, 해당 로직은 reduce이다. args를 축약해서 하나의 값으로 만드는 과정이다. 앞서 알아보았듯 초기값을 전달하지 않고 args를 그대로 전달해도 첫번째 값이 뽑혀 초깃값으로 사용이 될 것이다. const go = (...args)..
-
JS_Virtual DOMTIL/프로그래머스 웹 데브코스 2021. 8. 10. 18:44
Virtual DOM 앞서 DOM에서는 자바스크립트를 이용해 DOM 객체를 제어하고 이를 통해 클라이언트와 상호작용을 할 수 있는 웹 페이지를 구현할 수 있다고 하였다. DOM이 있는데 굳이 Virtual DOM이라는 개념이 나오게 된 배경을 먼저 살펴보자. jQuery가 등장하면서 JS를 이용해 AJAX 개발을 용이하게 하고 DOM을 동적으로 조작해 많은 기능을 수행할 수 있는 웹 페이지들이 등장하였다. 하지만, 트위터, 페이스북과 같이 스크롤을 조금만 조작해도 몇 천개의 elemennt 들이 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 성능 저하를 야기시켰고, 모바일 브라우저 환경에서는 더욱 취약했다. 또한, 당시 jQuery를 이용한 개발 방법이 MVC 등의 데이터 모델들..
-
JS_제너레이터TIL/프로그래머스 웹 데브코스 2021. 8. 10. 15:30
Generator 이터레이자이자 이터레이터를 생성하는 함수를 말한다. 즉, 제너레이터는 이터레이터를 리턴하는 함수이다. 이때 이터레이터는 Well formed Iterator이다. 또한, 제너레이터는 순회할 특정 값을 문장으로 표현하는 방법이자 함수라고 부르기도 한다. 자바스크립트에서는 이터러블이면 순회할 수 있다. 그런데, 제너레이터는 이러한 문장을 순회 할 수 있는 값으로 만들 수 있기 때문에 제너레이터를 통해서 어떠한 상태나 어떠한 값이든 순회 할 수 있게 만들 수 있다고 한다!!! 제너레이터 함수를 사용하면 Iteration protocol (이터레이션 프로토콜 = 이터레이터/이터러블 프로토콜)을 준수하며 보다 더 간편하게 이터러블을 구현할 수 있으며, 비동기 처리시 유용하게 사용된다. 제너레이터..
-
JS_IterableTIL/프로그래머스 웹 데브코스 2021. 8. 10. 09:25
사용자 정의 Iterable을 구현하면서 Iterable을 더 자세히 알아보자. 3, 2, 1 순서로 출력되는 Iterable을 만들어보자. Iterable은 Symbol.iterator Method를 구현하고 있어야 하며 Iterable이 가지고 있는 Symbol.iterator Method는 iterator 를 반환해야한다. 반환하는 iterator는 next Method를 가지고 있으며 next는 {value, done}을 가지고 있는 객체를 반환해야 한다 아래와 같은 Iterable은 Symbol.iterator Method를 통해서 iterator를 반환 할 수 있고 next를 통해서 내부의 값을 조회할 수 있게 된다. 내부의 값을 조회할 수 있다는 이야기는 아래와 같이 순회를 할 수 있다는 의..
-
JS_리스트 순회_Array, Set, MapTIL/프로그래머스 웹 데브코스 2021. 8. 9. 21:37
자바스크립트의 리스트 순회 ES6의 이전/ 이후 방식으로 크게 변경이 된 부분이라고 한다. 먼저, ES6 이전의 리스트 순회는 아래와 같이 for문을 사용하여 요소를 출력하였다. const list = [1, 2, 3]; for (var i = 0; i 주로 배열반복에 사용되며 for in .. ==> 주로 객체 반복에 사용된다. - for of 문법 const list = [1, 2, 3]; for (const a of list){ console.log(a); } - for in 문법..
-
CSS_ID, CLASS 그리고 selector카테고리 없음 2021. 8. 9. 12:26
CSS에서 ID와 CLASS의 차이점은? id : 한 요소에만 사용하며 class : 여러 요소에 중복으로 사용이 가능한 스타일 정의법이다. 예를 들어 id를 사용하여 Tag 스타일을 정의할 경우 특정 한가지 특정 요소에 스타일을 적용하지만 class를 사용하여 스타일을 정의할 경우 동일한 class 명을 가지고 있는 모든 요소에 스타일을 적용할 수 있다. 즉, 아래와 같이 정리 할 수 있다. id : "유일"한 요소에 스타일을 적용. class: "복수"의 요소에 스타일을 적용. 만약 id가 여러개라면??? ㅁㅁㅁㅁㅁ 메뉴1 메뉴2 메뉴3 id는 한개의 태그에 독립적으로 존재해야하기 때문에 div 태그에는 어떠한 스타일도 적용되지 않는다. id = "menu"의 경우 문제 없이 스타일이 적용된다. li..
-
가장 큰 수_정렬_Javascirpt프로그래머스 문제풀이 2021. 8. 8. 17:18
JS 파이썬처럼 생각하면서 JS로 풀면 더 어려웠음 function solution(numbers) { var answer = ''; // a = 6. b = 10 인경우를 생각 // 숫자로 정렬하면 [10, 6, 2] 가 되는데 문자열로 정렬하여 [6, 2, 10]가 되도록 만들어야함 answer = numbers.sort((a, b) => `${b}${a}` - `${a}${b}`).join('') // 0 인 경우 예외처리 && 문자열로 정렬햇기에 내부 번호들이 문자로 변경됨에 따른 "0"비교함 return answer[0] === "0" ? "0" : answer } Python 풀이 def solution(numbers): answer = '' # numbers의 원소인 1000이하 숫자 비교를..
-
DOM(Document Object Model)TIL/프로그래머스 웹 데브코스 2021. 8. 6. 13:18
DOM 설명하기 전에 앞서 브라우저에 대해 간단히 알아보자. 브라우저 브라우저의 사전적 정의는 인터넷상에서 웹에 연결시켜주는 윈도 기반의 소프트웨이이다. 흔히 크롬, 파이어폭스, 사파리, 오페라와 같은 것들이다. 브라우저의 핵심 기능 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹 페이지를 서버에 요청을 하고 서버로부터 응답을 받아 브라우저에 표시해 주는 것이다. 브라우저는 서버를 통해 HTML, CSS, JS, 이미지 파일 등을 응답받고 HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 이런 과정을 랜더링이라 표현한다. 위와..