배운 코드 정리 8

발행자/구독자 패턴

오늘 챌린지반 수업에서는 발행자/구독자 패턴을 배우고 이것을 활용하여 Potal로 Toast를 만드는 과제를 받았다. 과제를 실행하기에 앞서 수업에서 사용된 코드를 가져와 분석해보는 시간을 가졌다.  아래가 바로 발행자/구독자 패턴이다. 쉽게 말해 구독을 통해 이곳에 명령어(topic)와 그와 매칭되는 함수들(listeners)을저장 (subscribe) 하고 그것들을 실행 (publish) 시킬 수 있도록 하는 것이다. // PUB/SUB 패턴const EventBus = () => { // 명령어를 저장하는 곳 const topics = new Map(); const subscribe = (topic, listener) => { // 가장 먼저 명령어를 저장함 // 값을 배열로 줌으로..

min, splice, filter, apply

오늘은 2개의 코드카타를 했는데, 2번째 문제에서 막혔다. splice로 배열의 최소값을 제거하려고 하니까 자꾸만 이상한 결과값이 나오는 것이다. 여러가지를 검색해보았고, 먼저 filter를 사용하였지만 다른 방법으로도 다시 문제를 풀어보았다.  최초로 내가 성공한 해답은 이것이다.  function solution(arr) {     var answer = [];     let minval = Math.min.apply(null, arr);          arr = arr.filter((e) => e !== minval);          answer = arr;     if(answer==0) {         return [-1];     }     return answer; } math.min...

indexOf, sort

오늘은 코드카타 문제를 2개 풀었다. 어려운 문제였으면 하루에 1개씩만 풀었으니 오늘 2개를 풀었다는 것은 쉬운 문제였다는 뜻이지만, 새로 배운 코드들을 정리해야 할 필요성을 느꼈기 때문에 글을 작성한다.  먼저 indexOf는 문자열의 값을 이용하여 위치를 찾아주는 함수이다. indexOf('Kim')과 같이 매개변수로 배열의 값을 넣어주면 해당 원소의 위치를 찾아준다. 여기서 원소의 위치는 0부터 세며, 만약 문자열에 매개변수의 값이 여러 개 존재할 경우 첫번째 원소의 위치만을 반환한다. 찾는 문자열이 없으면 -1을 반환한다. 이번에 코드카타 문제는 배열로 제시되었지만 단순 문자열이라도 이 함수를 사용할 수 있다고 한다.  예)['June','Kim'].indexOf('Kim') = 1 활용하자면 l..

돌아온 정수 제곱근 판별

여태컷 코드카타를 첫번째 문제부터 풀다가 오늘에 이르러 첫날에 날 좌절하게 했던 정수 제곱근 판별 함수를 풀게 되었다. 지금에 와서 다시 내가 푼 해답을 보니 if문 자체에 대한 이해와 return에 대한 이해는 크게 틀리지 않았지만 주어진 값 n에 대한 루트 값 x에 대한 정의가 이상하게 되어 있다는 것을 알았다.  function solution(n) {      var x=n/x      if((n == x*x)&&(Number.isInteger(x))) {        return((x+1)*(x+1));      } else {        return(-1);     }} 나는 오늘도 저번처럼 이렇게 n의 루트 값 x를 정의하고 활용하겠다는 생각을 했으나, Math.sqrt()이라는 함수를 알..

자연수 뒤집기

이번에 자연수 뒤집기 코드카타를 하며 다시 한 번 난관에 부닥쳤다. 이전에 코드카타를 하면서 몇 번 마주한 string() 함수, map() 함수와 최종적으로 ruturn answer;로 값을 출력하기 위해 사용해야 하는 push()와 unshift(), 그리고 돌고돌아 완성해낸 .forEach 문까지... 차근차근 나의 해답을 풀어보도록 한다.  먼저 문제를 제시하자면, 제목의 자연수 뒤집기는 주어진 임의의 자연수 n을 배열로 만든 것을 뒤집어서 출력하는 것을 뜻한다. 만약 234가 주어졌다면 [4, 3, 2]가 출력되어야 하는 식이다.  이러한 배열로 변환하는 출력을 위하여 answer는 var answer = [];로서 빈 배열로 선언되었고, 이로써 return aswer;로 값을 출력하려면 ans..

배열의 평균 값

오늘도 함수를 풀고 그로 인해 배운 코드들을 기록하기 위해 글을 쓴다.  첫번째 문제는 배열의 평균값이었는데, 문제를 풀려고 해도 아는 코드가 거의 없으니 먼저 인터넷에 검색보았다. 그러다가 가장 먼저 해당 문제의 해답이 드러나 있는 블로그에 들어가 버려서, 이 문제에 대해서는 다른 방법으로도 풀어져 있는 해답을 탐구하고 배운 코드를 정리한다. 먼저 이전에 배운 for문으로 만들어진 해답이다.  function solution(numbers) {     var answer = 0;     let sum = 0;     for(let i=0; i        sum+=numbers[i]     }    return answer =sum/numbers.length;    } 내가 착각했던 것이 return에..

각도기 함수와 짝수 더하기

오늘 날 고생하게 한 두 개의 함수문제를 가져왔다. 다른 무엇보다도 이런 코드카타 문제가 가장 어려운데, 자바스크립트 언어에 대한 이해가 깊어져 가는 것이 느껴지는 것만큼은 장점이다.  0도부터 180도까지의 각도 명칭(ex)둔각)에 각각의 값을 반환하게 하는 함수를 만드는 문제이다. 아래는 내가 제출한 답안인데, 문제를 보고 단박에 if문을 사용하는 것까지는 생각했지만 정확히 어떤 변수와 문법을 사용해야 하는지에 대해 오래 헤매었다.  function solution(angle) {          if(0         answer = 1;     } else if(angle === 90) {         answer = 2;     } else if(90         answer = 3;    ..

왕초보 1주차

HTML(뼈대)웹페이지의 내용    예) 제목, 부제목, 목차, 본문, 버튼, 이미지 등 사용자가 인식할 수 있는 것들문과적 관점에서는 이 부분은 뼈대가 아니라 내용물이지만 개발자적 관점에서는 이러한 내용물은 코드를 덧붙여야 하는 날 것의 부분이므로 뼈대라고 지칭하는 것 같다.  CSS(꾸미기)1. 2. 본문에 작성된 2번을 class=""를 통한 라벨링을 이용해 1번으로 꾸민다. 예) 폰트, 이미지, 도형, 색상 etc... 이러한 꾸미기에는 라이브러리를 이용하는 것이 간편하다. 라이브러리란 다른 개발자가 코드의 샘플을 모아두어서 이용하기 쉽게 만들어둔 보관소이다. 샘플을 그대로 가져와서 알맞은 곳에 붙여넣기를 하여 쉽게 페이지를 꾸밀 수 있다. 반드시 내에 작성해야 하는 것은 아니다.  영단어와 같..