sort() 함수의 동작 원리? 오늘 모각코 시간에 혼자서 알고리즘 문제를 풀다가 문득 생각난 궁금증이 있다. 그건 바로 sort() 함수의 동작원리! 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스 Lv.0 난이도의 중앙값 구하기라는 문제였다. 문제 설명은 이렇다. 정수 배열 array를 오름차순 정렬한 후, 배열의 중앙값을 출력하는 문제였는데, 오름차순으로 정렬하기 위해 sort()함수를 사용하면서 궁금증이 생겼다. // 정수 배열의 오름차순 정렬 const array = [1, 10 , 100, 5, 6, 8, 40] array.sort(..

템플릿 리터럴 // console.log(`x 값은 ${x}이고 y값은 ${y}이고 두개를 곱한 값은 ${x * y}입니다.`); 권장하지 않습니다. const x = 10 const y = 20 const result = x * y console.log(`x 값은 ${x}이고 y값은 ${y}이고 두개를 곱한 값은 ${result}입니다.`); 백틱(`)으로 감싸고, $ { example } 의 형태로 사용한다. Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer..

단락회로평가 논리 연산자 (&& , ||) 를 사용하여 연산을 진행 할 때 좌측 식의 값에 따라 우측 식의 실행 여부를 판단하는 동작을 '단락회로평가' 라고 한다. 3항 연산자 (조건식) ? (참일 경우 진행되는 표현식) : (거짓일 경우 진행되는 표현식) const sale = true; const price = sale ? 1000 : 2000; // sale이 true이므로 1000이 price에 할당됨. console.log(price) // 1000 const value = 2500; console.log((value>5000) ? '5000 위' : '5000 아래') // 2500 > 5000 = false 이므로 5000 아래가 출력 드모르간의 법칙 드 모르간의 법칙 - 위키백과, 우리 모..

DOM / BOM DOM Document Object Model HTML 문서를 컨트롤한다. 문서 객체 모델(DOM) - Web API | MDN 문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 developer.mozilla.org BOM Browser Object Model 브라우저 자체를 컨트롤한다. Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. developer.mozilla.org // DOM document.w..

SASS Syntactically Awesome Style Sheets 스타일시트가 점점 더 복잡해지고 유지관리가 어려워지고 있는데, sass를 사용하여 기존의 css보다 라이트하고 엄격한 관리가 가능해졌다. sass에는 변수, 네이스팅(중첩), 믹스인 등의 편리한 기능들도 포함하고 있어, 개발 시간을 단축할 수 있다는 장점이 있다. 반복되는 코드를 최소화하고, 재사용 가능한 코드들을 만드는 것이 주된 목적이라고 볼 수 있다. sass는 css로 컴파일되는 스타일 시트 확장 언어이다. sass는 웹 브라우저가 읽을 수 없으므로, 단독 사용이 불가능하기 때문에, vscode의 live sass compiler 확장을 사용하거나, node sass를 사용해서 css파일로 컴파일해야 한다. 확장자는 .sass..

input 커스텀 윈도우, 맥, IOS, 안드로이드 등 운영체제에 따라, 또 크롬, 사파리, 파이어폭스, 오페라, 웨일 등의 브라우저에 따라 input 요소를 표현하는 방식이 약간씩 차이가 있다. 이러한 차이를 없애고 일관적인 디자인을 위해서, 즉 크로스 브라우징을 원활하게 구현하기 위해서 input 요소를 초기화하고, 공통된 디자인으로 커스텀 할 수 있다. 이 글은 윈도우 환경의 크롬 브라우저에서 작성했다. 체크박스1 라디오1 input 요소를 커스텀하려면, 초기화를 해줘야 한다. input 요소는 css 속성으로 appearance: none; 을 주면 된다. appearance는 네이티브 요소의 디자인을 해제/변경하기 위해 사용하는 속성으로, 크로스 브라우징에 유용한 속성이다. 위의 input 요소..