inno 3

03 Aug 2022

Sparta coding

Innovation Camp

w1 day3

깔끔한 상자 쉐이딩효과
box-shadow: 0px 0px 3px 0px gray;
border: 1px solid gray;

창크기/모바일 반응형
max-width : 500px 까지채울수잇어
width: 95% 그전까지는 95%만 채워

overflow -요소에서 넘어가는 부분
-scroll이나 숨김으로 처리가능

get / user_id
라우팅? ,, 진욱님 상담
jinja 문법? 파이썬?
라우팅은 진욱님이 봐주신다 - 살았다
대신 공부 열심히 해놔라

list형 / 순서가 중요

 let a_list = ['수박','참외','배']
 a_list[1] : '참외'
 a_list.push('감')
 a_list : ['수박','참외','배','감'}

 b_list=['철수','영희'}

 a_list.push('b_list')
 a_list : ['수박','참외','배','감', Array(2)}

 a_list[4][0] : '철수'

JQuery 만들어놓은 코드 가져다씀

bootstrap

$(‘#url’).val() : value 값 입력 / 가져오기

#id : 선택자
$( ) / ‘#id’

$(‘#post-box’).hide() / show()

<script>
  function open_box() {
    $("#post-box").show();
  }
  function close_box() {
    $("#post-box").hide();
  }
</script>

let txt = $("#input-q1").val();

CSS에서
display: none;
처음부터 안보이는 상태

Q1 변수 txt에 입력값을 담고,
빈칸일때, 값이 있을때 출력

<script>
  function q1() {
    let txt = $("#input-q1").val();
    if (txt == "") {
      alert("빈칸");
    } else {
      alert(txt);
    }
  }
</script>

Q2
변수 mail에 입력값을 담고
‘@’들어간 메일형식이면 @이후를 빼고출력
@가 없으면 Email형식 아니라고 경고

변수.incloudes(‘포함문자열’)
변수.split(‘기준문자열’)[배열]

<script>
  function q2() {
      let mail = $('#input-q2').val()
      if (mail.includes('@')==true) {
          alert(mail.split('@',5)[1])
      } else {
           alert('not E-mail')
      }
</script>

.empty() 선택한 요소를 삭제함

JSON viewer chrome 확장program

JSON파일 정리해서 보여줌
dictionary, list가 합쳐진 형태

서버통신
GET : 받아오기만함
POST : 입력 수정 삭제

Ajax

<script>
  $.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function (response) {
      console.log(response);
    },
  });
</script>

<script>
  console.log(response["내용"]["내용"]);
</script>

Ajax로 필요한 값 호출

response[‘내용’][‘내용’]

<script>
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
      let rows = response["RealtimeCityAir"]["row"];
      for (let i = 0; i < rows.length; i++) {
        let gu_name = rows[i]["MSRSTE_NM"];
        let gu_mise = rows[i]["IDEX_MVL"];
        console.log(gu_name, gu_mise);
      }
    },
  });
</script>

function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

                        let temp_html = ``

                        if (gu_mise > 40 ) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }

                        $('#names-q1').append(temp_html)

                    }
                }

지연님 도와주심 live coding
개머싯슴 슥삭 슥삭 하니까 작동함..
jwt?
table에 다 담아 놓는다 / 변수를 가져다 쓴다

jinja의 변수 출력 구분자

request
section 부분 우하단 수정
upper부분 마진값?

flask 프레임워크 -서버를 구동하기위한 거대한라이브러리

DB data base data를 잘 쌓아둔 Program
-자료들이 정렬되어 있음 index
-SQL 정해진 칸이있음
유연하게 정리 x
-No only SQL - 정해진 칸이없음
유연하게 대처할 수 있음
대표 - MongoDB (cloud에서 제공하는 Atlas)

진욱님 > 지연님
리뷰긁어오는 부분 -클라이언트가 무거워 할 수 있으니
서버에 부담시키자
-crud ? 참고

function q1() {
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulbike",
    data: {},
    success: function (response) {
      let rows = response["getStationList"]["row"];
      for (let i = 0; i < rows.length; i++) {
        let station = rows[i]["stationName"];
        let total = rows[i]["rackTotCnt"];
        let parking = rows[i]["parkingBikeTotCnt"];

        let temp_html = ``;

        if (parking < 5) {
          temp_html = `<tr class="bad"><td>${station}</td>
                                         <td>${total}</td>
                                         <td>${parking}</td></tr>`;
        } else {
          temp_html = `<tr></te><td>${station}</td>
                                         <td>${total}</td>
                                         <td>${parking}</td></tr>`;
        }
        $("#names-q1").append(temp_html);
      }
    },
  });
}