bubbleSort 공통 접근 방법 수행 시간 단축을 위해 정렬이 한 차례 끝난 후 어떤 요소도 위치가 바뀌지 않았다면 배열이 이미 정렬된 상태이므로 종료시킵니다. 비교를 위해 spread 를 이용해 값 복사를 한 후, 정렬이 한 차례 끝난 후 정렬된 배열과 원본 배열을 JSON.stringify 를 이용해 값 비교를 합니다. 만약 같으면 멈추고, 다르면 계속 정렬을 수행합니다. 해결방법1 이중 for문 이용하기 const bubbleSort = function (arr) { let copyArr = [...arr]; let tmp=0; for(let i=0;i
46장 제너레이터와 async/await 제너레이터 ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다. 제너레이터와 일반 함수의 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수의 정의 제너레이터 함수는 function* 키워드로 선언합니다. 그리고 하나 이상의 yield 표현식을 포함합니다. // 제너레이터 함수 선언문 function* func() { yield 1; } // 제너레이터 함수 표현식 const func = function*() { yiel..
45장 프로미스 프로미스(Promise) 자바스크립트는 비동기 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하여 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴을 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하여 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다.즉 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라..
Lv.0 369게임 사용언어 : JavaScript https://school.programmers.co.kr/learn/courses/30/lessons/120891?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [실행결과 화면] [풀이] 제출한 한줄코드를 보기 쉽게 풀어보면 이렇게 표현할 수 있습니다. function solution(order) { return String(order).split('').reduce( (acc,cur)=>{ if(['3','6','9'].includes(cur)) { return a..
와이어프레임 & 프로토타입 와이어프레임(wireframe) 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듭니다. 와이어프레임을 표현할 때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나눕니다 Lo-Fi Wireframe(Low Fidelity Wireframe) 손으로 빠르게 그린 수준의 와이어프레임을 의미합니다 작성하는데 시간이 많이 들지 않사 수정하거나 새로운 의견을 반영하기 쉽습니다 Mid-Fi Wireframe(Middle Fidelity Wireframe) Lo-Fi Wireframe을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi Wi..
사용자 친화 웹 UI/UX UX는 UI를 포함합니다. 또한 좋은 UX가 좋은 UI를 의미하거나, 그 반대도 보장하지는 않습니다. UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며 서로를 보완하는 역할을 합니다. UI(User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 자주 사용되는 UI 디자인 패턴 태그(tag) 태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 합니다. 태그를 붙임으로써 콘텐츠를 분류할 수 있고, 태그를 사용하여 관련 콘텐츠를 검색할 수도 있습니다. Tip : 태그의 추가와 제거를 자유롭게 할 수 있어야 합니다. 자동완성(Autocomplete) 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 ..
CSS 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 CSS를 활용하여 웹 사이트의 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. 화려하고 심미적인 부분 뿐만 아니라, 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인에도 유용하고, 사용하기에 따라 색약이나 장애인이 보다 편리하게 웹 애플리케이션을 이용할 수 있도록 할 수도 있습니다. 훌륭한 내부 기능을 가진 애플리케이션이라도 UI(user interface)가 없으면 사용자가 원활하게 사용하지 못한다. CSS 문법 구성 body { //셀렉터 color: red; // 속성 : 속성값 } 셀렉터 : 요소 이름이나 id, class 속성 : 요소에 적용할 속성 명 속성 값 : 요소에 적용할 속성의 값 CSS 스..
HTML 문서의 틀을 만드는 마크업 언어 tag 들의 집합 tag : 부등호()로 묶인 HTML의 기본 구성 요소, 닫는 순서 철저하게 지키기 self-closing tag : : 태그 내부에 내용이 없다면 사용 가능() 트리구조(부모와 자식 노드로 구성) 자주 사용되는 TAG와 특징 div vs span 공통점 : 영역을 설정할 때 사용한다 차이점 : div 태그는 한 줄을 모두 차지하지만, span은 컨텐츠의 크기만큼만 공간을 차지한다. img src 속성을 이용하여 이미지를 삽입한다. a href 속성을 이용하여 링크를 삽입한다 target 속성을 이용하여 기존 창으로 링크 이동할지 새창으로 링크 이동할지 선택 가능하다(target="_black" 추가 시 새 창으로 링크 이동한다. < a href..
