본문 바로가기

전체 글

(57)
[ 프로그래머스 > 해시] 위장 내 통과 코드 function solution(clothes) { let answer = 0; let closet = clothes.reduce((prev,now) => ({ ...prev, [now[1]]: (prev[now[1]] || 0) + 1 }),{}); let key = Object.keys(closet).length-1; let res = 1; while (key >= 0) { res *= closet[Object.keys(closet)[key]]+1 key--; } return answer = res - 1, answer; } 종류 - 모자:[빨강, 검정] , 상의:[긴팔, 민소매] , 하의:[미디스커트, 슬랙스, 숏팬츠] 라고 한다면 모자의 종류 2가지 상의의 종류 2가지 하의의 종류3..
[ 프로그래머스 > 해시] 완주하지 못한 선수 나의 첫번째 제출 코드 오답. function solution(participant, completion){ let answer = participant; completion.forEach((val,idx) => { participant.splice(participant.indexOf(val),1)[0] }); answer = participant[0] return answer; } 조급하게 이어진 시도들에서도 반복을 여러번 쓰는 for + 탐색() + splice로 데이터 삭제하는 방법을 버리지 못했다. 사실 뭐가 문제인지 잘 몰랐다. 나의 두번째 제출 코드 오답. function solution(participant, completion){ let answer =''; for(let i of comp..
비구조화 할당 (이터레이터 공부 후 마무리하기) 배열, 객체, 반복 가능한 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장. 배열 1) 배열 요소들을 한 번에 각 변수에 초기화 할 수 있다. let [a,b] = [1,2]; // let a = 1, let b = 2와 같은 의미이다.(이를 분할 할당이라고도 함) [a,b] = [a*3, b*5]; //a = a*3, b = b*5 와 같다. let array, first, second; array = [first, second] = [100,200]; console.log('array:', array, 'first:',first, 'second:', second); //결과 array:[100,200], first: 100, second: 200 2) 좌변의 변수와 우변 값 갯수가 같을 필..
비슷해 보이는- setTimeout , setInterval, requestAnimationFrame setTimeout - 설정한 시간이 지나면 특정 기능을 수행한다. let counter = 0; setTimeout(() => { console.log('setTimeout',counter++); },3000); //3초 뒤에 콜백함수를 '한 번' 실행한다. setInterval과 같은 방식으로 실행을 취소 시킬 수 있다. setInterval - 설정한 시간을 기준으로 특정 기능을 반복한다. let counter = 0; let repeater = setInterval(() => { console.log('setInterval',counter++); },500); //0.5초 간격으로 콜백함수를 반복 실행한다. setTimeout(() => { console.log('Clear'); clearInte..
canvas 시작해보기 (내용 다듬기!!) canvas로 그림을 그리려면 canvas객체의 getContext('2d')를 사용해야 함. +) canvas는 태그에 직접 width, height를 해주는 것과 css에 width, height 값을 주는 것이 다른 태그와는 다르게 작동한다. 예를들어, canvas태그에 w=1000을 주고 css에 w=500을 준 경우와 canvas태그와 css 모두 w=500을 준 경우 전자에 그림이 더 작게 표현된다. 너비가 1000픽셀인 그림의 너비를 500px인 해상도에 기존의 비율을 유지해서 그리기 때문임 이 방법을 사용하면 고해상도의 디바이스에 그림을 뿌려줘야하는 경우 선명하게 그림을 뿌릴 수 있다. (예시 - 디바이스 크기의 2배로 캔버스의 크기를 주고, css에는 너비와 높이를 100%로 줌)
생성자와 클래스 - p682~ 학교에서 JAVA 수업시간에 클래스, 객체지향 처음 배울 때 자동차 예시 다음으로 가장 많이 들었던, 붕어빵 예시가 생각났다. 클래스는 만들고자 하는 객체의 설계도인데, 만들려는 객체가 가져야할 속성과 기능을 명시한다. 자바스크립트엔 class가 없었기 때문에 생성자 함수로 인스턴스를 만들었다고 한다. 생성자 함수를 정의 할 때는 '이건 생성자 함수야' 라는걸 표시하기 위해 함수 이름 첫글자를 대문자로 쓴다. 그리고 클래스 즉, 생성자 함수(붕어빵 틀)는 인스턴스 생성 시 전달 받은 인자로 속성을 초기화 한다. 1.생성자 함수 function 붕어빵( 앙꼬 , 반죽 ){ this.앙꼬 = 앙꼬; this.반죽 = 반죽; this.붕어빵굽기 = function(){ console.log(`${this.앙꼬..
날짜 정보가 필요할 땐 new Date() 달력을 직접 짜면서 징그랍게 써본 Date객체 //오늘(요일 월 일 년 시간)포멧으로 반환 결과: Tue Mar 17 2020 14:55:00 GMT+0900 (대한민국 표준시) const today = new Date(); //today라는 이름의 Date 객체 생성 //특정 날짜 정보를 담은 객체를 만들고 싶다면 //인자로 날짜 정보 넘겨줄 때 형식을 잘 지켜줘야 한다 안그럼 값 이상하게 나옴 const anniversary = new Date('1993-08-26'); const day = today.getDay(); //요일을 숫자로 반환 일요일:0 ~ 토요일:6 결과:2( 현재 화요일) const month = today.getMonth(); // 현재달-1 반환 결과: 2 (현재 3월) con..
CSS FIex Flex 속성은 컨테이너에 적용해야하는 속성과, 컨테이너 안의 아이템에 적용해야하는 속성으로 나뉘어 진다. display: flex // 컨테이너는 블록 형태로 있지만, 그 안의 아이템들이 inline 처럼 배치된다. See the Pen rNVLezQ by volt-nuna (@ddonni0426) on CodePen. flex-direction 정렬 방향 //row가 디폴트 row, colum (reverse도 가능) flex-wrap:(nowrap, wrap, wrap-reverse) //브라우저가 컨텐츠 크기보다 줄었을 때 어떻게 할 건지를 결정 align-content: // 2줄 이상일 때,아이템을 어떻게 정렬할 것인지 (wrap 설정이 된 상태에서 사용) => 축약형 flex-flow: di..