HTML 편 - 5일차

 

5일차

 

 

 

---

20. 수업을 마치며 1/3

• 우리는 웹의 본질을 샅샅이 들춰 보았다. 이제 멈춰 서서 앞으로 어떻게 할지 함께 의논해보자.
• 저자는 기술을 본질과 혁신으로 구분하고, 학습을 교양과 직업으로 분리한다.

• 본질은 교양과 좋은 짝이고, 혁신은 직업과 좋은 짝이라 생각한다.
• 코딩 교육을 하면서 알게 된 것을 그래프로 그려보면 다음과 같다.

• 이 그래프의 x축은 진도이다. 진도가 나아갈 수록 중요도는 급격히 떨어진다. 처음에 배우는 것은 모든 것의 공통분모이고 뒤에서 배우는 것은 특수한 상황에 유용한 것들이다.
• 반대로 진도가 나아갈수록 난이도는 급격히 높아진다.
• 이렇게 보면 두 선의 교점이 생길 수 있고 앞쪽은 본질을 배우고 뒤쪽은 혁신을 배우는 것 같다.
• 또 앞쪽은 교양이고, 뒤쪽은 직업이라는 생각이 든다.
• 교양은 중요하지만 중요한 것을 배우고 직업은 어렵지만 덜 중요한 것들을 배운다.
• 그리고 이 선을 하나로 만들면 아래와 같다.

• 즉 교양은 조금만 공부해도 할 수 있는 것이 기하급수적으로 많아진다. 반면 직업은 아무리 노력해도 실력이 잘 늘지 않는다.
• 생각해 보면 우리 마음이 힘든 것은 교양에 있을 때 빠르게 높아지는 능력의 속도를 보지 않고 낮은 상태의 능력을 보기 때문이 아닐까?
• 또 직업의 상태에 있을 때는 높아진 능력을 보지 않고 느려진 실력의 향상 속도를 보기 때문이 아닐까?

 

• 이 수업이 코딩을 교양으로 시작하는 사람에게는 출구이고, 직업으로 시작하는 사람에게는 입구였으면 좋겠다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=bTSDDyuMuUo

 

---

 

 

 

 

21. 수업을 마치며 2/3

• 이전 수업에서는 교양을 위해서 코딩을 배우고 있는 학우들과 작별의 시간을 가졌다.
• 공부만 하고 공부한 것을 써먹지 않으면 나중에는 머리속이 너무 복잡해져서 막상 코딩을 하려고 할 때 무엇을 해야 할지 모르게 된다.

 

• 지금부터 하려는 이야기는 복잡함에 대한 이야기이다.
• 우리 주변에는 눈에 보이는 복잡함이 있고, 눈에 보이지 않는 복잡함이 있다.
• 눈에 보이지 않는 복잡함은 공부한 것을 막상 사용하려 할 때 무엇을 해야 할지 막막하게 하는 주범이다. 이것의 실체를 추적해보자.
• checkbox.html이라는 파일을 만들고 다음과 같은 코드를 작성한다.

<input type="checkbox">

• 그 다음 페이지를 열어보면 체크박스가 생긴다.
• 이 체크박스를 이용해서 어떤 앱을 만들었다고 가정하고 잘 동작하는지 테스트는 몇 번 해야 할까? 두 번이다.
• 체크박스가 2개라면 어떨까? 4번이다.
• 3개라면? 8번이다.
• 만약 50개라면? 1,000조번이다.

 

• 세상은 우리 생각과는 다르게 이렇게 쉽게 복잡해진다.
• 위와 같이 1000조개의 경우의 수가 숨어있을 때 테스트를 하지 못한 경우에는 예상치 못한 버그가 생겨나게 된다.
• 이럴 때 작은 기능을 추가하는 것도 어려워지면서 깊은 슬럼프에 빠지게 된다.

 

• 공부도 마찬가지이다. 개념을 알게 된다는 것은 말하자면 체크박스가 늘어난다는 것이다.
• 예로 아이가 대화를 할 때 명사 10개를 안다면 아이는 10개의 의미를 만들 수 있다.
• 그랬던 아이가 좀 더 자라서 동사를 사용하게 되면 명사 10개, 동사 10개를 사용하여 경우의 수를 따져보면 100개의 의미를 만들 수 있다. 80개가 이득이다.
• 그리고 목적어에 대한 명사 10개를 추가로 사용할 수 있다면 단어 20개로 1000개의 의미를 만들 수 있다. 980개가 이득이다.
• 여기에 전치사까지 추가되면 30개의 단어로 100,000개의 의미를 만들 수 있다.
• 이처럼 문법이 조금만 복잡해져도 이득은 천문학적으로 커진다.

 

• 지금까지 우리가 배운 내용도 영어로 치면 주어+동사+목적어 같은 것이었으며 진도를 멈추고 지금까지 배운 것을 이용해 중요한 정보를 잘 정리 정돈해보라.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=JUNFoER12kk

 

---

 

 

 

 

22. 수업을 마치며 3/3

• 이전 수업에서는 본질에 집중하려는 학우들과 작별의 시간을 가졌다.
• 공부의 효용은 최소한으로 배워서 최대한으로 써먹을 때 드러난다고 생각한다.

 

• 진로에 대해 곰곰이 따져보자.

 

• 웹 사이트를 아름답게 만들고 싶다면 CSS를 공부해야 한다.
• CSS는 HTML이 태어난 지 약 4년 후에 만들어지기 시작하였다.
• 이 언어가 나타난 후에 웹 퍼블리셔나 웹 디자이너 같은 직업이 발전하기 시작했다.

 

• 사용자와 상호작용하는 웹 페이지를 만들고 싶다면 자바스크립트를 공부해야 한다.
• 자바스크립트는 HTML이 태어난 지 약 5년 후에 만들어지기 시작하였다.
• 이 기술이 나타난 후에 웹 프런트엔드 엔지니어, 웹 인터랙티브 디자이너 같은 직업이 발전하기 시작했다.

 

• 만약 1억 개의 웹 페이지로 만들어진 웹 사이트를 운영하고 있다고 가정하고, 어떤 이유로 웹 페이지에 있는 <h1> 태그를 <h2> 태그로 바꿔야 한다면 1억 개의 웹페이지를 변경해야 한다.
• 이것으로 인해 생산성의 한계에 봉착하게 된다.
• 이 한계를 극복하기 위해서는 백엔드 기술을 배워야 한다.
• PHP, JSP, Node.js의 Express, Python의 Django, Ruby on Rails, ASP.NET과 같은 기술들은 이런 목적으로 고안된 기술이다.
• 이 기술에 종사하는 엔지니어들은 백엔드 엔지니어 라고 부른다.

 

• 늦기 전에 자신 만의 프로젝트를 시작했으면 좋겠다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=WD-LFlMi6iA

 

---

 

부록. 코드의 힘

• 저자 유튜브 강의보기
  • 서론 : https://youtu.be/YVxCFGv9Eqk

 

---

 

• 동영상 삽입
  • 예제 코드 추가

<p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

• https://youtu.be/7T7r_oSp0SE

 

---

 

• 댓글 기능 추가
  • 예제 코드 추가

<p>
    <div id="disqus_thread"></div>
    <script>
        /**
        *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
        *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
        /*
        var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };
        */
        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://----------.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</p>

• https://blog.disqus.com/

• https://youtu.be/LVLHprUg-PM

 

---

• 채팅 기능 추가
  • 예제 코드 추가

<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/-------------';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
</script>
<!--End of Tawk.to Script-->

• https://www.tawk.to/

• https://youtu.be/d4H1ua2USa8

 

---

• 방문자 분석기
  • 예제 코드 추가

<!-- HEAD 태그 안에 추가-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=---------"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-224521091-1');
</script>

• https://analytics.google.com/

• https://youtu.be/K3cYoZ9AFOI​

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---