2022년 05월 12일

📚 오늘 도전하고, 배운 것

• 프로그래머스 과제관 풀어보기
  • 저번에 한 번 풀고나서 잘 이해했다 생각했는데 계속 해보지 않으면 역시 휘발된다는 것을 알게되었다.
  • async/await을 사용하는 코드 조각이 있었다. 그런데 사용하지 않아도 되는 부분 또한 async 키워드를 사용하는 것을 발견했다. 기본 개념을 제대로 이해하지 않고 사용했기 때문이다.
  • 계속 헷갈리는 this의 개념...
    • 처음에 다른 사람이 푼 코드를 보고 왜 this를 쓰는 거지 했는데 예전에 작성한 문서 읽고 느낌이 왔다. 다시 읽어봐야겠다는 생각이 들었다. 내일 꼭 읽도록 하고... 공부를 할 때 단순히 개념만 이해했다 넘어가지 않고 그 개념을 어떻게 활용할 수 있는지 방법을 익혀야겠다.

Gatsby

• 블로그를 Chrome Lighthouse로 확인하니 번들 크기가 크다는 정보를 얻었는데 무엇 때문에 큰지 궁금해졌다.
• webpack bundle analyzer plugin으로 webpack을 이용해 번들링되는 모듈을 분석해서 볼 수 있다는 것을 알게되었는데 gatsby에도 해당 플러그인이 있었다. 바로 gatsby-plugin-webpack-bundle-analyser-v2다.
• 문서에 나와있는 대로 설치해서 gatsby-config.js 파일에 추가한 다음, gatsby build로 빌드하면 알아서 브라우저 창이 열린다.
• 윈도우에서 종종 사용했던 spacesniffer와 비슷한 모습이었다.
• (concatenated)라고 되어 있는 번들은 왼쪽 상단의 > 버튼을 클릭하고 나온 팝업에서 Show content of concatenated modules (inaccurate)를 체크하면 상세하게 볼 수 있다.

Web Font 사용 방법

CSS에서 @font-face를 사용해 웹 브라우저에게 해당 서체를 다운로드할 것을 알릴 수 있다.

@font-face {
  font-family: <font 속성에서 font명으로 지정될 이름 설정>
  src: <source>
}

<source>에는 웹 폰트 파일 위치를 나타내는 URL을 적거나 사용자 컴퓨터에 설치된 폰트명을 local("Font Name") 형식으로 지정한다.

🤔 학습하면서 궁금하거나 어려웠던 점

표

🌅 내일은 무엇을?

• JavaScript 학습

🖋 log

• 더 용기를 내고 내 자신을 믿는 사람이 되고 싶다. 예전에 누가 아침마다 거울을 보고 "넌 할 수 있어!"라는 느낌의 말을 했다고 들었다. 일종의 최면 같은... 내일부터 해봐야겠다.