1. Javascript 복습

• 클릭할 때마다 클릭한 누적 횟수에 따라 홀수 / 짝수로 나눠 알림 창을 띄우는 onclick 함수 만들기

let count = 1;

function hey() {
    if (count % 2 == 0) {
        alert('짝수입니다!');
    } else {
        alert('홀수입니다!');
    }
    count += 1;
}

• count += 1 는 count = count + 1 와 같다

• 변수가 함수 안에서 선언 되면 함수가 실행 되면서 변수가 계속 새롭게 선언 되기 때문에, 변수에 계속 1 씩 추가 되거나 하는 조건을 만족할 수 없다
• 함수 바깥에서 선언 된 변수를 전역 변수 라고 한다
• 함수와 상관 없이 스크립트 어디서든 사용 가능하다
• 함수 안에서 선언한 변수는 함수 안에서만 사용 가능하며 함수 실행이 종료 되면 사라진다

2. JQuery

• 다양한 브라우저를 사용하던 시절, 브라우저 간 호환성 문제로 인해 길고 복잡해지는 Javascript 코드들을 모아 라이브러리로 만든 것
• 반드시 HTML 상단에 import 해야 JQuery 코드를 사용할 수 있다
• 상대적으로 Javascript 코드는 길고 복잡한 반면 JQuery 코드는 직관적이다

• Javascript 로 div 숨기기

document.getElementById("element").style.display = "none";

• JQuery 로 div 숨기기

$('#element').hide();

• 우리가 사용한 Bootstrap 템플릿에는 이미 import 되어 있다

• input box 의 값을 가져오기

1. input box 의 id 를 article-url 로 지정한다
2. input box 에 '세종대왕'을 입력한다
3. Console 탭에 $('#article-url').val(); 을 입력한다

• input box 에 Jquery 로 값을 입력하기

1. input box 의 id 를 article-url 로 지정한다
2. Console 탭에 $('#article-url').val('장영실'); 을 입력한다

• #post-box 를 숨기기

$('#post-box').hide()

• #post-box 를 보이게 하기

$('#post-box').show()

• 요소의 상태에 따라 달라지는 CSS 값을 가져올 수 있다

1. #post-box 의 CSS 값을 가져오기

$('#post-box').css('width')
'500px'

2. #post-box 의 CSS 값을 변경하기

$('#post-box').css('width','700px')

3. #post-box 의 CSS 값을 가져오기

$('#post-box').css('display')
'block'

4. #post-box 를 숨기기

$('#post-box').hide()

5. #post-box 의 CSS 값을 가져오기

$('#post-box').css('display')
'none'

• #btn-posting-box 의 text 를 변경하기

$('#btn-posting-box').text('포스팅박스 닫기')

$('#btn-posting-box').text('포스팅박스 열기')

• 백틱 을 사용하여 문자열로 HTML 코드를 입력하면 HTML 코드를 추가할 수 있다

let temp_html = `<button>나는 버튼이다</button>`

$('#cards-box').append(temp_html)

• 변수를 HTML 코드 안에 값으로 넣고 싶을 때는 ${변수} 형태로 HTML 코드 안에 입력한다

let title = '아무거나 제목!!!'

let temp_html = `<a href="https://www.naver.com/" class="card-title">${title}</a>`

• 코드를 작성할 때는 alert 이나 console.log 함수로 코드가 잘 실행 되는지 확인하면서 진행하면 좋다

• 버튼을 누르면 form 이 나타났다가 사라지는 toggle 버튼 만들기

function openclose() {
    let status = $('#post-box').css('display');
    if (status == 'block') {
        $('#post-box').hide();
        $('#btn-posting-box').text('포스팅박스 열기');
    } else {
        $('#post-box').show();
        $('#btn-posting-box').text('포스팅박스 닫기');
    }
}

• Javascript 와 JQuery 를 연계해서 사용하는 것이 중요하다

QUIZ

• Console 탭에서 연습하면서 잘 실행 되는지 확인하는 습관을 들이자

✔️ 코드를 정확하게 작성해놓고 괄호 } 를 안 닫아서 계속 헤맸다 😢

function q2() {
    let txt = $('#input-q2').val();

    if (txt.includes('@')) {
        let domain = txt.split('@')[1].split('.')[0]
    alert(domain)
    } else {
        alert('이메일이 아닙니다')
    }
}

✔️ 나와 다르게 깔끔하고 간결한 강사님의 코드 ✔️ 괄호 쓰는 법도 익숙하지 않아 어렵고 문장 끝에 기호 ; 를 붙여야 하는지 안 붙여도 되는지가 많이 헷갈린다

3. Ajax

• Javascript 로 페이지 전환 (새로고침) 없이 서버에서 값을 받아올 수 있는 방법

• API 는 서버에서 클라이언트가 데이터를 요청할 수 있도록 열어둔 창구
• JSON 은 서버가 클라이언트에게 데이터를 주는 포맷
• JSON 형식은 어려워 보이지만 List 에 Dictionary 가 많이 들어 있는 것 뿐이다

• 클라이언트가 서버에게 데이터를 요청할 때도 타입에 따라 동작하는 기능이 다르다
• GET 은 보통 데이터 조회 (Read) 를 요청할 때 사용
• POST 는 보통 데이터 생성 (Create) / 변경 (Update) / 삭제 (Delete) 를 요청할 때 사용
• 데이터 요청할 때 목적에 따라 반드시 해당 타입으로 요청해야 하는 것은 아니고 통상적으로 각각의 타입을 많이 쓰는 편이다

• 브라우저에 URL 을 입력해서 Enter 를 치는 행위 자체가 GET 요청이다

naver.com/aaa?code=00000
서버의 주소/파일/받는 데이터

• code= 뒤의 숫자를 바꾸면 코드값 오류라고 뜬다

• 데이터의 형식을 클라이언트와 서버가 미리 약속하고 해당 형식으로 보내고 받는 것
• 두 개의 형식이 어긋나면 데이터를 제대로 받을 수 없다

naver.com/aaa?code=00000&name=sparta

• URL 안에서 값을 추가할 때는 기호 & 을 사용한다
• name=sparta 를 추가해도 코드값 오류라고 뜨지 않는다
• 약속하지 않은 요청 데이터가 서버에게 추가로 전달 되었을 뿐이다

• ? 는 전달할 데이터 작성을 시작할 때 사용
• & 는 전달할 데이터가 더 있을 때 AND 의 의미로 사용

• Ajax 는 JQuery 를 import 한 페이지에서만 작동 가능하다

• Ajax 의 기본 골격

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

• url 에 API 주소를 입력하면 API 데이터가 response 로 들어온다
• 따라서 예시 코드처럼 입력하면 Console 탭에 API 데이터가 출력 된다

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    console.log(response['RealtimeCityAir']['row'][0])
  }
})

• 필요한 데이터만 추출하여 가져올 수 있다
• 타입은 GET 이고 data 는 현재 가져오는 것이 없는 상태이다
• data 는 POST 요청을 할 때 사용하는 것
• response 는 변수라 다른 단어로 대체 가능하지만 통상적으로 response 를 사용한다

• for 문을 사용하여 미세먼지 수치가 70 미만인 지역의 데이터만 가져오기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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']
          if (gu_mise < 70) {
              console.log(gu_name, gu_mise)
          }
      }    
  }
})

QUIZ

• 서울시 Open API 실시간 미세먼지 상태 데이터를 불러와서 업데이트 버튼을 누를 때마다 새로고침 되게 하기

function q1() {
    $('#names-q1').empty()
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      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']

              let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
              $('#names-q1').append(temp_html)
          }
      }
    })
}

• 위의 상태에서 미세먼지 수치가 70 이상인 곳은 텍스트를 red 로 표시하기

function q1() {
    $('#names-q1').empty()
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      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']

              let temp_html = ``
              if (gu_mise > 70) {
                  temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
              } else {
                  temp_html = `<li>${gu_name} : ${gu_mise}</li>`
              }
              $('#names-q1').append(temp_html)
          }
      }
    })
}

• 서울시 실시간 따릉이 현황을 업데이트 버튼 누를 때마다 새로 불러오기

function q1() {
    $('#names-q1').empty()
    $.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_location = rows[i]['stationName']
              let station_number = rows[i]['rackTotCnt']
              let bike_number = rows[i]['parkingBikeTotCnt']

              let temp_html = `<tr>
                                    <td>${station_location}</td>
                                    <td>${station_number}</td>
                                    <td>${bike_number}</td>
                                </tr>`
              $('#names-q1').append(temp_html)
          }
      }
    })
}

• 위의 상태에서 따릉이가 5개 미만인 곳은 텍스트를 red 로 표시하기

function q1() {
    $('#names-q1').empty()
    $.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_location = rows[i]['stationName']
              let station_number = rows[i]['rackTotCnt']
              let bike_number = rows[i]['parkingBikeTotCnt']

              let temp_html = ``
              if (bike_number > 5) {
                  temp_html = `<tr>
                                    <td>${station_location}</td>
                                    <td>${station_number}</td>
                                    <td>${bike_number}</td>
                                </tr>`
                  $('#names-q1').append(temp_html)
              } else {
                  temp_html = `<tr>
                                    <td class="red-td">${station_location}</td>
                                    <td class="red-td">${station_number}</td>
                                    <td class="red-td">${bike_number}</td>
                                </tr>`
                  $('#names-q1').append(temp_html)
              }
          }
      }
    })
}

• 랜덤 고양이 API 를 이용하여 버튼을 누를 때마다 새로운 고양이 사진을 불러오기

function q1() {
      $.ajax({
        type: "GET",
        url: "https://api.thecatapi.com/v1/images/search",
        data: {},
        success: function(response){
          let url = response[0]['url']
          $("#img-cat").attr("src", url)
        }
      })
}

• 이미지 태그의 주소를 바꾸는 JQuery 코드

$(“#id”).attr(“src”, url)

이제 제법 예제 코드의 길이가 길어졌다. 퇴근하고 필라테스 수업도 듣고 웹 개발 수업도 들으니 하루하루가 정말 빠르게 지나간다. 해야 할 일은 많은데 24시간은 너무 짧다. 하지만 개발자로서의 새로운 인생을 시작하기 위해서 더 열심히 해야지! 💪

1. 웹의 동작 개념

• 서버와 클라이언트 / 브라우저의 역할
• HTML / CSS / Javascript 의 역할
• 서버는 클라이언트에게 데이터를 보낸다

2. HTML / CSS

• PyCharm 은 Python 을 사용하기 편한 프로그램
• h1 은 문서의 제목이니 꼭 필요하다
• HTML 요소들은 글 속성과 박스 속성으로 나뉘기 때문에 글 속성 요소를 박스처럼 꾸미고 싶다면 display: block 을 적용해야 한다
• 구글 웹 폰트를 링크 연결하여 사용하는 방법
• CSS 를 외부 파일로 작성해 링크 연결하는 방법

background-size: cover / contain

✔️ 항상 헷갈리던 CSS 개념이었는데 이번 기회에 정리할 수 있었다.

cmd + option + L : 코드 정렬 in PyCharm
cmd + / : 코드 선택하고 누르면 주석으로 변경

✔️ VS Code 만 사용해보았는데 PyCharm 을 사용해보니 또 새롭고 단축키는 공통으로 사용 되는 것도 있고 아닌 것도 있는 듯 하다.

3. Bootstrap

• Bootstrap 템플릿으로 시작하기
• getbootstrap
• 다른 사람이 만든 CSS 시스템과 HTML 예시를 링크로 가져와서 사용하는 것
• 홈페이지의 Documentation 탭에서 원하는 요소를 선택하여 복사하여 사용한다
• 기존 class 를 지우지 않고 새로운 class 를 추가하여 여러 개의 class 를 중첩하여 적용 시키는 것이 좋다
• 코드가 길어져 보기 불편하다면 div 를 접어서 간단하게 만들어두자

✔️ 버전이 계속 업데이트 되니 확인해야 한다

Quiz

• CSS 검색 추천 사이트
• w3schools
• MDN Web Docs

4. Javascript

• 브라우저가 알아들을 수 있는 프로그래밍 언어
• 최초로 브라우저와 서버를 개발할 때 Javascript 를 표준으로 설계하였기 때문이다
• Java 와 Javascript 는 전혀 다른 언어이다
• 개발자 도구의 Console 탭은 HTML 파일의 script 코드와 이어지므로 파일 내에서 선언한 함수를 불러와서 사용할 수 있다

4-1. 변수

• 변수는 값을 담는 박스
• 숫자 뿐만 아니라 문자열도 담을 수 있다
• 문자열을 담을 때에는 큰 따옴표 “” / 작은 따옴표 ‘’ 안에 문자열을 넣어야 한다
• 문자열을 더하면 문자열이 순서 대로 배치 된다

let first_name = 'eunyoung'
let last_name = 'kim'

first_name+last_name

‘eunyoungkim'

✔️ 문자열과 숫자를 더하면 문자열 뒤에 숫자가 나온다

4-2. 자료형 - List

• List 자료형은 순서가 중요한 담기
• 괄호 [] 안에 쉼표 ,로 구분하여 작성한다
• 프로그래밍 언어는 항상 0 부터 순서를 시작한다

let a_list = ['수박','참외','배']

a_list[0]
'수박'

a_list[1]
'참외'

a_list[2]
'배'

• List 에 새로운 것을 추가할 수 있다

a_list.push('감')

4-3. 자료형 - Dictionary

• Dictionary 자료형은 해당 key 값에 대응 되는 value 값을 담는 것이다
• List 자료형과 다르게 순서가 중요하지 않다
• 선언할 때는 괄호 {}와 기호 :를 사용하고 값을 불러올 때는 괄호 []를 사용한다

let a_dict = {'name':'bob','age':27}

a_dict['name']
'bob'

a_dict['age']
27

• Dictionary 에도 새로운 것을 추가할 수 있다

a_dict['height'] = 180

a_dict
{name: 'bob', age: 27, height: 180}

✔️ 확실히 이 부분부터 잘 이해가 안 되기 시작했다 ✔️ 처음 선언할 때는 {} 괄호를 사용하는데 왜 추가할 때는 [] 괄호를 사용할까? ✔️ 그래도 이 부분은 이 글을 작성하며 다시 읽어보니 이해가 되는 듯 하다

• Dictionary 에 List 를 추가할 수 있다
• Dictionary 와 List 는 서로의 요소로 사용 될 수 있다

a_dict['fruits'] = a_list
(4) ['수박', '참외', '배', '감']

a_dict
{name: 'bob', age: 27, height: 190, job: 'female', fruits: Array(4)}

a_dict['fruits'][2]
'배'

4-4. 함수

• %는 나눗셈의 나머지를 구하는 함수
• 트래픽을 균등하게 나눌 때나 짝수와 홀수를 구분할 때 사용한다

let a = 100

a % 8
4

• 등호도 여러가지가 존재한다
• 변수를 선언할 때 = 기호를 사용하기 때문에 서로의 값이 같다는 것을 표현할 때는 == 기호를 사용한다
• 변수의 값이 서로 같지 않다는 것을 표현할 때는 != 기호를 사용한다

let a = 100

a < 150
true

a > 200
false

a == 100
true

a != 100
false

• split 은 어떤 문자열을 기준으로 문자열을 나누는 함수이다
• 예시와 같이 사용하면 어떤 도메인의 이메일인지 판별할 수 있다

let myemail = 'sparta@gmail.com'

myemail.split('@')
(2) ['sparta', 'gmail.com']

myemail.split('@')[1]
'gmail.com'

myemail.split('@')[1].split('.')
(2) ['gmail', 'com']

myemail.split('@')[1].split('.')[0]
'gmail'

• 꼭 위와 같은 풀이 과정을 거쳐서 최종 코드를 작성하는 습관을 기르자
• 한 번에 최종 코드를 만들겠다는 욕심을 버리자

• 프로그래밍 언어에서 함수는 정해진 동작을 수행하는 것이다

function mysum(num1, num2){
    alert('안녕!')
    return num1+num2
}

let result2 = mysum(2, 3)

result2
5

✔️ 이 부분도 조금 의문이었다 ✔️ 변수를 선언한 단계에서 이미 alert 가 실행 된다 ✔️ 이 부분은 조금 더 찾아봐야 이해할 수 있을 듯 하다

• 괄호 () 안에 아무것도 넣지 않아도 함수 실행이 가능하다
• alert 창이 연속으로 실행 된다

4-5. 조건문

• if / else 구문

let sex = '남성'

if (age > 20 && sex == '남성') {
    console.log('성인 남성입니다')
} else {
    console.log('청소년입니다')
}

성인 남성입니다

• && 는 양쪽 모두 조건을 만족한다는 뜻의 AND 의 기호이다
• || 는 양쪽 중 하나의 조건을 만족할 때 사용하는 OR 의 기호이다
• 세 가지 조건 중 하나일 때는 if / else if / else 구문을 사용한다

if (age > 20) {
    console.log('성인입니다')
} else if (age > 7) {
    console.log('청소년입니다')
} else {
    console.log('아동입니다')
} 

4-6. 반복문

for (let i = 0; i < 10; i++) {
    console.log(i)
}

0
1
2
3
4
5
6
7
8
9 

• ++ 는 1 씩 추가하는 기호이다
• i 가 10 과 같아질 때까지 함수 실행을 반복한다

let people = ['철수','영희','민수','형준','기남','동희']

people.length
6

for (let i = 0; i < people.length; i++) {
    console.log(people[i])
}

철수
영희
민수
형준
기남
동희

✔️ 또 궁금한 것이 생긴 부분 ✔️ List 에 담긴 개수를 세는 함수 같은데 왜 length 라고 부를까?

• List 를 한 바퀴 돌아라 라는 뜻의 반복문으로 자주 사용 된다

let scores = [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30}
]

scores[0]
{name: '철수', score: 90}

scores[1]
{name: '영희', score: 85}

scores[1]['score']
85

• List 에 들어가는 하나의 요소에 여러 값을 넣을 때에는 괄호 {}를 사용한다
• List 에 Dictionary 를 요소로 넣은 형태

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i])
}

{name: '철수', score: 90}
{name: '영희', score: 85}
{name: '민수', score: 70}
{name: '형준', score: 50}
{name: '기남', score: 68}
{name: '동희', score: 30}

for (let i = 0; i < scores.length; i++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    console.log(name, score)
}

철수 90
영희 85
민수 70
형준 50
기남 68
동희 30

for (let i = 0; i < scores.length; i++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    if (score < 70) {
        console.log(name, score)
    }
}

형준 50
기남 68
동희 30

for (let i = 0; i < bikes.length; i++) {
    let name = bikes[i]['stationName']
    let bike = bikes[i]['parkingBikeTotCnt']
    if (bike < 1) {
        console.log (name, bike)
    }
}

161. 무악재역1번 출구 0
163. 명지전문대학교 정문 앞 0
176. 명지대학교 도서관 0
178. 증산3교 앞 0
192. 연서어린이공원 0

• 데이터에서 특정 조건의 데이터만 추출하는 방법으로 자주 사용 되니 연습하자

Javascript 에서 모르는 부분이 너무 많아 예시를 모두 적다보니 글이 길어지게 되었다. 그래도 강의를 듣는 것도, 숙제를 하는 것도, 또 이 글을 쓰는 것도 너무 즐거웠다. 이런 글을 쓰는 것 자체가 정말 오랜만이라 어떻게 해야 할지 고민이었는데 수업 중에 필기를 열심히 해둔 보람이 있다. velog 도 항상 읽기만 했었는데 마크다운 (markdown) 작성법도 찾아보고 사용해보니 더욱 보람차다. 이 글을 쓰느라 2주차 강의도 벌써 지각이지만, 이번 주도 화이팅! 👍