기초단계/JavaScript

2022.12.28 JavaScript 기본

춘핑이 2022. 12. 28. 19:49

1.javascript

정적인 html에서 사용자와 동적으로 상호작용하는 것을 만들고 싶어졌다. 그래서 태어난것이 자바스크립트이다.
정보라고 멈춰있는 것을 그리는게 아니라 이 이미지를 움직이게 하는것이 자바스크립트이다.

2.수업의 목적

input type="button", value="night" onclick="자바스크립트내용"
바디태그를 선택하시오 스타일 속성값으로 백그라운드 컬러를 블랙(이부분은 css)
자바스크립트는 사용자와 상호작용한다. 웹브라우저는 바뀔수없지만 자바스크립트로 바디태그에 디자인을 바꿔준다.

3.html과 js의 만남: script태그

<script> </script> html에 자바스크립트가 시작됨을 알려줌. 이안에있는것을 자바스크립트로 해석함.
그냥 html로 화면에 표현하는 것과 뭐가 다르냐?
1+1을 했을때 자바스크립트는 2를 html은 정적이라1+1로 그냥 출력해준다.

4.html과 js의 만남: 이벤트

<input type="button" value="hi" onclick="alert('hi')">
경고창이 뜨도록하기 onclick의 속성으로는 자바스크립트가 와야한다.
값을 기억하고있다가 태그가 클릭되면 기억하던 자바스크립트를 자바스크립트의 문법으로 해석하는 것이다.
이렇게 웹브라우저위에서 일어나는 것이 사건, 이벤트라고 한다. 어떠한 자바스크립트가 일어나도록 하는 것이 온클릭이다.
<input type="text" onchange=alert('changed')>
텍스트 입력하는곳 빠져나오면 경고뜨게 하기 수정안되면 발동안됨.
이벤트들을 정의하고있음 이것을 이용해서 사용자와 상호작용하는 웹사이트를 만들 수 있다.
어떤 키를 눌럿을때 이벤트 발생하게
javascript keydown event attribute 검색
<input type="text" onkeydown=alert('key down!')>
onclick onchange onkeydown이런애들이 '이벤트'이다.

5. html과 js의 만남: 콘솔

지금까지 우리가 js를 하기위해 웹페이지를 만들엇다. 경우에따라 이 파일이 아닌 가볍게 실행해야하는 경우가 잇을 수잇다.
개발자 도구의 콘솔을 사용하면 자바스크립트를 즉석으로 실행할수 있다. 계산이필요할때 계산기를 하듯이 데이터를 처리하고싶을때 콘솔에서 사용할수잇다.
파일만들기 귀찮으니 즉석으로 실행할 수 있다. 웹페이지안에 있는 자바스크립트인것처럼 작용한다.
이미만들어진 웹사이트를 필요한 맥락에서 맞는 코딩을 할 수 있다. 큰목적보다는 현실의 문제들을 가볍게 해결하는 방법들을 찾아보는 것도 좋다.
콘솔을 사용하면 보고잇는 웹사이트로 해결이된다.

6. 데이터타입 문자열과 숫자

자바스크릡트에는 어떤 형태의 데이터타입이 잇는가?
javascript data type검색
https://www.w3schools.com/js/js_datatypes.asp
다른 언어처럼 + - 등 산술연살자
문자 ' ' 혹은 " "사이에 들어간다.
"hello world".toUpperCase();
'HELLO WORLD'
.trim() 공백삭제 indexOf 문자어디에서 시작하나 등등 많이 있다.
문자열이나 숫자냐에 따라서 값이 달라지니 잘 표시할 필요가 있다.

7. 변수와 대입연산자

x = 1; 오른쪽 항을 왼쪽에 대입한다. 좌항과 우항을 결합해서 우항의 값을 만들어낸다.
x라는 것으 대입연산자로 값이 변할수 있는 '변수' 이다.
변수를 왜 쓰는가? 변수가 없다면 인간은 연산을 할 수 없다.
만약 매우 긴 글에 egoing이라는게 1억개 들어있는데 이것들을 전부다 바꿔야한다면?
var name = 'egoing';해두고 "글" + name + "글" +name 이런식으로 하면 값이 바뀔때마다 다 바꿀수 있다.

8. 웹브라우저 제어

자바스크립트로 할수 있는 것중 하나인 웹브라우저 제어를 하고싶다.
1.css문법을 바디에 속성에 넣기 2.자바스크립트로 바디를 선택하기

9. 제어할 태그 선택하기

<input type="button" value="night" onclick="자바스크립트코드">
버튼을클릭햇을때 바디태그를 선택하기
javascript select tag by css selector
https://www.w3schools.com/jsref/met_document_queryselector.asp
document.querySelector(".example"); .example인 클래스를 선택해줘라
여기서 Selector = css의 설렉터를 의미한다.
document.querySelector('body') 선택을했으니 css의 속성을 어떻게 넣을 수있는지?
javascript element style
https://www.w3schools.com/jsref/prop_html_style.asp 참고하면
document.getElementById("myH1").style.color = "red";
이런식으로 사용한다는 것을 알 수 있다.
document.querySelector('body').style.backgroundColor = 'black';
응용하여 이렇게 사용할 수 있다.
사용자와 상호작용해서 애플리케이션을 만드는 핵심적이 원리를 알 게되었다.

10. 프로그램 프로그래밍 프로그래머

자바스크립트의 언어의 개념을 알면서 프로그램이 뭔가? 프로그래밍언어
프로그램:시간이 흐름에 따라서 일어나는 순서이다. 이 순서를 만드는 것이 프로그램밍이고 이것을 만드는 사람이 프로그래머이다.
컴퓨터에 여러가지 기능이 있다. 그중 하나만 한다. 순서대로 컴퓨터를 반복해서 작용한다면? 그 반복적잡업이 싫어짐.
이걸 위해 컴퓨터 프로그래밍 언어를 만들었다. 컴퓨터가 문법에 맞게 하도록 하는 것이 프로그래밍 언어이다.

11. 조건문

조건에 따라 실행하는 것 버튼이 두개인게 불-편함 껌껌할때 누르면 밝게 밝을때 누르면 검게 하기
이것이 '토글버튼'이다.

12. 조건문의 활용

1.버튼의 밸류값이 무엇인지을 알기
javascript element get value 검색
https://stackoverflow.com/questions/4173391/getting-dom-element-value-using-pure-javascript
var value = document.getElementById(id).value; 사용하기
document.querySelector(#night_day).value === 'night'

13. 리팩토링 중복의 제거

중복된 코드를 낮추는 방식으로 개선하는게 좋다.틈틈히 해야지 좋은 프로그램이 된다.
만약 버튼이 여러개일때? 이름이 같으면 맨위에 있는게 바뀜
그런데 이게 어떻게 바꾼다? 본인을 지칭하는 this로 한다.

if(document.querySelector('#night_day').value === 'night'){
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color='white';
    document.querySelector('#night_day').value = 'day';
  }
  else {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color='black';
    document.querySelector('#night_day').value = 'night';
  }
  ">

이런식의 코드가 있다고 한다.
this.value로 하면 바로 이 버튼을 의미하게된다.
중복되는 부분을 변수에 넣으면 또 줄일수있다.

var target =  document.querySelector('body');
  if(this.value === 'night'){
    target.style.backgroundColor = 'black';
    target.style.color='white';
    this.value = 'day';
  }
  else {
    target.style.backgroundColor = 'white';
    target.style.color='black';
    this.value = 'night';
  }

결국 이런식으로 획기적으로 줄어들게된다.

14.반복문예고

어두울땐 어둡개 밝을땐 밝게하기? 링크들을 색을 바꾸자.
링크가 1억개면 1억개를 해야한다.
a태그 하나하나를 색을 바꾸기 배열과 반복문을 사용하기
여러개의 태그 선택하는 방법배우자.

15.자바스크립트의 배열

var arr = ["값1", "값2"];
document.write(arr[0]);
인덱스 0번째 값가져오기 //값1
들어있는 값이 몇개인가? arr.length
배열에 값 추가하는 방법 arr.push(값3); pop()등
arr 에는 3개의 값을 가지게 된다.
자바스크립트의 배열은 자바의 스택구조랑 비슷하게 생긴듯 하다. (후입선출)

16.자바스크립트의 반복문

for while문 다 사용한다.
배열을 반복해서 이름 넣기?

17. 배열과 반복문 활용하기

링크들을 야간모드에 밝게 주간모드에는 어둡게 만들기
검색해보자

javascript get element by css selector multiple
-> javascript queryselectorall
var alist = document.querySelectorAll('a');
    var i = 0;
    while( i < alist.length){
      alist[i].style.color = 'white';
      i = i + 1;
    }

a(링크)들을 배열에담아서 반복문으로 색 바꿔주기
처음에 document.querySelectorAll('a').style.coler만했을때는 맨위의 a인 web만 바뀌었다.

18. 함수예고

코드가 많아지면 이것들을 잘 정리정돈할필요가 있다. 작은 부분은 함수 크면 객체이다.
input이라는 태그가 1억개가 있다고 가정해보자. 1억개의 자바스크립트를 만들면 안에 있는 한가지를 변경하기 힘들다.
또한 완전히 같은 코드인지 알 수 없다. 또한 코드량이 엄청나게 많아지면 안좋아진다.
이것을 위해 하는것이 함수이다.
function 함수이름(매개변수){실행할 코드내용}
실제 사용하는 곳에가서 함수이름(this)하면 코드내용이 실행된다.
만약 하나만 바꾼다면 이 함수를 사용하면 재사용성이 좋아지고 코드 중복이 줄어드니 보기 편해진다.
또한 같은 로직인지를 확신할 수 있다.

19. 함수

반복이 연속적이게 아니게 반복된다면? 반복문을 사용하는 것이 힘들어진다.
여기엔 반복문이 아닌 함수를 사용해야한다.

Basic
  function two(){
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
      }
      document.write('<li>1</li>');
      two();
      document.write('<li>3</li>');
      two();

20. 함수 : 매개변수와 인자

만약 계산을 하는 함수를 만들때 값이 그때 그때 달라진다고 생각해볼때 과연 어떻게하나?

  function sum(left, right){
        document.write(left + right + '<br>');
    }
    sum(2,3); //5 
    sum(3,4); //7

매개변수에 인자를 넣으면된다.
sum(2,3); 의 2와3이 인자 함수에서 left right가 매개변수이다.

21. 함수: 리턴

1+1 2 일때 1+1은 2에 대한 표현식임.
그럼 1===1 true에 대한 표현식임.
이전 함수는 1.좌항우항더하기 2.br로 줄바꿈하기 3.화면에출력하기
만약 이것이 매우 복잡하다면? 이것을 다양한 방법으로 사용해야한다면?

function sum2(left, right){
      return left + right;
    }
    document.write(sum2(2,3) + '<br>');
    document.write('<div style="color:red">' + sum2(2,3) + '<br>' + '</div>');
    document.write('<div style="font-size:3rem;">' + sum2(2,3) + '</div>');
}

계산이라는 기능만을 사용하게 함으로써 이 원자화된 기능을 사용하게 해준다.
다양한 용도로 함수를 사용할 수 있게 해준다.

22.함수의 활용

nightDayHandler() 함수를 만들어서 중복 처리될내용을 넣어준다. 만약 이 버튼이 매우 많다고 가정했을 경우에 코드를 여러번쓰면 비효율적이기 때문임.
그런데 그냥 독립된함수를 만들게되면 함수안의 this가 전역객체가 되버린다.
여기서 이것이 그래서 매개변수를 넣고 night_day라는 것을 알도록 인자에 this를 해준다.
nightDayHandler(this) == nightDayHandler(#night_day)인것임
function nightDayHandler(self) {}

23. 객체 예고

프로그래밍에서 가장 어려운 부분중 하나이다. 객체는 함수와 대립하는 게아니라 함수라는 것을 위해 객체가 존재한다.
객체가 무엇인가는 매우 많은 이야기가 필요하다. 경험을 쌓아가며 객체를 알아둘 필요가 있다.

24. 객체

function setColor(color){색바꾸는 반복문}
setColor('white');로 함수로 쉽게 바꾸엇다.
그런데 배경색을 바꾸고 싶다.? 그 함수를 또 setColor로 바꾸면? 함수이름이 중복되서 안된다.
만약 이 매 우 긴 코드라서 중복되는 함수이름이 있는지 몰랐을때? 문제가 발생할 수 있다.
그런데 함수들 이름만 바꿔서 여러개로 만들면 또 비효율적임 이런 비슷한 함수들 을 묶어서 만들어 두라고 객체를 만들엇다.
서로연관된함수 변수들을 묶어서 하는 객체가 생겻다.
Body라는 객체를 만들면 Body.함수이름 이런식으로 바꿀수 있게된다.
documet.write처럼 이런것들 == docunmet라는 객체의 '메소드'를 사용하고 있었던 것이다.

25. 객체쓰기와 읽기

Object
객체는 데이터를 순서없이 저장할 수 있다. 데이터를 아무 체계없이 넣으면? 그거는 쓰레기통일뿐임.
객체는 이름이 있는 정리 정돈 상자라고 할 수 있다.

var coworkers = {
      "programmer":"egoing",
      "designer":"leezche"
    };
    document.write("programmer : " + coworkers.programmer + "<br>");
    document.write("designer : " + coworkers.designer  + "<br>");
    coworkers.bookkeeper = "duru";
    document.write("bookkeeper : " + coworkers.bookkeeper  + "<br>");
    coworkers["data scientist"] = "taeho";
    document.write("data scientist : " + coworkers["data scientist"] + "<br>");

변수 = { "키" : "값" }
참조변수.키 = "값" (실제 참조변수인지는 모름 내가 이해한 부분)
키를 띄어쓰기는 못하니 ["키"] 이런식으로 배열처럼 넣어주면된다.

26.객체와 반복문

생성된 객체에 가져올 필요가 있다.

  for (var key in coworkers){
    document.write(key + ": " + coworkers[key] +'<br>');
  }

객체의 키값을 가져왔다.
이것을 반복출력하면 객체의 키값들을 출력할 수 있다.
배열을 불러올때 arr[0]이런식으로 불러왔듯이 또한 값을 불러오려면
key값들을 저장한 후 객체[key]하면 그 값들을 불어올 수있다.

27. 객체의 프로퍼티와 메소드

객체에는 함수도 구성원이 될 수 있다.
객체의 이름이 바뀌면 이 함수를 못가져올 수도잇다. 그래서 안에서 this로 해주자.
그런데 객체안에 이 함수도 들어가서 이것을 처리하면 함수도 나와서 if문같은거로 처리해줘야한다.


이런 객체 안에 포함된 함수는 'Method'라고 하고 객체에 소속된 '변수'는 Property 라고 한다.

28. 객체의 활용

var Links = {
    setColor:function (color){
      var alist = document.querySelectorAll('a');
      var i = 0;
      while( i < alist.length){
        alist[i].style.color = color;
        i = i + 1;
      }
    }
  }
  var Body = {
    setColor:function (color){
        document.querySelector('body').style.color = color;
      },
    setBackgroundColor:function (color){
        document.querySelector('body').style.backgroundColor = color;
    }
  }
  function nightDayHandler(self) {
    if(self.value === 'night'){
      Body.setBackgroundColor('black');
      Body.setColor('white');
      self.value = 'day';
      Links.setColor('white');
    }
    else {
      Body.setBackgroundColor('white');
      Body.setColor ('black');
      self.value = 'night';
      Links.setColor('black');
    }
  }

객체에 내용들을 함수들을 넣어버려서 매우 간단해졋다.

29. 파일로 쪼개서 정리정돈하기

이전시간에 정리정돈에 대해서 배웟다.
서로 연관된 코드들을 파일로 묶어서 그루핑하면 웹페이지가 아무리많아도 정리가능하다.
다른 웹사이트들에 <input type="button" value="night" onclick="nightDayHandler(this)">을 넣었다고 해보자
그러려면 작성햇던 객체들을 또 각 웹페이지마다 적어줘야한다.
또 만약 웹페이지가 1억개 있다고 가정해보자. 1억개의 웹페이지들의 색을 바꾼다고 하면 하나하나 바꿔줘야한다. 이것은 불가능하다.
이것들을 정리하기 위해 파일로 쪼개주면된다.
<script> </script>를 제외한 공통된 코드를 복사해서 .js파일에 넣어준다.
그러고 <script src="colors.js"> </script>해준다면?
css파일을 저장해서 여러게의 웹페이지에 사용했듯이 소스파일을 가져와서 사용하게 되는 것이다.
새로운 웹페이지를 만들더라도 똑같이 사용한다면 또 사용할 수 있다.
웹서버의 입장에서 입장을 두번 해야하는데 이렇게 캐쉬로 저장해둔다. 다음에 접속할때 저장된걸 부르면되니 올때마다 긴 코드를 부르는 것보다는 훨씬더 효율적이다.

30. 라이브러리와 프레임워크

오늘날 혼자서는 소프트웨어를 만들 수는 없다. 누군가가 만들어 놓은것 위애서 만들거나 협업을 하거나 다른사람이 만든거를 가져왓 만들기도한다.
다른사람이 만든 소프트웨을 가져와서 소비하는 소비자가 되어보자.
library vs framework
library는 도서관 정리정돈되어있는거 내가 필요한 부품들이 잘 정리정돈 재사용할 수 있게 되어있는 것임. 내가만든 부품을 가져오는것
framework만들고자한느 것이 있을때 만드는게 무엇이냐에 따라서 공통점이 잇고 갈라지는 점들이 있는데 이 공통점을 framework을 사용해서 갈라지는 점들을 바꿔나가는 것이다.
전자는 가져와서 사용하는거고 후자는 안에 들어가서 만드는 느낌이다.
library중 유명한 것의 하나는 'jquery'이다. 이 라이브러리를 사용하면 생산성이 훨씬더 높아진다.
지금까지 지식을 알아야 이것을 사용할 수 있게 된다.

query를 검색하면 라이브러리를 다운 받을 수 있다.
https://jquery.com/download/
다른 사용방법은 CDN이 있는데 자기프로젝트에 다운받아서 사용하는게 귀찮으면?
자신들의 서버에 넣어두고 우리는 src속성을 이용해서 가져다 쓸수잇다. 사용료까지 자신들이 내줌.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">\
구글에서 제공하는 jquery를 사용할수 있게 된것임.
setColor:function (color){
var alist = document.querySelectorAll('a');
var i = 0;
while( i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
로썻던 것을 jquery를 사용하면
setColor:function (color){
$('a').css('color', color);
}
css의 'color'를 바꾸고싶다. 두번째인자는 매개변수로들어오는 인자
매우 쉽게 줄일수있다.
새로운 언어가아닌 자바스크립트를 이용해서 css라는 함수를 jquery를 만들어놧고 이것을 내부적으로 우리대신 처리해주는 것이다.
자바스크립트는 가장빠른속도로 진화하고 있고 수많은 라이브러리들이 쏟아지고 있다. 라이브러리를 많이 알수록 많은 것을 사용할 수 있다.
이런식으로 다른사람이 만들어 둔것을 가져다 쓰는게 중요하다.
파일로 로직을쪼갯을때 내가 잘만드는 것도 중요하지만 남의 것을 가져다쓰는것도 중요하다.

31. UI VS API

User Interface
vs
Application Porgramming Interface
두개의 다른듯 비슷하고 비슷한듯 다른것을 아는거로 우리가 하는게 뭔지 알아보자.
버튼을 눌러 경고창이 뜨게해보자
버튼을 누르는건 웹사용자가 시스템을 제어하기 위해 사용하고 있는거다. 이것을 UI라고한다.
그럼 경고창은 누가 만들엇나? 우리의 의도가 반영되어서 우리가 만든걸수도 있는데 기 경고차의 기능이나 모양이 일절 설명되어있지않다.
웹브라우저를 만드는 사람들이 alert이라는 함수로 사용설명서로 약속한 것이다.
이 조작장치를 일반인이 사용하는게 아니라 우리가 만드는 것인데
애플리케이션을 만들기 위해 프로그래밍을 할때 사용하는 조작장치를 바로 API라고 한다.
이것은 모든 프로그램언어의 공통적인 부분이다.
현재까지는 ui만 썻는데 우리는 api를 만들 수 있게 되었다.

32.수업을 마치며

공부보다는 실습이고 시작해야할 것은 프로젝트이다?
프로젝트를 시작할때 모든계획을 총동원하지말고 필수불가결한 최소한의 도구만 사용하자.
순서에따라 실행되어야하는 명령들이 실행되게 하자. 최소한의 지식으로 현실의 문제를 해결할수 잇게하자
어느순간 한계가 오면 조건문 반복문들을 신중하게 넣으면서 각각의 관계에 익숙해지자
그때 또 한계가 오면 실습을 멈추고 공부를 하자 검색을 하면서 공부해보자.
만약 웹페이지의 태그를 삭제 자식태그 추가하고싶다면 documnet를 보자
만약 여기서도 맛ㅊ자으면 DOM Document Object Model에서 수색범위를 넓혀서 찾아보자
웹브라우저 자체를 해야한다면 window이서 찾아보자 새창을 열거나 할때사용
웹페이지를 리로드하지않고 정보를 리로드하고싶다면 ajax를 사용하자.
만약 리로드되어도 현재상태를 유지하고싶다면 cookie를 사용하자.
오프라인에서도 작동하는것?: offline web application
화상통신? webRTC
사용자 음성인식 음성으로 정보 speech로시작하는 api
3차원으로 움직이는 게임과 같은것 webGL
가상현설 webVR 등등
필요하면 api를 찾아보라!!

33. 실제 만들어진사이트

https://chunpinge.github.io/my-first-web-site/

var Links = {
  setColor:function (color){
    // var alist = document.querySelectorAll('a');
    // var i = 0;
    // while( i < alist.length){
    //   alist[i].style.color = color;
    //   i = i + 1;
    // }
    $('a').css('color', color);
  }
}
var Body = {
  setColor:function (color){
      //document.querySelector('body').style.color = color;
      $('body').css('color', color);
    },
  setBackgroundColor:function (color){
      //document.querySelector('body').style.backgroundColor = color;
      $('body').css('backgroundColor', color);
  }
}
function nightDayHandler(self) {
  if(self.value === 'night'){
    Body.setBackgroundColor('black');
    Body.setColor('white');
    self.value = 'day';
    Links.setColor('white');
  }
  else {
    Body.setBackgroundColor('white');
    Body.setColor ('black');
    self.value = 'night';
    Links.setColor('black');
  }
}
<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta  charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="colors.js"> </script>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
  <div id="article">
  <h2>JavaScript란 무엇인가?</h2>
    <p>
      JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
      JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[10] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
      The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.
      JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
      Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
    </p>
  </div>
  <div id="night_day">
  <input  type="button" value="night" onclick="nightDayHandler(this)">
  </div>
</div>
</body>
</html>

2022.12.28 후기

프론트엔드 부분의 html css javascript부분을 끝마쳤다.
아주 가벼운 수준만 배웠지만 앞으로 찾아보며 이용할 수는 있을 것 같다.
중요한 것은 꺽이지 않는 마음