1. Coding Test
-
백준 문제풀기 (그리디[12/50] → 탐색[12/50] → 동적프로그래밍[12/50])
2. Live Academy
-
💬"내가 걔한테 좀 심했나?" , "~하려고 했던 것 뿐인데" , "부모로서(형으로서) 잘 하다" , "내가 한 말 가지고 서운해 하더라" 🔗복습
-
⚡️영어 Tip | "언제" & "얼마나 오래" - 질문에 쉽고 자연스럽게 대답하는 요령 🔗진도
3. Vanilla JS
- 쇼핑몰 SPA
4. Interview
⚙️ 웹 페이지 로딩 최적화
요청의 크기 줄이기
- 응답 파일(빌드가 완료되어 서버에 업로드 된 파일)의 크기를 줄인다.
- 보통은 이런 파일 크기를 줄여주는 다양한 웹팩 플러그인 설정과 웹팩의 기본 설정들을 통해 이를 해결한다.
- Webpack 플러그인 중 TeserPlugin은 JS 코드를 줄여주고, 압축 해준다(Minify). 난독화(Uglify)도 기본적으로 진행한다.
- 압축화 : 모든 들여쓰기와 공백이 제거되고, 전체 코드가 한 줄로 병합됨. 원본 코드에서 들여쓰기, 공백, 콤마 등이 제대로 사용되지 않았다면 압축된 코드에서 문제가 생길 수 있음
- 난독화 : 자바스크립트 코드 자체를 분석하기 어렵게 만드는 과정. 변수, 함수명 등이 줄어 용량 감소. 하지만 난독화 단계가 높을수록 코드를 해석하고 실행하는 속도가 느려질 수 있음
이미지, 영상 처리
- 가로 1000px 이상의 큰 사이즈 이미지를 제외하고라면, jpg나 gif보다 Webp 형식을 사용하는 것이 꽤나 효율적이라고 한다
- GIF의 경우에는 MP4 형식으로 바꾸어 최적화 (autoplay, muted, loop 속성을 넣어 마치 GIF처럼 보이게)
Code Splitting & LayoutShift
- React.lazy를 사용해 동적 import를 하게되면 컴포넌트가 필요한 상황에서만 import 하도록 만들 수 있다.
- CSS top 속성 → transform으로 바꾸어 Layoutshift를 없애주었다.
- 폰트의 경우에도 preload 속성을 주어 현재 페이지에서 필요한 폰트를 빠르게 가져온다.
⚙️ CSS 박스 모델
- Content: 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, heigth 프로퍼티를 갖는다.
- Padding: Border 안쪽에 위치하는 요소의 내부 여백 영역이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.
- Border: 테두리 영역으로 border 프로퍼티 값은 테두리 두께를 의미한다.
- Margin: 테두리 바깥에 위치하는 요소의 외부 여백 영역이다. Margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 배경색을 지정할 수 없다.
box-sizing 프로퍼티
- box-sizing 프로퍼티의 기본값은
content-box이다. 이는 width, height 프로퍼티의 대상 영역이 content 영역을 의미한다. - box-sizing 프로퍼티의 값을
border-box로 지정하면 마진을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다.
⏱ Total study time - 6 hours 50 minutes
느리지만 꾸준하게 💪🏻