記錄

과제 진행 전에 연습용으로 JS로 기능 구현해본 것을 정리해보았다. .dark 클래스가 body에 추가되면 body에 다크 모드로 지정한 css가 적용되도록 했고, 클릭 시 버튼 아이콘이 회전하도록 했다. localStorage를 이용해 새로고침을 해도 이전에 설정한 상태가 유지되도록 했다. HTML JS Shop 패션 액세서리 디지털 0 JS const DarkModeToggle=()=>{ const body=document.body const mode=document.querySelector('.mode') const icon=mode.querySelector('i') //dark/light mode localStorage if (localStorage.getItem('darkMode')===null..

This 자바스크립트에서 this는 상당히 어려운 개념인데, 다른 언어와 다른 동작 방식을 가지고 있기 때문이다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있어 이걸 가리킬 줄 알았는데 그게 아니네? 하는 상황이 발생할 수 있다. this 값은 런타임에 결정된다. 즉, this의 값은 컨텍스트에 따라 달라지기 때문에 동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayHi; // 'this'는 '점..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/140107 난이도: Lv.2 문제 설명 좌표평면을 좋아하는 진수는 x축과 y축이 직교하는 2차원 좌표평면에 점을 찍으면서 놀고 있습니다. 진수는 두 양의 정수 k, d가 주어질 때 다음과 같이 점을 찍으려 합니다. 원점(0, 0)으로부터 x축 방향으로 a*k(a = 0, 1, 2, 3 ...), y축 방향으로 b*k(b = 0, 1, 2, 3 ...)만큼 떨어진 위치에 점을 찍습니다. 원점과 거리가 d를 넘는 위치에는 점을 찍지 않습니다. 예를 들어, k가 2, d가 4인 경우에는 (0, 0), (0, 2), (0, 4), (2, 0), (2, 2), (4, 0) 위치에 점을 찍어 총 6..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/138476 난이도: Lv.2 문제 설명 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/138477 난이도: Lv.1 문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의..

00. Intl API 란 Intl 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간이다. 여러 가지 언어로 서비스를 할 수 있도록(국제화, internalization) 웹페이지 상에 사용된 문구와 데이터를 언어나 지역별로 다른 형식으로 보여줄 수 있게 해준다. 외부 라이브러리를 사용하지 않고도 자바스크립트에서 제공하는 Intl API를 사용해 다국어 지원을 하는 서비스에서 데이터를 하나 하나 번역하지 않고도 언어 처리를 할 수 있어 유용하게 사용할 수 있다. 기본적인 사용 방법 기본 형태에 locales 매개변수를 추가해 적절한 언어를 제공할 수 있다. navigator.language 를 이용해 사용자가 설정한 언어 자동으로 읽어..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/132267 난이도: Lv.1 문제 설명 오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다. 정답은 아무에게도 말하지 마세요. 콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가? 단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다. 문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 ..

- 프로그래머스에서 제공하는 코딩테스트 입문(Lv.0) 문제들을 풀어본 내용을 일부 정리 - https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc&statuses=unsolved&languages=javascript Day 6. 문자열, 반복문, 출력, 배열, 조건문 직각삼각형 출력하기 "*"의 높이와 너비를 1이라고 했을 때, "*"을 이용해 직각 이등변 삼각형을 그리려고합니다. 정수 n 이 주어지면 높이와 너비가 n 인 직각 이등변 삼각형을 출력하도록 코드를 작성해보세요. const readline = require('readline'); const rl = readline.createInterface({ in..