1. 오늘 배운 조그만 내용들
구글링 꿀팁:
<검색어> site:stackoverflow.com
<검색어> filetype:pdf
<검색어> filetype:pptx
구글 검색은 영어로 하는 것이 자료가 훨씬 많다!
오류, 에러 관련 검색 시 스택오버플로우를 잘 응용하자.
2. 오늘 만난 오류
방명록 카드 삭제버튼 만들기 중
사용자가 입력한 비밀번호와
데이터에 기 작성했던 비밀번호를 대조해서
삭제 함수를 작동시키는 과정이 있는데.
이 중 비밀번호 대조 과정이 난제였다.
이것의
프론트엔드 코드
function del_check(num, index) {
let pwd = $("#pw" + index).val();
console.log("num : " + num)
$.ajax({
type: "GET",
url: "/get_guestbook_data",
data: {
'num_give': num
},
success: function (response) {
num_result = response.result
for(let i=0; i<num_result.length; i++){
let poem = num_result[i];
let poem_num = poem.num
if(num == poem_num){
let poem_password =poem.password
if(pwd == poem_password){
del_box(num)
}else{
alert('❤️😍땡!!! 비밀번호를 다시 입력해주세요😍❤️')
}
}
}
}
});
}
백엔드
@app.route('/get_guestbook_data', methods=['GET'])
def get_poem():
#num_receive = request.form['num_give']
num_list = list(db.i5_project.find({},{'_id':False}))
#num_one = db.poems.find_one({'num':num_receive})
return jsonify({'result': num_list})
비밀번호를 맞게 입력하고 삭제 버튼을 클릭했는데,
계속 땡! 비밀번호를 다시 입력해주세요가 뜬다.
그럼 데이터 속 비밀번호와 방금 입력한 사용자의 비밀번호가 서로 일치하지 않는 다는 것이니,
둘 중 어느 비밀번호가 잘못인지는 모르지만
어느 하나는 가져오는 곳의 출처에서부터 가져오는 과정 사이에 문제가 있는 것이었다.
그러므로 둘 다 어디서부터 가져와서 무엇을 대조하고 있는지 알아보아야 했다.
그리고!!!
지금처럼 비밀번호를 프론트에서 대조하는 방식을 하면 보안에 취약해지는 문제점이 있다는 것을
팀원분께서 알려주셨다.
포스트요청으로 보냈어도 보안에 취약하다.
브라우저에서 내 웹페이지를 열었을 때 불러오는 데이터의 모양을 보는 방법이 있는데,
그 때 데이터 속 password 값도 고스란히 보이기 때문에 문제가 된다.
내 데이터 모양을 보는 방법은 다음과 같다.
브라우저에서 내 웹페이지 열기 > 마우스 우클릭 검사로 DevTool 열기 > 데브툴 상단 바에서 네트워크 선택 >
웹페이지상의 삭제 버튼 클릭 > 데브툴에서 신호가 출력된 흔적이 나옴. payload창 왼쪽에 Name 창에서 명단이 뜨는데
> 그것을 더블 클릭하면 브라우저 화면에 내 데이터의 목록이 나온다. > 비밀번호 해킹 가능 ㄷㄷ
지금은 비밀번호 대조 함수가 프론트에 나와 있는데 나중에 그걸 백엔드에서 작업하면 제일 좋다고 한다.
3. 줄 맞춤을 잘 하는 건 뭘까? Shift + Alt + F 만이 능사는 아닌 것 같다. 특히 HTML과 CSS 작업에서..
인라인으로 CSS를 넣는 일이 많지는 않겠지만, 이번에 방명록을 만들면서 궁금증이 생겼다..