항해99 TIL - 4주차 리액트 과제 시작 & 오늘 배운 새로운 것들 기록

✅ 오늘 동료들에게 들은 말!

 

매일 동료들에게 나는 어떤 팀원이고 개발자인지 듣는 건 재미있다. 항상 새롭다.

난 아직 코딩 실력이 많이 부족한 것 같은데, 팀원들의 색다른 이야기를 들으면 난 이런 사람이구나 새삼 깨닫게 되기도 하고 위축될 법 하지만 다시 일어날 수 있는 계기가 되어준다.

 

❓ 블로그 어떻게 쓰나요?

 

지금 항해 몇일차인지 모르겠으나,,? 4주정도 지난 이 날, 영업일(?) 기준으로 18일 정도 지났는데 블로그 게시글이 벌써 70개가 되었다.

 

👌 어떻게? 왜?

 

그냥 배운 모든 것을 정리했다.!

 

알고리즘을 배웠으면, 모두 내용이 다를테니 하나하나 정리하고 내가 어떻게 이해했는지 써보고

강의를 들었으면, 강의 다 듣고 강의자료 보면서 똑같이 써보고 이해가 안 되면 자료 다시 보고

CS스터디를 했으면, 매일 하니까 매일 하는 그 챕터를 게시글 수정해서 추가해 두고

내가 부족한 언어 강의를 새로 결제했다면, 생활코딩에 따로 결제해서 보고 있으니까 그 내용을 기록하고

프레임워크 오류가 났다면, 오류가 왜 났는지 구글링 하고 그 내용을 정리해보면

 

게시글이 하루에 3개도 모자르다.

 

❓ 시간이 모잘라요! 안 바빠요?

 

모자르지 않다. 강의를 하나 다 듣고 강의자료를 보고 그대로 다시 적어가며 블로그에 기록을 남기는 일은 물론 번거롭다. 번거롭고 귀찮고 빨리 다음 진도를 나가고 싶다.

 

그런데 이렇게 블로그를 작성하다보면 장점은, 그 내용을 두 번 보기 때문에 아주 조금이나마 기억이 더 오래간다는 점이고 더 이해가 된다는 점이다.

 

어차피 우리 자료 2회독 할 거고 모르면 강의 다시 볼거고 코딩하다 모르면 구글링할거고 또 모르겠으면 팀원이랑 이야기 하지 않을 건가?

 

그 시간 중 단 한 시간이라도 줄일 수 있다면, 코딩할 시간은 늘어난다. 그렇기 때문에 매일 블로그에 기록하는 버릇은 내 시간을 오히려 단축시켜주는 방법이 되었다. 대신, 블로그 쓰는 자신만의 요령을 빨리 익히는 것이 좋다.

 

🔹 특히 강의에는 유효 기간이 있다.

 

내가 항해가 끝나면, 이 강의를 다시 들쳐보지 않을 수도 있지만, 그래도 한번씩은 다시 한 번 돌이켜보고 싶은 날이 분명히 올거다. 아직 나는 부족하고 빈 자리가 있다면 언제든지 채워가야 하기 때문에!

 

그런데 자료 정리 없이 강의만 계속 보게 되면, 99일 이후에 나는? 또 새로운 강의를 보고 또 새로운 결제를 해야할까?

아니다! 블로그에 정리를 해두면 다시 읽어볼 수 있다. 나는 블로그에 정리를 해두다 보니 코딩할 때 모르는 내용을 다시 강의를 가서 보거나 강의자료를 보지 않고 블로그 하나에서 해결하고 있다. 나한텐 꽤 좋은 방법이다. 그리고 새로 강의를 결제하는건 이제 항해가 아니라 자바스크립트처럼 나의 개인적인 공부를 위해 해야하는 것이 맞다고 보기 때문에, 미리미리 배운 건 정리해두는 버릇이 중요하다.

 

🔹 잠을 깰 수 있다.....

 

튜터님 졸립니다! ㅜㅜ 쪼끔만 억양의 톤을 주시면 좋겠어요,,? 내가 이해를 못해서 졸린걸까,,,? 

어쨌든 공부란 늘 졸린것! 나만 졸린 건 아니겠지 ㅎㅎ

블로그는 타자를 계속 쳐야 한다. 이해가 안 되도 일단 자료를 보고 치고 있다.

그러면 잠이 깬다. 강의 보고 -> 졸리고 -> 블로그 쓰고 -> 잠 깨고 -> 다시 강의 보고

꽤 효과가 좋다..

 

 

1️⃣ boolean 새로 배운 점

 

* [생활코딩] 입문자를 위한 자바스크립트 기초 강의 #자바스크립트 소개 # 자바스크립트 기초 // 여기에 기록해두었다.

let data = true; console.log(data);   => true let data = true; console.log(typeof data)   => boolean

 

typeof data 를 하면 boolean이 반환된다는 것 처음 알았다... 역시 기초 강의부터 채워가는 건 모르는 걸 배우는 재미가 있다! 코딩에서 크게 쓰지 않는 부분이라도 알아두면 많은 도움이 되겠지! 

 

2️⃣ Firebase -> FireStore 정말 어렵다

 

튜터님,,, 무슨 말인지 강의를 봐도 모르겠어요 ㅠㅠ

학습자료를 봐도 모르겠어요.. 앞으로 공식문서를 보고 쓸 때마다 따라 쓰라는 건지, 외우라는 건지 애매하다 어렵다..!

이또한 쓰다보면 익숙해지리라,,

 

3️⃣ document.querySelector

 

* [생활코딩] 입문자를 위한 자바스크립트 기초 강의 #자바스크립트 소개 # 자바스크립트 기초 // 여기에 기록해두었다.

 

 

document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다. 일치하는 요소가 없으면 "없다"라는 의미의 null데이터를 반환한다.

인자로 전달되는 선택자는 문자열 타입의 "유효한 CSS 선택자"를 의미한다.

 

document.querySelector("p");    // p태그를 선택하자 document.querySelector("#text");    // id가 text인 요소를 선택하자 document.querySelector(".text");    // class가 text인 요소를 선택하자

 

항해 강의에선, 배우진 못한 내용인데 중간에 코드를 짜다보면 구글링이나 여러부분에서 자주 마주쳤던 메소드이다. 익숙하지만 몰랐던 내용을 배워서 신선했다.

 

4️⃣ document.getElementById

 

* [생활코딩] 입문자를 위한 자바스크립트 기초 강의 #자바스크립트 소개 # 자바스크립트 기초 // 여기에 기록해두었다.

 

 

document의 getElementById 메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다. 일치하는 요소가 없으면 "없다"라는 의미의 null 데이터를 반환한다.

인자로 전달되는 선택자는 문자열 타입의 "id"를 의미한다.

 

document.getElementById("text");     // id가 text인 요소를 선택하자 document.getElementById("image");   // id가 image인 요소를 선택하자

 

이 내용은 배운 내용인데, querySelector랑 함께 공부하니 차이가 보였다. querySelector는 id가 tex인 요소를 선택할 때 "#text"라고 하고 getElementById는 애초에 id를 인자로 전달받기 때문에 "text"라고 쓰면된다.

 

5️⃣ textContent

 

* [생활코딩] 입문자를 위한 자바스크립트 기초 강의 #자바스크립트 소개 # 자바스크립트 기초 // 여기에 기록해두었다.

 

textContent 속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다. textContent를 통해 요소가 포함된 텍스트를 읽을 수도, 변경할 수도 있다.

 

const p = document.querySelector("p");    // p 요소를 반환받아 상수로 이름을 붙인다. console.log(p.textContent)     // p 요소의 textContent 속성을 콘솔에 출력해보기 p.textContent = "텍스트를 이걸로 바꿔!"

 

음... 이거 처음보는 내용인데,,, 내가 배웠는지 안 배웠는지 기억이 나질 않는다.

그래도 다시 보면 좋은거지!