21-12-8일 공부기록

인프런 강좌에 있는 자바스크립트 100제를 듣기 시작했다. 

그 중에 가장 이해가 어려웠고, 막혔던 부분 위주로 복습 개념으로 글을 쓸 예정이다. 

그리고 당분간은 자바스크립트 보다는 HTML과 CSS를 위주로 좀 더 깊숙히 공부하고 읽어볼 예정이다. 

코드를 외우고 사용하는 것도 중요하지만 기초를 단단히 해야겠다는 생각이 좀 더 커지는 계기가 되기도 했고, 

나중에 프론트 엔드 개발자가 되었을때 단순히 코드만 입력할 줄 아는 사람보다는 정말로 언어에 애정을 갖고 

새로운 이슈나, 버그에 대응하고 시간이 지나도 수정하지 않아도 되는 코드를 작성하는 프론트 엔드 개발자가 되고

싶다. 서론이 길었다. 복습 시작한다! 

.

.

 

// Q.7 변수명으로 안되는 것은? ( 변수의 식별자로 사용 가능한 기준. ) # 변수명

        // 1. 특수기호 ( _ $ )

        // 2. 문자열 (단, 예약어는 불가능.)

        // 3. 숫자 (단, 첫번째 순서로는 불가능.)

var _나의변수 = null;

        var $이것도가능 = null;

        //var var = 1; // 이건 불가능.

        //var 2것도 = 2 // 이것도 불가능.

        console.log(_나의변수);

 

생각지도 못하게 틀렸던 문제. 

이제는 알았으나 다시 한 번 상기하고자 올려 본다. 방심하지 말자. 

.

.

 

//Q.8 출력값을 찾아라. #객체의 키이름 중복

        var hyun = {

            hellow:'world',

            'age' : 28,

            'age' : 29,

            'full' : 'noting',

            'push' : 'pull'

        };

        console.log(hyun['age']);

        // age는 28과 29 두개가 있는데 객체에서 값을 알아낼때 제일 마지막 값을 출력해준다. 고로 답은 29이다.

        // 점 접근자와 곽괄호 점근자를 사용한다.

        // 객체는 키와 값으로 데이터가 이루어져 있다. 키는 문자 혹은 숫자로 설정할 수 있는데,

        // 곽괄호 접근자를 사용할때는 반드시 ''를 써줘야 한다. 점 접근자는 ''없이 데이터를 갖고 올 수 있다.  

접근자라고 말하니깐 먼가 대단한거 같은데.. 그냥 [] = '' , . = 변수명.키 말이다. 

.

.

 

        // Q.9 소스코드를 완성하여 날짜와 시간을 출력해라. # concat을 활용한 출력 방법

        var year = '2021';

        var moth = '12';

        var day = '6';

        var hour = '24';

        var minute = '00';

        var second = '30';

        var result = year.concat('/',moth,'/',day, ' ' + hour+':'+minute+':'+second);

        document.write(result);

        console.log(result);

        concat = concatenate = 동사) ~과~을 연결하다.

솔직히 이건 대충 유추해서 맞췄다. 근데 좀 빙빙 돌아서 갔다. 여러번 찍어보고 고치기를 반복하다보니

어느순간 정답..! 뿌듯..ㅎ

.

.

 

        // Q.10 별 찍기 # for 문 연습

        const one = 5;

       

            for(let i=1; i<= one; i++){

                var tree = ""; // one의 값을 초기화 시켜주기 위해 for문 안으로 들어옴. -> 안쪽 for문을 다 돌고 첫번재 포문으로 빠져 나왔을대 안쪽 for문의 값이 남아있는것을 방지 하기 위해 계속 빈칸을 선언해 주는 느낌?

               

                for (let k = 1; k <= one-i; k++) //공백 증가 for문 , one - i 을 안해주면 모든 열에 공백 5개가 생긴다. 고로 계속해서 값은 커지면서 one을 빼 줄 수 있는 i 가 필요하다.

                {

                    tree = tree + ' ';

                }

                for (let j = 1; j <= i*2-1; j++){ //* 증가 for문

                    //j 가 i보다 작거나 같은 이유는 j도 똑갘이 갈수록 점점 수가 많아지는 별이여야 하기 때문.

                    tree = tree + '*';

                }

                console.log(tree);

            }

 

솔직히 이번 글쓰기는 이것을 위한 글쓰기 이지 않을까 생각을 한다. 

아직 100퍼센트 이해한건 아니지만 틀리더라도 차근차근 설명을 해보겠다. 

 

일단 const 로 변하지 않는 one = 5 를 선언해준다. ( one은 5번 이상 돌지 않기위해 선언해준 느낌.)

 

반복문 for로 시작 ~ 첫번째로 tree라는 변수를 선언하면서 반복문이 돌때마다 값을 초기화 해는 값을

넣어준다. ( 안그러면 *이 차곡차곡 쌓이면서 의도한 모양이 안나옴 )

 

트리 모양을 만들기 위해서는 * 앞에는 공백이 있어야 한다. 그 공백이 바로 for(k) 이다. 

for(i) = 1 로 for(k)를 만나면 ...  k =1, k <= 5-1, k는 증가한다. 라는 조건이 되는데,

그 조건으로 tree(첫번째 tree) = tree(for(k)를 위한 tree) + ' ' 을 선언한다. 

 

 

이후 for(i) = 1 은 그다음 for(j)문을 만나게 된다. 

 

 

for(j)는 *을 증가시켜주는 반복문이다. 

for(i) = 1 일때, j = 1 , j = 1*2-1 , j는 증가한다. 라는 조건문을 만나게 되는데 

결과는 똑같이 tree =(대입연산자) tree(for(j)를 위한 tree) + '*' 을 선언한다. 

 

 

마지막으로 콘솔로 찍어본다. 

 

결과는

    *

   ***

  *****

 *******

*********

 

이 된다. 앞에 빈칸은 for(k) 뒤에 * 은 for(j) 

for(i) 안에 선언된 tree = "" 는 각각 for문을 만날때마다 대입연산자로 

변형(' ') -> 변형('*') -> 변형('") 을 거치면서 트리모양을 만드는 역할을 해주는것같다.

(이 부분이 제일 의심스러움)

.

.

 

이상 끝이다. 저게 이해가 안가서 다시 구현해보고 이것저것 지우면서 이 for문은 왜 필요한건지, 

필요 없는 부분이 있는지 뜯어보다 보니 시간이 잘갔다. 

.

.

 

자바스크립트 공부를 아예 안하지는 않겠지만 그래도 2 ~ 3 일은 HTML CSS 위주로 보지 않을까..?

항상 열심히 하자. 열심히 하다보면 요령이 생긴다. 피하지 말고 일단 해보자

화이팅~!