TIL 2023-01-05

Today I Learned

• 배열과 반복문 while을 배웠다.
• 배열을 통해 리스트를 작성하고 배열안의 내용을 추가 또는 삭제하면 자동적으로 리스트의 갯수가 늘어나거나 줄어들게 하는 방법을 알았다.

Q.

    <h1>Loop & Array</h1>
    <script>
        var coworkers = ['sky','soy','kim','han'];
    </script>
    <h2>Co workers</h2>
    <ul>
        <script>
            var i = 0;
            console.log(coworkers.length);
            while(i < );{
            document.write(
                '<li><a href = "http://a.com/'+coworkers[i]+'" target="_blank">'+coworkers[i]+'</a></li>');
            i = i + 1;
            };
        </script>

coworkers 의 갯수가 증가 또는 감소될 때 다른 곳은 건드리지 않고 배열 안의 목록만 수정할때 리스트가 완벽하게 작동하게 하려면 무엇이 들어가야 할지 영상을 멈춰놓고 40분을 고민했다.

A.

coworkers.length

처음 답은 var j = coworkers.length 로 지정한 후 while(i < j)라고 지정했으나 실행되지 않았다.

그 이유는 소괄호와 실행대상인 중괄호 사이에 세미콜론 ';' 때문이였다..

계속 무한로딩이 돌았고 결국 코드를 처음부터 다시 짜고나서야 정상적으로 작동했으며 사실상 답은 5분도 안되어 입력했으나 저것 때문에 작동하지 않았던 것이다..

이후에 리팩토링하며 var coworkers로 이미 지정되어있어 굳이 j에 coworkers.length로 지정할 필요없이 바로 while(i < coworkers.length)로 입력하면 됨을 깨닫고 수정했다.

• 이전에 조건문으로 만들었던 night&day 버튼에 반복문을 통해 해당 페이지의 모든 링크<a>가 night와 day로 변형될 때 자동적으로 style이 변하도록 만들었다.

Realization

• 이 글을 작성하며 코딩을 하다가 모든 크롬탭이 완벽히 검은색으로 변하면서 튕겼다. 다시 크롬을 실행하니 복원은 되었지만 이 블로그의 글쓰기 창에는 아무것도 적혀있지 않았다.. 임시저장을 꼭 하자..
• 세미콜론 ';' 을 남발하지말자.
• 강의에서 이곳에는 뭐가들어가면 좋을까요? 하면 1초후에 바로 알려주지만 강의를 멈춰놓고 직접 찾아내는 연습을 하고 있는데 꽤 효과가 있는 것 같다. 내가 원하는대로 되었을 때 매우 뿌듯하고 기뻤다. 코딩테스트에 비할바는 아니겠지만 빨리 코딩테스트를 해보고 싶어졌다.
• 나중에 내가 누군가에게 프로그래밍 또는 JavaScript를 알려줄수 있을 정도가 된다면 별도의 카테고리를 운영해서 복습할겸 보고 간단한 개념정도는 배워갈 수 있도록 코딩파일 또는 github와 연계하여 작성할 생각이다.
• 강의를 쭉 보면서 따라하는게 아니라 멈추고 혼자 해보는 시간이 꽤 길어서 강의를 듣는 속도가 느려지지만 확실히 이해하고 가는것 같아서 이쪽이 더 나은것 같다.