#019-026. 눈 감았다 떴더니 지나버린 6주차

😎 이번 주의 잘한점

6주차 Weekly Flow

액션

• 이번 주에 세워놨던 우선 순위에 따라 최대한 해야할 일을 처리하고자 했다.
• 토이 프로젝트를 리팩토링 하면서 알게된 점 정리하기

칭찬

침대에 눕고 싶을 때가 정말 정말 많았지만, 해야할 일을 하기 위해 계속 앉아있던 점 칭찬해ㅠㅠ

확실히 우선 순위를 정해서 일을 처리해나가니까 못했던 일이 생기더라도 마음의 불편함을 덜 가질 수 있었다.

계획했던 일을 다 하지 못했더라도 자책하지 않고, 어제보다 성장한 내가 됐다는 것에 뿌듯함을 느꼈다는게 가장 포인트인 것 같다!

다른 사람과의 비교보다는 나와의 싸움에서 이겨내야한다. 앞으로도 잘 이겨보자구🔥

---

✔️ 이번 주의 개선점

문제

자바스크립트를 생각보다 깊이 있게 알지 못했다😂

원인

단순히 코드를 작성하고 동작시키는데에만 급급했던 것 같다.

액션 플랜

현재 하고 있는 딥다이브 책 읽기 스터디를 적극 활용하자!

겉핥기식 공부가 아닌 동작 원리를 이해하고 사용하면 내 코드가 왜 이렇게 동작하는지, 불필요한 코드가 무엇인지, 오류가 왜 발생하는지 알 수 있을 것이다,

---

💡 이번 주의 배운점

배움

가고자 하는 회사를 분석해서 기여할 수 있는 부분이 무엇인지 파악하기

JavaScript

JavaScript 기초

• JavaScript에서 타입이 필요한 이유
  • 컴퓨터에게 모든 명령어들은 이진수(0과 1)이기 때문에 값이 어떤 형태의 값을 가지고 있는지 알려주어야 한다.
• DOM vs. BOM
  • DOM(Document Object Model)은 문서를 컨트롤 할 수 있다.
    JavaScript Spec이 아님에 주의하자.
  • BOM(Browser Object Model)은 웹 브라우저와 관련된 객체의 조합이다.
    객체 모델 종류에는 loacation, navigator, history, ... 등등이 존재한다.
    우리가 많이 보고 사용했던 alert() prompt() 등의 DOM API가 포함되어 있다.
• 자바스크립트 사용 방법
  • 코드는 위에서 아래로 읽히면서 실행된다. 따라서 body 태그가 끝나기 전에 자바스크립트 코드를 넣어주어야 한다.
  • 자바스크립트를 사용 하는 방법 첫 번째는 <script></script> 안에 자바스크립트 코드를 작성하는 것이다.
  • 두 번째 방법은 자바스크립트 파일을 <script>의 src 속성으로 연결하는 것이다.

Sass 동료특강 - 멋쟁이사자처럼 프론트엔드 스쿨 5기 정신애님

같은 5기 수강생이신 신애님이 열어주신 동료 특강에 참여하게 되었다.

일단 동료 특강을 열어주신 신애님께 너무 감사했고, 해주신 설명 또한 배워갈 점이 많았다.

그 중에 공유해주신 피드백을 받았던 부분, 특강을 들으며 알게된 점을 정리하고자 한다.

• Sass 변수도 다른 언어들과 같이 명시적인 변수명을 사용하는 것이 좋다.
• Sass의 장점인 파일 분리를 사용해서 변수는 변수 파일에, mixin은 mixin으로 분리하자.
  이 때, 변수명 앞에 언더바(_)를 붙여 메인 Sass 파일에 @import 형태로 사용하자.
• 실습을 할 때 실험적인 것도 좋지만 효율적인 코드를 작성하는 습관을 들이는 것이 좋다.
• Vender Prefix - 브라우저별로 적용된 css 속성을 각각의 브라우저들이 인식할 수 있게 해당 웹 브라우저에 알려주는 접두사(prefix)이다.
  • vender prefix를 사용하는 것은 코드의 양을 늘게 하고 또한 브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 vender prefix를 사용할 가능성이 크다.
  • 따라서 사용하지 않아도 되는 vender prefix를 사용하는 것은 성능에도 영향을 주기 때문에 Prefix Free 라이브러리를 사용하는 것도 고려해볼 수 있다.

특강을 들으면서 설명을 쉽게 해주셔서 Sass의 장점이 더욱 와닿게 되었고, Sass를 사용한 프로젝트를 만들어보고 싶다는 생각이 들었다.

역시 프론트엔드는 다양한 라이브러리와 방법들로 화면을 보여줄 수 있는 점이 너무 매력적이다! ✨

 

Deep-Dive 스터디

드디어 시작된 Deep-Dive 스터디! 모두가 읽기 어렵다고 했지만 한 번쯤은 읽어보자는 도전 정신으로 스터디에 참여하게 되었다.

수업 진도와 맞춰 챕터를 읽는 것을 목표로 진행하고 있는데, 확실히 깊이 있는 내용이 많아 수업에서 배웠던 부분을 이론적으로 보완할 수 있었다.

이번주에 읽었던 부분에서는 변수가 메모리에 저장되어 값이 있는 공간을 가리킨다는 부분과 && ||를 사용한 단축 평가가 헷갈렸다.

알면 알수록 신기한 부분도 많지만, 말을 이해하는 게 약간 어려웠다..!

아래에는 읽으면서 중요하게 생각했던 부분을 정리한 스터디 깃허브이다.

 

자바스크립트란?

변수, 데이터타입, 연산, String

Number, Math

객체, 함수

 

수업에서 배웠던 JavaScript 변수, 연산과 연산자, 변수의 타입과 메서드들, 반복문 등은 양이 많아서 따로 글로 정리해서 올릴 예정이다😀

---

🙋‍♀️ 이번 주의 질문

변수는 식별자로도 불린다고 하였는데, 메모리 셀에 저장된 값을 가리키고 식별하는 역할만 있는 걸까요, 아니면 따로 메모리 셀에 변수가 저장되어 있고 값을 가리키는 걸까요?

👉 변수의 이름은 공간을 차지합니다. 어차피 컴퓨터가 기억하면서 저장을 해야하니 공간을 차지 않할 수가 없죠.

흔히 그려지는 그림에서 가리키는 화살표 자체가 공간입니다.

링크드리스트를 참고해서 보시면 이해가 편하실 거에요

Linked List

 

🤔 이번주를 마무리하며

벌써 멋쟁이사자처럼에서의 6주차가 끝나게 되었다ㅠㅠ 자바스크립트를 들어가면서 복습과 추가적인 공부에 대한 우선 순위가 정리가 되지 않아 블로그에 글을 올리는 것이 힘들어졌었다.

하루 하루 올렸던 TIL이 밀리게 되니 따로 정리하기가 힘들다는 것을 깨닫게 되었다😭

물론 내 몸이 10개였다면... 싶은 마음도 있긴 하지만 블로그 정리 외에도 따로 노션과 깃허브에 정리를 하고 있어서 배운 내용 정리가 부족했다고 생각하지는 않는다!

그래도 블로그에 정리한다는 것은 배웠던 내용을 정확한 정보와 이해한 내용을 덧붙여 깔끔하게 글로 작성하는 것이고, 배운 내용을 머릿속에서 포스트잇을 붙이는 작업을 하는 것이라고 생각한다.

그래서 앞으로는 우선 순위를 다시 재정비 하면서 블로그 글을 꾸준히 쓰는 것을 다시 목표로 하고자 한다🔥

남은 교육 기간 동안 후회되지 않는 하루 하루를 보내고 싶다☺️

 

또한 만들었던 토이 프로젝트를 리팩토링 하면서 성능 최적화와 웹 접근성에 대해서 다시금 생각할 수 있는 계기가 되었다.

생각보다 많은 부분을 고려해야 했고, 놓치고 있는 부분이 많았다는 걸 알았다.

내 손으로 코드를 작성해보는 것이 현재 내가 위치한 수준을 알 수 있는 가장 빠른 방법인 것 같다.

앞으로도 새로 알게될 지식들이 기대된다☺️