크게 햇갈릴 것 같은건 비교연산자

 

 

| 는 연산 대상 중 하나만 true 여도 true 리턴

&& 는 연산 대상이 모두 true 여야만 true 리턴

! 는 true를 false로, flase를 true로 바꿔서 리턴

 

논리 연산자도 봐야한다

 

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) // true && true 이므로 true
console.log(isOnSale || isDiscountItem) // true || true 이므로 true

isOnSale = false
console.log(isOnSale && isDiscountItem) // false && true 이므로 false
console.log(isOnSale || isDiscountItem) // false || true 이므로 true

isDiscountItem = false
console.log(isOnSale && isDiscountItem) // false && false 이므로 false
console.log(isOnSale || isDiscountItem) // false || false 이므로 false

console.log(!isOnSale) // !false 이므로 true

기존에 배웠던거와 큰 차이는 없지만 

 

|| 는 연산 대상 중 하나만 true 여도 true 리턴

&& 는 연산 대상이 모두 true 여야만 true 리턴

 

이게 중요

 

일치 연산자

 

===를 다룬다

 

console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Javascript' === 'Javascript') // true
console.log('Javascript' === 'javascript') // 대소문자나 띄워쓰기도 다 정확히 일치해야 해요. 따라서 false

맨 맽에건 대문자 적용이 달라서

= ?? 뭐뭐다 라고 할당
== a==b면 둘이 같다고 할당
=== 형식과 내용물이 완전히 같은지 알아보는

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력
1 숫자 "1" 문자열 1
 
const shoesPrice = 200000
const capPrice = 100000
const totalPrice = shoesPrice + capPrice

console.log(`총 ${totalPrice * 0.8}원에 물건을 구입합니다.`)
 
문제가 약은게 마지막 콘솔의 철자를 바꿔놨다

 

파이썬은 몬티 파이썬에서 따왔다

 

와! 유럽제비! 나도 모르는데!

 

1. 리스트와 딕셔너리

 

1.1 리스트란?

 

리스트 만든다. ['a','b','c'] 

리스트의 첫번째를 부르려면  print(a_list[0]) 

0,1,2,3,4로 0부터 시작함.

' ' 이 붙는 문자열 뿐만 아니라 숫자, true/false도 넣는다

리스트도 넣을 수 있는데

a_list = [2,'배',false,['사과','감']] 해도 먹힌다

 

이 경우 리스트 안의 리스트의 '감'을 print 하려면

print(a_list[3][1])

 

1.2 명령어로 리스트 추가 등 작업하기

이런 식으로 리스트가 있을 때, 위의 리스트를 손으로 수정하지 않아도 

appenf를 사용하면 print(a-list)했을때 프린트에 표시되는 리스트에는

99가 포함되어있다.

 

그리고 리스트도 다른 이름으로 만들 수 있다 ex: result = a_list하면 result가 리스트 대용을 쓰인다

 

변칙적인것이 -1번째 항목을 찍어볼 수 있다. 0부터 시작하는 양수만 지정하는게 맞지만

만약  a_list = [1.2.3.4.5] 하고 b=a_list[-1]

print(b)하면 마지막 내용물인 5가 뜬다

 

a_list.sort  리스트의 내용물을 순서대로 정리한다

뒤에(reverse=True)를 붙이면 거꾸로

 

1.3 내용물 서치

 

내용물을 찾아보려면-아마 위에처럼 명령어로 쑤셔넣으면 코드에는 안보이니까 쓰는 것 같음

어쩌면 너무 많이 넣을 수도 있으니까

 a_list = [1.2.3.4.5] 

result = (5 in a_list)

print(result) 하면 트루가 뜬다, 있으니까

없으면 false

 

1.4 db에 자주쓰는 딕셔너리

 

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

 

 여기서 이름과 나이는 데이터로 들어가는 그런거 아니다

네임을 key, bob을 value라 하여 저장하는 것

물론 저기서 순서도 없다

 

이름을 추출하려면 print(a_dict =['name' ])

물론 여기도 value에 리스트를 넣을 수 있다

 

도중 추가 시에는 그냥 넣자 ex a_dict['height'] = 180 

하면 래 키로 헤이트, 벨류로 180이 들어감

 

리스트에도 딕셔너리를 내용물로서 많이 넣을 수 있는데, 사실상 이게 가장 많이 쓰는 모양

 

예로 위의 리스트 이름을 피플로, 내용물로 딕셔너리 양식을 그대로 쓰고 저 밥 어쩌구가 두번째 내용물(딕셔너리)일때

print(people[1]['age']) 하면 27이 너옿ㄹ것

 

퀴즈1. 스미스 과학점수 출력하기

people = [
    {'name': 'bob', 'age': 20, 'score':{'math':90,'science':70}},
    {'name': 'carry', 'age': 38, 'score':{'math':40,'science':72}},
    {'name': 'smith', 'age': 28, 'score':{'math':80,'science':90}},
    {'name': 'john', 'age': 34, 'score':{'math':75,'science':100}}
]
print(people[2]['score']['science'])

맞았음

 

 

2.파이썬 연산과 문자열

 

' '면 내용물 문자열 취급

'2'와 '2'의 합은 print하면 22

 

print(a+b) 더하기

print(a-b) 빼기

print(a*b) 곱

print(a/b) 나눗셈

print(a%b) 나누고 나머지

print(a**b) 제곱

print(a//b) 몫

 

몫은 국내 용어를 몰라서 어려웠는데

만약 100/3 하면 33.3333333333...........이지만

100//3 하면 33 나오는거 

 

2.1 기타

 

변수에 문자, 숫자, true/false  다 넣을 수 있다

심지어 3>2넣으면 트루 뜸

 

 

 

2.2 새로 안 것

 

str 내용물을 숫자로 바꾼다, 특히'123'같이 문자가 된거

 

한번 해봤는데

a = '2'
b = 2
print(a+b)

하면

 

TypeError: can only concatenate str (not "int") to str 뜬다

하나는ㄴ 숫자고 하나는 문자열이라서

 

str(2)는 '2'랑 같음

 

 

2.3 문자열 건드리기

 

first_name = "Harry"
last_name = "Potter"

first_name + last_name  # HarryPotter
first_name + " " + last_name  # Harry Potter

a = "3"
b = "5"
a + b    # 35

 

문자열 끼리는 그냥 합침, 더하기 아님

 

a = "3"
a + 5    # 문자열과 숫자형은 더할 수 없어서 에러!

 

위에 했던거임

 

문자열의 길이는 len() 함수를 써서 구할 수 있습니다!

print(len("abcde"))           # 5
print(len("Hello, Sparta!"))  # 14
print(len("안녕하세요."))      # 6

렌을 넣으면 문자열 길이 구함

 

.2.4  [:}이란?

 

a='1234567890' 하면

 

b=a[:3];  c=a[7:]; d=a[4:6]

프린트하면 '123'; '7890','456'

 

2.5 split

 

# 이메일 주소에서 도메인 'gmail'만 추출하기

myemail = 'test@gmail.com'

 

result = myemail.split('@') # ['test','gmail.com']

정의해놓고 @기준으로 찢는거임

 

result[0] # test (리스트의 첫번째 요소)

result[1] # gmail.com (리스트의 두 번째 요소

필요한건 [1]

 

result2 = result[1].split('.') # ['gmail','com']

그리고 .기준으로 찢으면

 

result2[0] # gmail -> 우리가 알고 싶었던 것

result2[1] # com

 

# 한 줄로 한 번에!

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

이렇게 지메일만 찢어냈음

 

퀴즈2

 

a = 'sparta'
b = a

print(b)

여기서 두번째 줄 a만 고쳐서 spa만 나오게 하려면

 

a[:3]

 

스플릿 기준값이 여럿일때

 

예로 전화번호

 

a= '02-123-4567' 해서 02만 빼려면

 

b= a.split('-')[0]인데 -가 2개니까 먼저 찢고 그중 0번째로 감

 

 

3. 조건문

ex

돈=?

  if 돈>3000:

      print('택시타')

elif 돈>1200:

      print('버스타')

else:

      print('걸어가')

 

보고 이해는 했지만 귀찮았다

 

 

4.반복문

하면

한다는 거임

 

위와 동일

만약 위에서 

로 깔끔하게 뗀다 치면

이렇게 나옴

 

조건문도 넣으면

깔끔

 

enumerate문도 알아보자

들어갈게 더 많다

앞에 번호를 쫙 적어줌

 

프린트 밑에 넣어준다면?

 

여기서 끊김

여기서 브레이크는 i값인 머리숫자가 3보다 커지면 '그때' 표시를 종료해라

즉 3번까지는 같으니까 표시, 4는 3보다 커지니까 표시하고 꺼짐

 

 

 

 

 

배운 것: 팀워크와 소통법,프리젠테이션

 

전체적으로 학문보다는 발표와 팀간 소통에 대해 배웠습니다.

 

기능을 소개하고 장점을 설파하는 자리에서 발표 퍼포먼스로 매꿔보려고 한 부분이 기억이 납니다 반성합니다

배운 것

 

기초적인 웹개발 복습

 

자바스크립트의 기초를 다시 돌아보는 계기가 되었습니다.

css를 많이 등한시하고 있었다는 것도 알게 되었습니다.

사실 가장 통한하게 느낀건 스태틱 폴더의 용도, 이건 강의에서 진짜 배운적이 없다고 생각했는데

어쨌든 동기들을 통해서라도 배우니까 좋네요

 

데이터베이스의 사용.

 

정확히는 웹 방명록으로서의 용도겠지만

노드로 밥을 빌어먹을 동안엔 항상써야할테니 복습을 더 철저히...

 

깃, 하드웨어 특강

 

깃은 그 용도를 뼈저리게 느꼈습니다.

하드웨어의 경우에는 그 성능을 다 써보거나 직접 건드릴 날이 올까요?

'내배캠 TIL WIL > 내배캠 wil' 카테고리의 다른 글

내배캠 5주차 wil  (0) 2022.12.26
내배캠 4주차 wil 납기는 철저히  (0) 2022.12.19
내배캠 3주차 wil  (0) 2022.12.11
내배캠 WIL 2주차 (정규화)  (0) 2022.12.04
내배캠 WIL 2주차  (0) 2022.11.27

1. Keep

 

  1.서로의 코드를 적극적으로 검수,보완하는 완벽을 지향하는 분위기.

  2.사소한 질문도 성심성의껏 답변하는 면학적 분위기 조성

  3. 지각없이, 끝까지 모두가 앉아 업무를 진행하는 성실성, 업무추진력 조성.

  4. 솔직한 마음을 여과없이 보이고 위로하며-편안하고 친근한 분위기를 조성

 

 

2. Problem

 

  1.git 사용 미숙으로 실시간 업무공유가 어려웠다.

  2.역할분담을 초기에 하지않은 것.

  3. 체계적인 기획없이 마구잡이로 기능을 추가했다

 

 

 

2.1 해결법

 

  깃의 기능을 숙달한다.

  업무숙달로 업무를 어떻게 분담할지 배운다.

  와이어프레임을 체계적으로 작성한다.

 

3. Try

 

  1. 백엔드와 프론트의 업무를 정확히 분배한다

  2. 소스트리 등 프로그램으로 브랜치 등 기능을 적극 활용한다.

  3.배운 것만이 아닌 앞으로 필요할 기능들을 스스로 찾아 배운다.

  4. 중간목표를 설정한다

  5. 코드를 작성하면 주석을 적극적으로 달아 추가적 전파 소요를 줄인다.

  6. 매일 회의를 가지고 회의록을 작성한다.

  7. 튜터님께 주눅들지않고 집요하게 적극적으로 소통을 시도한다.

 

 

4. Feel

  

  조봉진: 처음 접하는 환경에 우왕좌왕했습니다. 얼타지 않고 제 몫 먼저 할 수 있으면 좋겠네요

               

  조해빈: 사소한 질문이라도 팀원 모두 적극적으로 답변해주시는 모습으로 인해 좋은 팀워크를

               가질 수 있었다고 생각합니다. 부족한 실력으로 팀원분들께 폐를 끼치진 않을까 걱정되었지만

               서로 배려하며 프로젝트를 진행하며 팀원 간의 소통에 대해 배울 수 있었습니다.
                최종적으로 팀원분들과의 원활한 커뮤니케이션을 진행하여 좋은 결과를 얻을 수 있었다고 생각합니다.

 

  박종수:  처음 팀 프로젝트라 많이 걱정했지만 서로 도와주고 의지할 수 있는 팀원들을 만나서 너무 좋았습니다.

                 부족한 점도 많이 느꼈고 같이하면서 시너지 효과도 내는 좋은 경험을 해보았습니다.

 

  박예빈:  이전에도 팀프로젝트를 몇 번 진행해봤지만 이번처럼 소통이 잘 됐던 적은 처음이라 힘들어도 신이 났습니다.

                팀원분들의 솔직한 매력에 반했달까요... 내배캠 첫 프로젝트를 우리 A조 3반 분들과 함께할 수 있어 영광이었고                  짧은 시간이지만 많이 친해져서 앞으로 힘들 때 의지할 수 있는 좋은 동기가 생겨서 기쁩니다

 

  이드보라: 처음 해보는 팀프로젝트여서 걱정이 많았는데 다들 너무나 적극적으로 참여해주시고 제 부족한 실력에도

                   개의치 않고 잘했다고 말씀해주셔서 너무 감사했습니다! 이번 프로젝트를 통해서 협업의 중요성을 다시금

                    느꼈습니다.

 

 

 

 

금일은 배우기보다는 기능구현과 SA문서 신규 작성에 몰두하여 배웠다고 할만한게 없습니다

 

obs스튜디오 사용법을 약간이나마 배운게 좋긴하네요

얼른 내일 발표가 지나 뒤쳐진 실력을 매꿀수 있으면 좋겠습니다

 

  우선 저희가 개발과정 중에 사용한 와이어프레임을 보여드리겠습니다.

이번 프로젝트에 메인 페이지와 개인 소개 페이지 두 종을 구상하였는데, 이를 와이어프레임으로 작성한 모양새입니다

 

 

 

  하단부터는 저희가 기획에 따라 구현해낸 웹페이지를 캡처본으로 보여드리겠습니다.

 

 

  팀 소개 프로젝트의 메인 페이지입니다.

간결한 ui와 그에 대비되는 아이콘, 하단의 비비드한 이미지 파일로 클릭을 유도해보았습니다.

 

메인 페이지의 각 기능들은 아래와 같습니다.

 

 

  최상단 우측의 플레이, 중지 아이콘은 <audio> 태그로 구현한 음악 플레이어로 static에 담은

음악을 플레이하게 구현되어있습니다.

  html5부터 페이지에 오디오 파일을 삽입시 긴 코딩 필요 없이 <audio> 태그를 사용하면 간편하게 

오디오 플레이어를 만드실 수 있습니다. 비디오의 경우에는 <vidio>라고 합니다. 

 

  중단 좌측에 보이는 시계는 function gettime을 이용해 구현한 시계입니다. 

구현 초기에는 웹페이지 진입 후 1에서 2초쯤 기다렸다 나타나는 현상이 있었는데

이는 시계를 매 1초마다 변화된 걸 구현하게 되어있었기 때문이었고 현재는 함수의 순서와

태그를 수정해 사이트 진입 시 딜레이 없이 바로 실행되도록 하였습니다.

 

  그 밑에 붉은 박스로 표시한 목록이 보이실 텐데 이는 중단 우측의 소개글, 목표, 약속이 떠있는

푸른 박스와 연동되어 있습니다.

 

  팀 소개란의 각 항목을 눌렀을 때 구현되는 화면입니다.

원하는 항목을 눌렀을 때 목록의 항목마다 배정되어 있는 문장만 더욱 집중해서 보실 수 있게

단독으로 띄우도록 하였습니다.

 

 프로젝트 소개항목은 소중하게 따로 저장해놓았습니다.

 

 

hover.를 이용한 마우스 올린항목에 밑줄

  또한 각 항목에 마우스를 대시면 hover 기능을 이용해 밑줄을 뜨게 하였습니다.

 

 

 

 붉은 상자로 강조한 맨 하단의 젭 아바타 이미지는 저희 조가 실재 사용하는 아바타의 이미지인데 

이는 이미지 태그로, 각 이미지를 누르시면 저희의 개인 소개 페이지 html로 넘어가게 되어 있습니다.

 

 예시로 저의 페이지를 올렸습니다.

 

   요구된 소개정보와 블로그 주소 링크를 사진 우측에, 사진 하단에는 페이지 별 방명록을 구현하였습니다.

블로그는 이미지 버튼에 링크를 걸어 구현하였는데 저의 경우에는 티스토리 아이콘을 넣어 찾기 편하시게 하였습니다.

 

  현재 방명록은 팀원 한 분의 db에 저희 조원 5명의 방명록을 전부 관리하게 하였습니다.

처음에는 각자 자기의 db에 연동되도록 하려고 여러 시행착오를 겪었었는데,

현재는 팀원 한분의 db로 5명의 방명록 데이타를 전부 넣되 각기 다른 폴더로 연동되게끔 하였습니다.

 

다음은 방명록을 남겨보겠습니다

 

이름과 내용을 적지 않았을때 화면입니다., 방명록으로 공백을 남길 수 없습니다.

 

 

이름은 적고 내용은 적지 않았을 때의 상황입니다, 내용을 적으라고 alert을 뜨게하였습니다.

 

 

넣고 입력을 누르면 저장완료가 뜨고

 

잘 되었습니다, 한눈에 들어오는 페이지를 위해 남긴 방명록에 스크롤바를 넣었습니다.

 

 

 많은 분들이 어려워하고 저희도 오래 걸린 삭제기능

 

깔끔하게 지워졌죠?

 

 

하단에는 저희가 사용한 api의 목록입니다

 

 

 

 

 

아래에는 팀원 개인별로 마음에 들었던 코드를 적어보겠습니다

 

 

이드보라님

 

@app.route('/first_mini1/deletecomment', methods=["POST"])
def first_mini1_delete():
    num_receive = request.form["num_give"]

    db.bora.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '삭제 완료!'})
 
function comment_delete(num) {
    $.ajax({
        type: 'post',
        url: '/first_mini5/deletecomment',
        data: {'num_give': num},
        success: function (response) {
            alert(response['msg']);
            window.location.reload()
        }
    });
}

db 삭제기능 구현코드입니다

 

박종수님

function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()
    if (name == "") {
        alert("이름을 입력해주세요.");
        return false
    } else if (comment == "") {
        alert("내용을 입력해주세요.");
        return false
    }

빈 항목 입력방지 기능입니다

 

조해빈님

 

$(document).ready(function () {
    $('#team2').hide()
    $('#team3').hide()
    $('#project').hide()
    $('#team1').hide()

    $("#ot1").click(function () {
        $('#team2').hide()
        $('#team3').hide()
        $('#project').hide()
        $('#team1').show()
    })
    $("#ot2").click(function () {
        $('#team2').show()
        $('#team3').hide()
        $('#project').hide()
        $('#team1').hide()
    })
    $("#ot3").click(function () {
        $('#team2').hide()
        $('#team3').show()
        $('#project').hide()
        $('#team1').hide()
    })
    $("#ot4").click(function () {
        $('#team2').hide()
        $('#team3').hide()
        $('#project').show()
        $('#team1').hide()
    })

원하는 탭 표시 기능입니다

 

 

박예빈님

.members {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 2px solid gray;
    padding: 30px;
    width: 100%;

    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.memberphoto {
    width: 100%;
    height: auto;

    flex-wrap: wrap;
}

구역 너비에 맞게 이미지 다섯 개 나열 및 자동 크기 조절

 

예시

 

 

조봉진

 

function play() {
    var audio = document.getElementById("audio");
<div class="music">
    <p>wanna chill?
        <input type="image" name="button" src="../static/icons8-play-button-circled-30.png" onclick="audio.play();"
               value="PLAY"> <!--재생-->
        <input type="image" name="button" src="../static/icons8-pause-button-30.png" onclick="audio.pause();"
               value="PAUSE"> <!--일시정지-->
        <audio id="audio" src="../static/freemusicforhtml.mp3" onloadstart="audio.volume=0.5" loop></audio>
    </p>

 

오디오 재생기능입니다, 초등학생때는 플래시 등을 이용해야 했던거 같아 복잡해 보였는데 간결해지니 좋네요

오디오 태그, html5부터 이런저런 우회없이 오디오파일을 html에서 재생하게 해주는 태그다.

 

이런식으로 기본 제공되는 플레이어도 있다.

 

<audio autoplay loop controls>
    <source src="freemusicforhtml.mp3" type="audio/mpeg">
    <source src="freemusicforhtml.ogg" type="audio/mogg">
</audio>

이것으로 간단하게 완성, 자동재생, 반복을 autoplay, loop로,

컨트롤바는 controls로 자동 구현된다

하단의 소스 항목 둘은 mp3파일과 ogg파일로 mp3파일이 재생이 안되는 브라우저에서 하라고 해놨다.

틀린거 같은데 고치기어렵다, if문을 통해 고쳐야 할텐데 지금 해결하기 어렵다.

뒤의 타입들도 엄밀히 해당하는 형식이 아닐건데 안되어 찾아보니 저렇게 넣어야 나왔다.

크롬계열은 음원의 자동재생을 막는다 하는데 사이트를 공용서버에 올려보지않아 확인불가.

 

그런데 저 재생바를 팀원들이 고생해서 만든 페이지에 넣자니 양심도 찔리고 이쁘지도 않아서 아이콘으로 구현했다.

 

function play(){
    var audio = document.getElementById("audio");
}

 

이걸 스크립트에

 

<p>wanna chill?
    <input type="image" name="button" src="icons8-play-button-circled-30.png" onclick="audio.play();"
           value="PLAY"> <!--재생-->
    <input type="image" name="button" src="icons8-pause-button-30.png" onclick="audio.pause();"
           value="PAUSE"> <!--일시정지-->
    <audio id="audio" src="Sub Lite Woof.mp3" onloadstart="audio.volume=0.5" onloadstart="audio.autoplay"
           loop></audio>


    </audio>

이걸 바디에 넣었다.

 

버튼에 이미지를 넣고 구현하려고 했는데 생각대로 안되어서 인풋에 이미지를 넣고 온클릭을 사용

이미지는 html과 같은 폴더에 넣고 올렸다.

 

자동재생 코드는 이것저것을 넣어봤으나 해결이 안되었고, 대신 onloadstart로 볼륨을 반으로 줄이는 기능을 넣었다.

금일은 자바스크립트와 파이썬을 이용한 사이트 만들기를 복습하게 되었습니다.

 

기존 웹개발 종합반의 강의를 복습하며 만들었고 

이런식으로 욕심 버리고 요구된 기능들만 만드는데 아쉽게도 하루를 소모하였습니다.

 

내용을 기존 웹개발 강의에서 사용했던 몽고db의 폴더를 그대로 사용하여 이전 숙제의 내용물이 그대로 나옵니다.

 

pymongo,flask와 더불어 쓰다가 꼬인 코드를 현업자에게 훈수 받던중 CORS를 이참에 써보라고 하여 써보게 되었습니다.

이해하려면 걸릴것 같습니다

'내배캠 TIL WIL > 내배캠 til' 카테고리의 다른 글

내배캠 6일차 til (파이썬)  (0) 2022.11.21
내배캠 TIL 5일차 (11/18)  (0) 2022.11.21
내배캠 TIL 4일차  (0) 2022.11.17
내배캠 3일차 TIL (html의 audio태그)  (0) 2022.11.16
내배캠 TIL (GIT)  (0) 2022.11.14

GIT

 

WA! 깃헙! 겁나 씁니다.

 

  특강을 통해서 Git의 기초 사용법을 배웠습니다.

[모두의 깃&깃허브] Windows에서 소스트리-깃허브 연동하기 - YouTube

 

  사전 학습으로 ssh를 통해 git bash와 github를 연결하는 방법을 배웠습니다.

 

소스트리는 사용을 하지않아도 된다하여 잠시 내버려 두었고

현업자의 조언으로 다른 방식도 있고 회사마다 다를 수 있다 하여

설치하지 않았습니다.

 

  이후 git에 파일을 입력하는 방법과 구조에 대해서 배웠습니다.

 

좀더 자세하게 적어야하지만 습득이 미흡해 영상자료가 올라오면 재시청후 취합해 다시 작성하겠습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

+ Recent posts