TIL: me.replaceAll(badRoutine, goodRoutine)

✔️ 학습 범위

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

 

 

📄 오늘 공부한 내용

● 알고리즘 스터디

 

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

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

 

나의 풀이

function solution(my_string) {
    return my_string.split('').reverse().join('')
}

.split()으로 배열을 만든 후 .reverse()로 역순 적용, .join()으로 배열 요소들을 다시 문자열로 엮어주었다.

 

다른사람의 풀이

function solution(my_string) {
    var answer = [...my_string].reverse().join("");
    return answer;
}

...스프레드 문법을 이용하여 각 요소로 배열을 만든 점에서 나의 풀이와 차이가 있다.

 

 

문제2 | 프로그래머스 > 코딩테스트 입문 > 특정 문자 제거하기

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

 

나의 풀이

function solution(my_string, letter) {
    my_string = my_string.split('').filter(function(data) {
        return data !== letter;
    }).join('');
    return my_string;
}

다른사람의 풀이

function solution(my_string, letter) {
    const answer = my_string.split(letter).join('')
    return answer;
}

.filter()를 사용하지 않더라도 .split(letter)를 하면 letter가 제거된 문자열을 리턴한다는 것 알아두자.

 

function solution(my_string, letter) {
    return my_string.replaceAll(letter, "");
}

.replaceAll()을 사용하여 letter를 ""빈문자열로 바꿔주었다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

String.prototype.replaceAll() - JavaScript | MDN

 

 

문제3 | 프로그래머스 > 코딩테스트 입문 > 문자 반복 출력하기

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

 

나의 풀이

function solution(my_string, n) {
    var answer = '';
    answer = my_string.split('')
    for(i=0; i < answer.length; i++) {
        answer[i] = Array(n).fill(answer[i]).join('')
    }
    return answer.join('');
}

 

다른사람의 풀이

function solution(my_string, n) {
    var answer = [...my_string].map(v => v.repeat(n)).join("");
    console.log(answer);
    return answer;
}

.map()과 .repeat()으로 n번 반복된 배열 리턴하기.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

 

 

문제4 | 프로그래머스 > 코딩테스트 입문 > 편지

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

 

나의 풀이

function solution(message) {
    return message.split('').length * 2;
}

 

다른사람의 풀이

function solution(message) {
    var answer = [...message].length * 2;
    return answer;
}

1번 문제와 마찬가지로 .split('') 대신 스프레드 문법인 [...message]를 쓸 수 있다는 것.

 

 

문제5 | 프로그래머스 > 코딩테스트 입문 > 모음 제거

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

 

나의 풀이

function solution(my_string) {
    return my_string.replace(/a|e|i|o|u/g, '');
}

.replace()을 사용하여 빈 문자열로 치환하면 된다는 것을 알게 되었다. 이 메서드는 기본적으로 요소 1개만 받지만 정규표현식을 사용하면 문자열을여러개를 받을 수 있다.

 

// 정규식을 만드는 2가지 방법

// 01 정규표현식 리터럴: 슬래시로 패턴을 감싸서 작성
// 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상된다.
const re = /ab+c/

// 02 RegExp 객체의 생성자 호출
// 생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일된다.
// 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 사용
const re = new RegExp('ab+c')

- replace 정규식

g	모든 패턴 체크(global)
i	대소문자 구별 없이 체크
m	여러줄 체크
^	처음
$	끝
.	한문자

예시	설명
.replace(' ','')	첫번째 공백 제거
.replace(/-/g,'')	- 제거
.replace(/[-]/g,'')	- 제거
.replace(/,/g,'')	, 제거
.replace(/^\s+/,'')	앞의 공백제거
.replace(/\s+$/,'')	뒤의 공백제거
.replace(/^\s+	\s+$/g,'')
.replace(/\s/g,'')	문자열 내의 모든 공백 제거

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions

정규 표현식 - JavaScript | MDN

 

다른사람의 풀이

function solution(my_string) {
    return my_string.replace(/[aeiou]/g, '');
}

정규표현식 리터럴 내부에 []를 사용하여 범위를 지정하였다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions/Groups_and_backreferences

Groups and Ranges - JavaScript | MDN

 

function solution(my_string) {
    return Array.from(my_string).filter(t => !['a', 'e', 'i', 'o', 'u'].includes(t)).join('');
}

Array.from()으로 배열을 만들고, .includes()로 배열요소 t가 [ ]대괄호 안의 글자를 ! 포함하지 않는지 여부를 확인하여 .filter()로 필터링한다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

 

 

문제6 | 프로그래머스 > 코딩테스트 입문 > 문자열 안에 문자열

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

 

나의풀이

function solution(str1, str2) {
    return str1.split(str2) != str1 ? 1 : 2;   
}

str2로 .split()을 했을 때 값이 변하는지 여부를 조건으로 삼항연산자로 작성해보았다.

 

다른사람의 풀이

function solution(str1, str2) {
    return str1.split(str2).length > 1 ? 1 : 2
}

이 풀이에서는 변함 여부가 아닌 변한 배열의 length로 조건을 작성하였다. 포함돼서 나누어질 경우는 길이가 2 이상이고, 포함되지 않을 경우 나누어지지 않으므로 length는 그대로 1이므로.

 

function solution(str1, str2) {
    return str1.includes(str2) ? 1 : 2;
}

사실 이 문제는 .includes()가 가장 정답에 가깝다. 메서드 자체가 포함 여부를 리턴해주기 때문.

 

 

 

● 웹개발 종합반: 작동원리

04 Flask로 값 주고 받기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>Document</title>

  <script>
    function hey() {
      let formData = new FormData();
      formData.append("title_give", "블랙팬서");

      fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
        console.log(data)
      })
    }
  </script>
</head>

<body>
  <h1>제목을 입력합니다</h1>
  <button onclick="hey()">나는 버튼!</button>
</body>

</html>

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

# index.html을 연동
@app.route('/')
def home():
   return render_template('index.html')

# POST 요청을 받음
@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

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

값을 주고 받는 순서

1. [index.html] hey() 버튼을 누름

2. [index.html] <script> hey()함수의 formData에 데이터가 쌓임

3. [index.html] fetch를 이용하여 formData를 /test에 POST 함

4. [app.py] request.form['title_give']를 통해 html의 'title_give' 값을 받아옴

5. [app.py] 값({'result':'success', 'msg': '이 요청은 POST!'})을 return 함

6. [index.html] fetch의 data로 받아온 값을 출력 console.log(data)

 

 

 

☁️ 노트

알고리즘 스터디 시간이 가장 재미있다. 아직은 '구조분해' 등 알고리즘 개념을 파악하지 못했고 새로운 객체, 메서드를 습득하기도 벅차지만 말이다. 이대로 쭉- 이어 나가야겠다.

오늘의 가장 큰 문제점은 공부 내용에서는 없었고.. 원래 루틴으로 돌아가지 못했다. 취침, 기상, 운동시간이 엉망이다. 정신차려야겠다. 11시 취침, 7시 기상이 당장 지켜야 할 목표다. 화이팅 !