
항해99 Pre-onboarding 1주차 항해일지 <3day - TIL>
오늘은 입학셤날 그래서 따로 스터디를 진행하지않고,
제출하고 남는시간동안은 자바 문법 뿌시기 강의를 들었다.
밍글데이도 했는데 zep에서 달리기도하고 o/x퀴즈도하고 잼났음 ㅎ
그래서 간단히 문제 풀이내용만 작성하기로!
✏️ 오늘 문제로 풀었던 소스코드 설명

- 화성에 땅 사놓기 화면에 구매한 평수에 따른 가격을 출력하는 기능추가
*) 이전 포스팅에서 화성땅프로젝트 관련 내용은 포스팅 했기 때문에 기능 추가 내용만 기술
☑ 1.1 화성땅 화면에 주문 평수에 따른 가격 출력 (index.html)
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
⬇️ 추가한 부분
# 자바스크립트에서 정규식을 이용하여 문자열('size)에서 숫자(0~9)만 추출한다.
let reg = /[^0-9]/g;
#정규식 [^0-9]는 숫자가 아닌 문자들을 의미하며, g는 문자열에서 모든 패턴을 찾으라는 의미
let pay_size = size.replace(reg, "") * 500;
# replace(변수명(reg), "")을 수행하면 reg에 해당하는 패턴을 찾아서 ""으로 변환
➡️ 숫자가 아닌 문자들은 모두 제거됨
let pay = parseInt(pay_size);
# 이 때 리턴된 숫자는 타입이 String이여서 문자열을 숫자로 바꿔준다.
$.ajax({
type: 'POST',
url: '/mars',
data: {name_give: name, address_give: address, size_give: size, pay_give : pay},
⬆️ 서버에 전달하는 데이터 중 가격정보(Pay)를 추가하여 보낸다
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
☑ 1.2 화성땅 화면에 주문 평수에 따른 가격 출력 (app.py)
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
price_receive = request.form['pay_give']
⬆️ 클라이언트가 전달해준 데이터 중 price 정보를 받아오기
doc = {
'name' : name_receive,
'address' : address_receive,
'size' : size_receive,
'value' : price_receive
⬆️ DB에 가격정보를 value에 넣어서 저장하기만 하면 끝!
}
db.mars.insert_one(doc)
return jsonify({'msg': '주문 완료!'})
✏️ 아쉬운점/ 알게된점
- 크게 어려운 문제가 아니였는데 진입(?)을 어떻게해야할지 한참 고민하다가 40분정도 소요됐다
- Javascript에서 문자열에서 숫자만 추출하는 법을 알게되었음!
'⛴ 항해' 카테고리의 다른 글
[항해99] Pre-onboarding 5일차 (0) | 2022.11.22 |
---|---|
[항해99] Pre-onboarding 4일차 (0) | 2022.11.22 |
[항해99] Pre-onboarding 1일차 (0) | 2022.11.22 |
[항해99] Pre-onboarding 2일차 (0) | 2022.11.22 |
[항해99] 사전 학습 I 웹 개발 종합반 토이 프로젝트 (오늘의 날씨) (0) | 2022.11.21 |