항해 99 2-3일 차

 

#체크박스 저장하기

 

해야 할 것!

 

1. 월, 화, 수, 목, 금, 토, 일, 매주
를 index배열 12345678로 만들기

 

2. 필요한 값 

 -index

 -input박스의 체크된 값.

 

3. 체크가 되어있으면   true

   체크가 되어있지 않으면  false

=>월~매주를 12345678로 만든 것이 체크가 되어있으면 true, 아니면 false를 써주어야 한다.

 

 

 [jQuery]map() 알아보기

THE WATCHING :: [jQuery] map()을 활용한 반복 처리 방법 (tistory.com)

[jQuery] map()을 활용한 반복 처리 방법

  참고 블로그..!

map()을 사용한 이유

• map()은 HTML요소나 배열 객체 등에 대해 반복처리를 실행하고 새로운 배열을 반환[블로그 참조]
• 월-매일 까지의 체크박스를 돌면서 체크가 되어있는지를 확인하고 체크가 되어있으면 true,아니면false로 처리해야 했고, 그 값을 새로운 배열로 받아야 했다.

 

//제이쿼리의 map을 이용하여 값을 문자열로 받아오기

$(document).ready(function () {
var day = $('input[name="day"]'); // $('input[name="day"]');-->input의 name을 가져온다.<input name="day"
var days = $.map(day, function (value, index) {
return value+index;
}
);
console.log(days);
});

 

블로그를 보고 내가 사용하려던 코드..

console을 찍어보니 value값이 에러가 남.

잘못된 점

1.map을 사용할때 var days = $.map(day, function (value, index) 이부분에 들어가는 value가 매개변수인걸 몰랐다..

2.$(document).ready(function ()

  이부분에서 .ready가 들어가 있어서 코드를 어느정도 수정 했을 때도 실행이 안됨.

  여기에서 등록하기 버튼을 "눌렀을 때" 체크된 값을 넘겨줘야 하는데 .ready를 써서 값이 찍히지 않음..

.ready대신에 .click을 써줘야 한다.

 

//완성 코드

$('#apply').click(function () {
var day = $('input[name="day"]');
var days = $.map(day, function (v) { 
return v.checked
}
);
console.log(days);
});

 

 

팀원분의 도움을 정말 많이 받았던 코드다..ㅜ소중..

 

 

배운것..!

1. var 선언- $('#')이런식으로 받아오게 되면 서버-클라이언트를 계속 순회하기 때문에 용량이 커져서 var로 쓰는 것 같다.

(11/07수정

var 변수 선언은 단점이 많기 때문에 요즘은 잘 사용 안한다고 한다.

Let이나 const로 선언 하는 것이 좋고 재할당 해야 하는 변수가 있다면Let, 없다면 const를 쓰는게 적절하다.

 

2.input의 name, id, class가져오기

 -체크박스를 인풋의 타입 체크박스로 가지고 오고 월-매ㅑ주 까지 여러개의 인풋들을 한번에 불러와야 했다.

   (이 때 id값은 적절하지 않다. 한번에 가져올 수 없기 때문..!/class나 name으로 가져와야 했는데 class는 css가 건드려져서 name값으로 가져오게 됐다.)

 -가져오는 방법

   id 값 기준으로: $('#id')

   class값 기준으로: $('#class')

   name값 기준으로: $('input[name=input에 사용한 name값]')

3. var days = $.map(day, function (v) { 
    return v.checked
     }

function(v)를 썼기 때문에 return에서도 v를 사용한다.

뒤에 checked를 붙이면 if문을 돌려서 출력해준다(자바스크립트)

4.  .click

 

function schedule() {
var day = $('input[name="day"]');

var days = $.map(day, function (v) {
return v.checked
}
);


let time1 = $('#schedule-time1').val();
let time2 = $('#schedule-time2').val();
let title = $('#schedule-title').val();
let content = $('#schedule-content').val();

if (title == "") {
$("#schedule-title").text("제목을 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#schedule-title").focus()
return;
}

if (content == "") {
$("#schedule-content").text("제목을 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#schedule-content").focus()
return;
}

$.ajax({
type: "POST",
url: "/api/write",
data: {
time1_give: time1,
time2_give: time2,
title_give: title,
content_give: content,
day_give: days
},
success: function (response) {
alert(response["msg"]);
window.location.href = '/'
}
})
}


$('#apply').click(function () {

});

//전체코드

 

 

 어렵게 받아온 결과값을 db에 저장하는 것도 쉽지 않음..

저장할 것이기 때문에 POST사용함.

보통은 title_receive = request.form['title_give'] 이런식으로 db에 저장을 해주는데

day_receive = request.form.getlist('day_give[]')

뒤에 .getlist를 붙여 써야함.

 

오늘의 조별 상담

우리의 문의 내용	답변
페이지를 모두 구현 후 알람 기능을 넣어도 될지?	알람은 사용자의 동의가 필요한 기능 가장 적절한 것은 특정시간에 alert을 띄워 주는 것인데 웹에서도 뜨게 하려면 동의가 필요하다. and 알림을 받아주는 서버를 하나 더 만들어야 한다.
날씨를 받아와서 보여주는 기능을 넣어도 될지?	API의 결과값을 먼저 확인해야 한다. 복잡한 json형식의 data가 들어오기 때문에  보고 부담이 없다면 시도는 추천!
페이지에 jwt token을 이용하여서 쿠키에 로그인 정보를 받아오는데 로그인 후 들어오는 경로가 아닌 접근에 대해 다 쿠키 값을 줘야 하는지? 더 간단한 코드는 없을지?	쿠키는 사용자 측 적용이고 세션은 서버측 적용 쿠키를 사용자가 나쁘게 수정하여 가져갈 수 있다. 로그인은 세션과jwt token으로 체크 하는 것이 좋다. 단, jwt로 쿠키 저장하여 로그인은 ok 검사로직은 @데코레이터를 이용해서 반복을 없앨 수 있다.

 

 

*파이썬 데코레이터 검색 공부하기

*jinja2공부하기

https://www.youtube.com/watch?v=pb-DDSdqD-I&t=95s

팀원 분이 보내주신 링크 참고하기!

 

 

새로 배운 단축키!

ctrl+enter = gitdesk에서 commit

ctrl+f = 파이참에서 단어찾기

 

 

우여곡절 끝에 내가 맡은 작성페이지를 완성할 수 있었다..!

팀원분들이 정말 많이 도와주셔서 너무 감사했다ㅜ ㅜ

어제는 정말 막막하고 이해가 안돼는게 너무 짜증 났는데 팀원분들 도움을 받아 해결하게 되니

다 의미있는 일처럼 느껴졌다.

 

내가 느낀 내문제

일단 느리다..이해도 느리고 이해를 해도 응용하는 것도 느리다ㅜ

느린만큼 더 많은 시간을 투자 해야 할 것 같다..

그리고 접해보지 못했던 코드들을 보면 겁먹고 일단 어렵게 생각한다. 

계속 매달려서 안돼더라도 계속 도전하는 마음가짐이 필요할 것 같다.