TIL: 일어나 코딩해야지

✔️ 학습 범위

• 알고리즘 스터디_프로그래머스 18문제
• 웹개발 종합반 5주차

 

 

📄 오늘 공부한 내용

● 알고리즘 스터디

문제1 | 프로그래머스 > 코딩테스트 입문 > 중복된 숫자 개수

https://school.programmers.co.kr/learn/courses/30/lessons/120583

 

나의 풀이

function solution(array, n) {
    return array.filter(a => a === n).length;
}

filter()를 활용하여 조건문에 대한 값을 리턴한 후 길이를 구해보았다.

 

 

문제2 | 프로그래머스 > 코딩테스트 입문 > 배열의 평균값

https://school.programmers.co.kr/learn/courses/30/lessons/120817

 

나의 풀이

function solution(numbers) {
    return numbers.reduce((sum, current) => sum + current) / numbers.length;
}

각 요소들의 합을 구할 수 있는 reduce()가 잘 생각나지 않아서 구글링 했던 문제. 기억에 잘 남지 않는 것 같아서 많이 봐둬야겠다.

 

reduce()는 이전 요소에 대한 계산의 반환 값을 전달한다. 두번째 매개변수를 통해 초기값을 지정할 수도 있다.

// reduce() 메서드
arr.reduce(콜백함수, 초기값)
arr.reduce((이전 호출 결과, 현재 값) => 이전 호출 결과 + 현재 값
	, 초기값)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN

 

 

문제3 | 프로그래머스 > 코딩테스트 입문 > 짝수 홀수 개수

https://school.programmers.co.kr/learn/courses/30/lessons/120824

 

나의 풀이

function solution(num_list) {
    var num_length = num_list.filter(num => num % 2 === 0).length
    return [num_length, num_list.length - num_length];
}

짝수의 개수를 구한 후 원래 배열 길이에서 뺀 값을 홀수 길이로 활용.

 

다른사람의 풀이

function solution(num_list) {
    var answer = [0,0];

    for(let a of num_list){
        answer[a%2] += 1
    }

    return answer;
}

배열 인덱스를 활용: 초기값으로 [0, 0]을 할당하고 짝수는 [0], 홀수는 [1]이 나오므로 해당 인덱스에 1을 더해준다.

 

 

문제4 | 프로그래머스 > 코딩테스트 입문 > 배열 자르기

https://school.programmers.co.kr/learn/courses/30/lessons/120833

 

나의 풀이

function solution(numbers, num1, num2) {
    return numbers.slice(num1, num2+1);
}

 

 

문제5 | 프로그래머스 > 코딩테스트 입문 > 배열 원소의 길이

https://school.programmers.co.kr/learn/courses/30/lessons/120854

 

나의 풀이

function solution(strlist) {
    return strlist.map(a => a.length);
}

문제를 보자마자 .map()이 생각나서 사용해보았다.

 

다른사람의 풀이

function solution(strlist) {
    var answer = [];
    strlist.forEach(el=>answer.push(el.length))
    return answer;
}

새 배열을 만들어 주는 map()과는 다르게 forEach()는 함수 실행만 하므로, 배열을 채우는 행위인 push()를 해주어야 한다.

 

 

문제6 | 프로그래머스 > 코딩테스트 입문 > 배열 뒤집기

https://school.programmers.co.kr/learn/courses/30/lessons/120821

 

나의풀이

function solution(num_list) {
    return num_list.reverse();
}

reverse() 메서드를 알고 있었기 때문에 쉽게 풀 수 있었다.

 

 

문제7 | 프로그래머스 > 코딩테스트 입문 > 최댓값 만들기

https://school.programmers.co.kr/learn/courses/30/lessons/120847

 

나의 풀이

function solution(numbers) {
    numbers.sort((a, b) => b - a);
    return numbers[0] * numbers[1];
}

이 문제는 최대값을 구하는 방법에서 고민을 많이 했다.

 

처음엔 단순하게 최댓값을 구하는 Math.max()를 사용하였다. 하지만 그 다음이 문제다. 두번째로 큰 값은 어떻게 선택할 것인가 ? 모두 다른 인덱스를 가지고 있으므로 이대로 푼다고 해도 코드가 길어지거나 방법을 찾지 못 할 것 같았다.

function solution(numbers) {
    let answer = (numbers.filter(a => a < Math.max(...numbers)))
    return Math.max(...numbers) * Math.max(...answer)
    }

실행해 본 예시로 최댓값보다 작은 값 중 가장 큰 값을 반환하는 코드를 써보았다. 하지만 테스트 케이스 중 최댓값 2개가 동일한 숫자일 경우 통과하지 못하였다. 

결국 sort()로 먼저 정렬을 한 후 정해진 인덱스를 사용하는 방법이 가장 간단하였다.

 

 

문제8 | 프로그래머스 > 코딩테스트 입문 > 머쓱이보다 키 큰 사람

https://school.programmers.co.kr/learn/courses/30/lessons/120585

 

나의 풀이

function solution(array, height) {
    return array.filter(a => a > height).length;
}

이 문제는 filter()를 사용하여 쉽게 풀 수 있었다. 하지만 이전 문제에서 쓰였던 sort()가 생각나서 문제에서 요구하지 않는 정렬을 했다.

// 처음 작성한 코드
function solution(array, height) {
    return array.sort((a, b) => a - b).filter(a => a > height).length;
}

 

다른사람의 풀이

function solution(array, height) {
    let result = 0;
    array.map((arr) => height < arr && result++);

    return result;
}

map()을 활용할 경우에는 조건문에 대한 true, false 값을 리턴하므로 .length를 쓸 수 없다.(length값이 변하지 않음) 따라서 sum값을 위한 변수를 선언하고 그 값에 더해주면 된다.

 

 

문제9 | 프로그래머스 > 코딩테스트 입문 > 배열 두 배 만들기

https://school.programmers.co.kr/learn/courses/30/lessons/120809

 

나의 풀이

function solution(numbers) {
    return numbers.map(n => n * 2);
}

문제8에서는 map()의 콜백 함수에 조건문을 넣었지만 이번엔 수식을 넣어 새 배열을 만들어 주었다.

 

다른사람의 풀이

function solution(numbers) {
    return numbers.reduce((a, b) => [...a, b * 2], []);
}

 

 

문제10 | 프로그래머스 > 코딩테스트 입문 > 삼각형의 완성조건 (1)

https://school.programmers.co.kr/learn/courses/30/lessons/120889

 

나의 풀이

function solution(sides) {
    return sides.sort((a, b) => b - a)[0] < sides[1] + sides[2] ? 1 : 2;
}

문제7에서 정렬하여 고정된 인덱싱을 했던 것을 활용해보았다. sort()는 실행 결과 변수의 값 자체가 변하므로 반복해서 작성할 필요가 없다. 따라서 처음 한 번만 작성했다.

 

 

문제11 | 프로그래머스 > 코딩테스트 입문 > 중앙값 구하기

https://school.programmers.co.kr/learn/courses/30/lessons/120811

 

나의 풀이

function solution(array) {
    array.sort((a, b) => a - b);
    return array[Math.floor(array.length / 2)];
}

이 문제 역시 고정된 인덱싱을 활용하였다. 따라서 sort()로 정렬을 한 뒤 가운데 인덱싱을 구하여 결과값을 도출했다.

 

 

문제12 | 프로그래머스 > 코딩테스트 입문 > 짝수는 싫어요

https://school.programmers.co.kr/learn/courses/30/lessons/120813

 

나의 풀이

function solution(n) {
    var answer = [];
    for(i=1; i<=n; i+=2){
        answer.push(i)
    }
    return answer;
}

메서드를 활용하여 간단한 코드를 만들고 싶었지만, mdn에서 아무리 찾아보아도 마땅한 메서드를 찾지 못했다. 결국 for문을 활용했다.

 

다른사람의 풀이

const solution = (n) => 
    Array
        .from({ length: n }, (_, i) => i + 1)
        .filter(i => i % 2 !== 0)

Array 생성자로 배열을 생성. from()으로 인덱스에 1을 더해주고 filter()로 홀수값만 걸러낸다.

from()메서드가 생소하여 이해하기 어려웠다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

 

function solution(n) {
    return Array(n).fill(1).map((v,i)=>v+i).filter(v=>v%2===1);
}

위 풀이와 마찬가지로 Array 생성자로 배열을 생성한다. 이것을 활용하면 let = [] 과정이 필요하지 않다.

function solution(n) {
    return Array(n).fill(0).map((v,index) => v+1+index).filter((v) => v%2);
}

비슷하지만 약간 다른 풀이도 가져와보았다. 아직 생성자는 활용해보지 않았는데, 다음번에 꼭 활용해봐야겠다.

 

 

문제13 | 프로그래머스 > 코딩테스트 입문 > 배열의 유사도

https://school.programmers.co.kr/learn/courses/30/lessons/120903

 

나의 풀이

function solution(s1, s2) {
    return s1.filter(a => s2.includes(a)).length;
}

배열 2개를 비교하는 문제로 filter() 안에서 includes()를 활용하였다.

 

다른사람의 풀이

function solution(s1, s2) {
  const concat = [...s1, ...s2];
  const setConcat = Array.from(new Set(concat));

  return concat.length - setConcat.length;
}

 

 

문제14 | 프로그래머스 > 코딩테스트 입문 > 자릿수 더하기

https://school.programmers.co.kr/learn/courses/30/lessons/120906

 

나의 풀이

function solution(n) {
    return n.toString().split('').reduce((sum, current) => sum + Number(current),0);;
}

 

다른사람의 풀이

function solution(n) {
    return (n+'').split('').map(v=>+v).reduce((a,v)=>a+v,0);
}

map()을 활용한 형변환.

 

 

문제15 | 프로그래머스 > 코딩테스트 입문 > 순서쌍의 개수

https://school.programmers.co.kr/learn/courses/30/lessons/120836

 

나의 풀이

function solution(n) {
    let answer = [];
    for(i=1; i<=n; i++) n % i === 0 ? answer.push([i, n / i]) : 0
    return answer.length;
}

 

다른사람의 풀이

function solution(n) {
      return Array(n).fill(1).map((v,idx) => v + idx).filter(v => n % v === 0).length
}

문제12와 같이 배열을 선언해야만하는 경우 생성자 Array를 활용한다.

 

 

문제16 | 프로그래머스 > 코딩테스트 입문 > 개미군단

https://school.programmers.co.kr/learn/courses/30/lessons/120837

 

나의 풀이

function solution(hp) {
    return Math.trunc(hp / 5) + Math.trunc(hp % 5 / 3) + Math.trunc(hp % 5 % 3 / 1);
}

 

다른사람의 풀이

function solution(hp) {
    let ant = [5,3,1];
    let ans = [];

    for (let v of ant) {
        ans.push(~~(hp/v));
        hp%=v;
    }

    return ans.reduce((a,v)=>a+v,0);
}

~~double tilde은 알아두면 좋을듯 하다.

 

물결이 1개인 ~tilde는 비트연산자로 NOT의 기능을 한다.

const a = 5;     // 0000000000000101
console.log(~a); // 1111111111111010
// expected output: -6

const b = -3;    // 1111111111111101
console.log(~b); // 0000000000000010
// expected output: 2

물결이 2개인 ~~double tilde는 Math.floor() 대신 사용될 수 있다.

const obj2 = {}
arr.forEach(v=>obj2[v]= ~~obj2[v]+1)
//obj2 {1: 3, 2: 2, 3: 4}

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT

Bitwise NOT (~) - JavaScript | MDN

 

var solution=h=>a=~~(h/5)+~~(h%5/3)+h%5%3

다른 풀이도 가져와보았다. 가독성이 좋지는 않지만 ~~double tilde 활용에 주목해보자.

 

 

문제17 | 프로그래머스 > 코딩테스트 입문 > 숨어있는 숫자의 덧셈 (1)

https://school.programmers.co.kr/learn/courses/30/lessons/120851

 

나의 풀이

function solution(my_string) {
    return my_string.match(/\d/g).reduce((a, b) => Number(a) + Number(b));
}

특정 문자열을 찾을 땐 match()를 활용하자.

 

다른사람의 풀이

function solution(my_string) {
    return [...my_string].reduce((acc,cur)=>Number(cur) ? +acc + +cur : acc, 0)
}

 

 

문제18 | 프로그래머스 > 코딩테스트 입문 > 문자열 정렬하기

https://school.programmers.co.kr/learn/courses/30/lessons/120850

 

나의 풀이

function solution(my_string) {
    return my_string.match(/\d/g).map(Number).sort((a, b) => a - b);
}

 

다른사람의 풀이

function solution(my_string) {
    return my_string.split("").filter((v) => !isNaN(v)).map((v) => v*1).sort((a,b) => a-b)
}

!isNaN 활용 !

 

 

 

● 웹개발 종합반: 프로젝트 프로세스

 

01 프로젝트 세팅

app.py 파일 생성 > 가상환경 설정 > 프레임워크 사용법대로 폴더와 파일 생성 > 뼈대 준비(html, python 기본 코드 작성) > 저장 기능 구현 (POST 요청) > 데이터 가져오기 기능 구현 (GET 요청) > og태그 > 서버에 올리기(AWS 이용)

 

- 가상환경 설정 [터미널]

python -m venv venv

// 라이브러리 설치
pip install flask pymongo dnspython

 

- 프레임워크 사용법대로 폴더와 파일 생성

폴더 templates 안에 index.html 파일 생성하기

 

- 저장 기능 구현 (POST 요청)

# app.py
# DB 저장
@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    bucket_list = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_list) + 1

    doc = {
        'bucket':bucket_receive,
        'num': count,
        'done': 0
    }

    db.bucket.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

<!-- index.html -->
<script>
    function save_bucket() {
            let bucket = $('#bucket').val()

            let formData = new FormData();
            formData.append("bucket_give", bucket);

            fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload();
              });
          }
</script>

 

- 데이터 가져오기 기능 구현 (GET 요청)

 

# app.py
# DB가져오기
@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

<!-- index.html -->
<script>
	function show_bucket() {

            fetch('/bucket').then(res => res.json()).then(data => {
                    let rows = data['result']
                    $('#bucket-list').empty()
                    rows.forEach((a)=>{
                      let bucket = a['bucket']
                      let temp_html = `<li>
                                        <h2>✅ ${bucket}</h2>                                   
                                      </li>`
                    $('#bucket-list').append(temp_html)
                    })

                })
          }
</script>

 

- og태그

<meta property="og:title" content="제목" />
<meta property="og:description" content="설명!" />
<meta property="og:image" content="이미지url.jpg" />

 

 

 

☁️ 노트

아침부터 저녁까지 코딩테스트 문제를 풀고 복습까지 했더니 속이 울렁거리고 두통이 왔다. 하지만 그만큼 배운 것도 많으니 만족스럽다. 취침, 기상시간은 아직 되돌리지 못했지만 계획한 시간에 근접해졌다. 내일은 항해99 입학시험이니 웹개발 종합반 강의 복습으로 하루를 마무리해야겠다. 이번주는 개인적인 행사도 많아 정신 없지만 차근차근 잘 끝낼 수 있을거라고 믿는다.

운동도 해야지...