230523) TIL 특강, 자바스크립트 문법 기초 수강

TIL 특강 수강

1. TIL 블로그를 네이버 블로그에서 티스토리로 이전하였다.

 

2. TIL 특강을 듣고 그간 작성했던 TIL, WIL이 아쉽게 느껴져 몇 가지 글을 수정하였다.

 

- 지난 주는 강의 학습 위주였기에 오류를 만날 일이 거의 없었지만, 음악 추천 사이트를 구현할 때는 오류가 잦았기에 해당 글을 수정하며 오늘 특강에서 배운 내용(문제/시도/해결/알아낸것)을 적용하고자 했다.

 

-> 음악추천사이트 구현 TIL 수정본 ( https://yui-ui.tistory.com/6 )

-> 음악추천사이트 구현 TIL 기존글 ( https://blog.naver.com/yui62yui/223106399076 )

---

자바스크립트 문법 기초

 

1. 어제 자바스크립트 문법 기초 1주차 수업을 수강하였지만, 1주차 과제로 제출된 문자열 만들기와 조건문 만들기가 쉽지 않았다. 물론 식은 많이 쳐 보며 익숙해지는 게 답이지만, 프로퍼티나 밸류 등 JS에서 사용하는 용어를 완벽히 소화하지 못한 것 같아 복습을 결심했다.

 

- 같은 수업을 1회차 더 반복하려다가 추천을 받은 JS 기초 문법 강좌가 있어 해당 강좌로 문법 기초를 다시 한 번 복습하고 있다.

- '자바스크립트 문법 기초'라는 같은 내용을 다루는 수업이지만, 예시나 설명이 조금씩 달라 머릿속에 더 명확히 해당 문법을 응용하는 과정들이 들어오는 것 같다.

 

-> html, css를 배우는 과정에서도 모르는 개념에 대해 하나의 페이지만 줄곧 보며 이해하려고 하기보다, 여러 페이지를 구글링으로 찾아보며 습득하는 것이 훨씬 이해가 쉬웠던 것 같다. 사람마다 다를 수 있지만, 나는 이렇듯 하나의 개념에 대한 여러 사람들의 설명을 보며 습득하는 것이 더 도움이 되는 것 같다!

 

 

2. for문의 이해

 

어제부터 골머리 앓았던 문제가 있다.

for (초기값; 조건부; 추가부분) {}

JS 내의 for문이 이런 순서로 구현이 되는 것은 알고 있었다.

 

그리고 보통 for문의 예시는 아래와 같이 표현이 된다.

for (let i = 0; i < 10; i++) {
	console.log(i)
}

그리고 위 값을 실행하게 되면 i가 '10'이 되기 전까지 i의 초기값인 '0'부터 1씩 더해지며 콘솔 로그에 찍히게 된다. 이 원리를 이해하는 것은 그다지 어렵지 않았다.

 

하지만 어려움을 겪은 부분은 for문의 응용부분이었다. JS 1주차 1번 과제로 만난 프로그래머 사이트의 문제 해결 과정에서 이러한 for문을 만나게 되었다.

 

for (let i = 0; i<s.length; i++) {
        if (s[i] === "P") {
            num++;
        }
    }

1. for문의 초기값으로 왜 'i'를 설정하는 것부터가 이해가 되지 않았다.

 

- 그래서 구글링을 해 봤는데, 그것에는 당연하게도 '이유'가 있었다. (궁금하신 분들은 검색을 추천드립니다!)

- 요약하자면 대충 ' ~하니까 그냥 암묵적으로 i로 설정하자!'라고 약속됨! 이라는 내용이었다.

 

-> 결론: for문 사용시 초기값의 변수명을 'i'로 설정하는 것은 '암묵적인 룰'이다.

 

2. for문에 if가 들어가는 것도 알겠고, 다 좋은데 왜 하필이면 s[i]가 === "P"를 뜻해야 되는 건지 이해가 되지 않았다.

 

- 위 코드에서 's'는 문자열을 받는 함수로 설정되어 있다.

- s라는 문자열 내의  P의 개수만큼 num값을 0부터 1씩 더해 줘야 하는 상황에서 위 식이 나왔다.

- 그렇다면 s[i] === "P" 는 곧 s안의 P값을 뜻하게 된다.

 

 

 

-> 그래서 나의 궁금증

     : 그래 다 알겠는데 그래서 왜 [i]가 s라는 문자열 내의 알파벳 각각을 뜻하는 건데?

 

정말 머리가 아팠다. 그래서 3시간동안 고민을 했다.

 

- [i]가 s라는 문자열 내의 알파벳 하나하나를 뜻하는 '약속'인가?라는 고민 끝에 for문 [i]라고 구글링도 해 보고, 혼자 for문에 대한 방대한 자료를 찾아보며 이해해 보려 해 봤지만 답이 나오지 않았다.

 

그렇게 너무 답답해서 컴공과 친구에게 나 for문이 도저히 이해가 되지 않는다며 이 부분을 (열변을 토하며) 설명하다 갑자기 혼자 깨달음을 얻어 버렸다.

 

 

접근 방법 자체가 틀렸던 것이다.

 

 

* 자, 여기서 문제! 애초에 s[]가 왜 사용 됐을까요?!

 

-> 그렇다... s[숫자]는 s의 값 중에서 n번째에 해당되는 값을 불러올 때 사용하는 식이었다...

 

 

애초에 답안을 내 머리로 생각해 낸 것이 아닌, 답안해설을 보며 따라친 것이다 보니 왜 for문을 사용해야 하는지 그 원리 자체에 대한 이해가 없었기에 왜 하필 s[i]여야 되는지 이해가 되지 않을 수밖에 없었던 것이다.

 

for (let i = 0; i<s.length; i++) {
        if (s[i] === "P") {
            num++;
        }
    }

다시 한 번 코드를 보자.

 

여기서 애초에 'i'를 왜 0으로 설정하였으며, for문을 이용하여 반복시켰고, s[i]라는 값은 도대체 왜 나왔을까?

-> s의 [i]값을 s 내부의 값의 길이만큼 반복하기 위함이 아닌가?

 

그렇다... for문이 실행됨에 따라 i의 값은 0부터 s의 길이만큼 반복될 것이다.

 

반복되면서 s의 i번째 순서 중 "P"가 몇 개인지를 찾아내고, 그 중 "P"와 완벽히 동일한 값이 있다면 num이 1씩 적립될 것이다.

 

그렇기 때문에 위와 같은 for문이 탄생한 것이다.

 

문제 출처: https://school.programmers.co.kr/learn/courses/30/lessons/76501

---

복습을 위한 강의 판서

---

TIL 특강 수강

 

1. TIL을 쓰는 이유

- 성장, 성실함 그리고 흡수력(주니어 개발자의 필수 덕목!)을 보여주기 위함!

- 내가 쓴 것에 관해서는 내가 가장 잘 알고 있어야 한다! (TIL은 이를 증명하기 위함이다!)

2. TIL에 꼭 들어가야 하는 내용

- 문시해알 (문제 / 시도 / 해결 / 알아낸 것)

- 시도와 알아낸 것을 중점으로 작성!

 

 

오늘도 잘 해냈다!