(쌩초보,JS) 제가 무엇을 놓치고 있는걸까요? 수업 후 예시문제가 안풀립니다.

Question

안녕하세요. 비전공자 취준생 입니다.
한 달 정도 전에 개발 공부를 막 시작해서 국비지원 부트캠프에 들어가려고 사전에 독학 중 입니다.
자바스크립트를 배우고 있는데요... 
분명 인터넷 강의에서 선생님이 말씀 해 주셨지만 수업이 끝나마자마 문제를 풀면 코딩이 안됩니다...

예시입니다.
오늘은 10분정도 인터넷강의로 문자열 메서드를 배웠습니다. 변수 str1=Hello world; 라고 했을 때 
.length 를 사용하면 변수의 길이를 확인할 수 있다고 배웠습니다. 저는 이 수업을 들으면서 크롬 개발자 도구를 켜서 따라 쳤고 딱 srt1.length; 만 쓰고 엔터를 치니 바로 다음 줄에 11이 짠 하고 떴습니다. 기분이 좋았습니다.

그러나 수업이 끝나고 예시 문제에선 변수를 document.write() 로 출력해서 데이터(변수의 길이)를 확인하라고 했습니다.

저는 첫 번째로.
var str1 = Hello world;
str1.length; 를 쓰고 엔터를 쳤습니다. (아까 크롬에서 했던 것과 똑같이요) 그런데 아무 일도 일어나지 않았습니다. 
<수업 끝나고 문제푸는 자체 프로그램이 있습니다>

그래서 아 document를 이용해 출력하라고 하셨지 해서 다시
var str1 = Hello world;
str1.length; 
document.wirte(str1); 을 했습니다.
그런데 역시 아무 일이 일어나지 않았습니다...
지금까지 자바스크립트에서 console.log 나 document.write 뒤에 오는 괄호 안에 이 전줄에 썼던 변수명을 넣고 ; 를 쓰면 출력이 됐던 기억이 있어 저렇게 했는데

해설지를 보니
var str1 = Hello world;
str1.length; 
document.wirte(str1.length); 이거더라구요...

뭔가 제가 큰 기초 개념을 놓치고 있는 것 같아서 이대로면 모래성 쌓기가 되는 것 같아 무섭습니다. 답답하기도 하구요.

제가 응용력이 없는 걸까요...?

더 두려운건 구체적으로 제가 뭘 놓치고 있는지 모르겠습니다 ㅠㅠ 혹시 이런 저에게 들을만한 기초 강의나 개념 강의가 있다면 추천 부탁드립니다. 현재 자바스크립트 책을 보고 있는데도 코드 예시나 간단한 설명만 있을 뿐이더라구요.
유료 강의여도 강의가 좋다면 얼마든지 결제해서 들을 의향이 있습니다.

긴 글 읽어주셔서 감사합니다.

😎 · Accepted Answer

결론부터 말씀드리면 응용력이 없는게 아니라 익숙하지 않은겁니다.

익숙해지도록 모르는 걸 많이 검색해보시고 적용해 보시고 반복하세요

처음에는 받아드리는게 필요합니다. 초등학교 삼학년때 곱하기도 겨우 했는데 갑자기 분수라는걸 만납니다. 1/4 이게 뭐지…? 이건 아무리 봐도 절대 무엇인지 알 수 없습니다. 수학자들이 만들어 놓은 약속이니 일단 받아 드리고 이해 하셔야합니다.

코딩도 똑같습니다. 그냥 규칙입니다. 처음엔 이해를 못하실겁니다. 왜냐하면 사람처럼 생각할테니까 컴퓨터처럼 생각하고 이해 해야합니다.

크롬 개발자 도구는 자바스크립트 코드를 작성하고 즉시 결과를 환경할 수 있는 환경입니다.
그렇기 때문에 
const str = “hello world”;   엔터 하셨겠죠?
-> undefiend
str.length;  엔터
-> 11
이렇게 하게되면 바로 str.length의 값이 무엇인지 알려 줍니다. 이건 디버깅을 편하게 하라고 크롬에서 제공해주는 것입니다.

이후에 문제 푸는 프로그램에선 이런 환경이 아니였을 겁니다. 그렇기 때문에 아무일도 일어나지 않았을 겁니다. 이게 정상입니다. 아마 그 프로그램에선 str.length 뭐 어쩌라고 ~ 그냥 그렇게 실행되고 지나갔을 겁니다.

컴퓨터에게 이야기 해야합니다. str.legth가 무슨 값인지 알려줘~~

여러가지 방법이 있습니다.
console.log(str.legth)
강의에 나오는 document.write(str.legth)
아마 처음에 하셨을때 아무일도 일어나지 않는게 아니라 hello world가 화면에 노출 되었을 겁니다.

이제 답을 보고 그냥 넘어가시면 안됩니다 
document는 뭘 하는 놈인지 검색해 보시고
document.write() 도 검색해보고 설명 읽어보시고 직접 해보시고 알아가는 시간이 필요합니다. 그러면서 익숙해지는 겁니다

참고로 “Hello world” String object 입니다. ( string mdn 검색)
검색해서 보시면 속성에(property) legth 라는 것이 있을겁니다. 문자열의 길이를 알려주는 기능입니다.
이런식으로 하나씩 사용해보면서 익숙해지면

문자열의 길이? 아 .length 지? 하고 익숙하게 사용 하실수 있을겁니다.

결론은 컴퓨터는 계산만 빠르지 멍청하다 컴퓨터 처런 생각하고 원하는걸 요구해라
막 지르는건 검색해봐서 무엇인지 찾아봐라 
하다보면 익숙해진다

파이팅 하십쇼!!

강동희 · Answer

두 분께서 좋은 답변 남겨주셔서 깊은 답글은 남기지 않겠습니다!

윗 분께서 말씀하셨듯이 응용력이 없으신게 아니라 익숙하시지 않은겁니다.
var str = hello world!;
라는 문장을 해석하면, hello world 라는 문자열을 str 이라는 변수에 담자! 로 해석할 수 있고,
프로그래밍 적 관점으로 해석해보면, str이라는 변수를 선언하고 “hello world! 로 초기화 하자! 로 해석할 수 있겠죠.
질문자님께서는 아직 프로그래밍적 관점에서 사고하시기 힘드실 겁니다. 익숙하지 않기 때문이에요.

console.log(str) 을 찍으면, 당연히 str 이라는 변수에 찍힌 ”hello world! 가 나오고,
console.log(str.length)를 찍으면 당연히 str의 길이인 숫자가 찍히겠죠?

저에겐 이 과정이 익숙해져서 당연한 것이지만, 아직 질문자님은 익숙하시지 않기 때문에 당연하지 않은 것입니다.
익숙해지는 것은 연습밖에 없습니다.

지금처럼 많이 고민하시고 많이 코드를 작성해보세요. 언젠간 익숙해지고 지금 했던 고민들이 웃고 넘어갈 고민이 될 것 같습니다.

제가 봤을땐 질문자님은 충분히 좋은 개발자가 될 수 있을것 같아요!

화이팅이에요! 응원합니다🙏🏻🙏🏻

프레드윰 · Answer

응용력 보다 검색 능력이 약간 부족 한것같아요~ 그냥 구글링 연습 몇번 더 해보시면되요~
꾸준히 학습하고 찾아보고.. 저도 에러 나올때 낙심 많이 해봤습니다~ 현타도 많이 오고 슬럼프도 겪어보고.. 꾸준한 학습만이.. 살길이라 생각합니다~ 유툽 영상도 찾아보시고요 
팁이랑 유용한 강의 많아요~ 
그리고 인강 사이트 추천한다면 인프런, 유데미 이런쪽으로 찾아보시구요 
요새는 번역기도 잘되어 있어서 번역기 돌려서 찾아보시고요~ 부캠하신다고했으니~ 그때 가서 같이 공부 할 친구분도 만들어보시고 다양한 활동해보세요~  거기 보면 숨은 인재들도 몇분 있을 수 있어서요! 좀 부족하다 생각해서 일부러 지원하는분도 있을수도있구요. 많이 교류해서 친하게 지내보세요. 그럼 승승 장구 하시길~ 🙌