Today I Learn 20220624

❤ Todo

💡 면접 질문 4개
📗 SNS 앱 예제로 배우는 프로그레시브 웹 앱 ✔
📗 기초부터 완성까지, 프런트엔드 ✔
📗 리액트를 다루는 기술 🔺

❤ Error & Solution

github repository file/folder 삭제

$ git rm -rf (파일이나 폴더명)
$ git commit -m "delete file/folder"
$ git push -u origin +master

❤ What I learned

this

1. 일반 함수: 엄격 모드에서는 this의 값이 window 전역 객체를 참조하지 않고 undefined로 올바르게 남아 있다.
2. 생성자 함수: 생성자 함수 내의 코드를 실행하기 전에 객체를 만들어 this에 바인딩
3. 메서드: 메서드를 어떻게 호출했느냐에 따라 this 바인딩이 달라진다.
4. 화살표 함수: 화살표 함수를 둘러싸고 있는 렉시컬 스코프에서 this의 값을 받아 사용한다. 이러한 this를 렉시컬 this라고 하며 이 값은 변경되지 않는다. 화살표 함수의 this는 call(), apply(), bind() 함수를 사용하여 변경할 수 없다.

프로토타입을 사용한 상속 구현

→ 독학 카테고리에 정리

class

→ 독학 카테고리에 정리

렌더러 프로세스의 작업

1. 파싱,렌더트리 생성
2. 레이아웃
3. 페인트
4. 합성

CRP(Critical Rendering Path) 주요 렌더링 경로

1. HTML, CSS, 자바스크립트를 화면의 픽셀로 나타내기 위한 과정을 말한다.
2. CRP 과정에서 렌더 트리를 만들고 이 결과를 이용해 레이아웃을 수행하며, 페인트를 진행한다. CRP가 중요한 이유는 브라우저가 어떻게 화면을 렌더링하는지 알 수 있을 뿐만 아니라 성능에도 큰 영향을 미치는 과정이기 때문이다.
3. 페이지의 초기 로딩 성능 문제나 버벅거림 문제를 해결할 때 CRP의 어느 단계에서 문제가 발생하는지 파악할 수 있어야 한다.

상태 코드

1. 1xx : 서버에서 요청을 수신했으며 현재 처리하고 있거나 정보를 알려 줄 필요가 없을 경우
2. 2xx : 요청이 성공적으로 완료되었음
3. 3xx : 요청을 마치기 위해 다른 위치로 리다이렉션하는 것과 같이 추가로 동작을 취해야 할 때 사용
4. 4xx : 요청에 잘못된 구문이 포함되어 있거나 수행할 수 없는 경우 반환

400 : 요청 오류, 잘못된 문법으로 인해 서버가 해당 응답을 이해할 수 없을 때
401 : 권한 없음. 요청을 받기 위해서는 인증을 받아야 한다
403 : 접근이 금지될 때 반환
404 : 서버가 요청 받은 리소스가 없을 때 반환. 잘못된 URL로 요청을 하거나
      리소스 자체가 없을 때 반환

5. 5xx : 서버가 유효한 요청을 수행하지 못했을 때 반환

프런트엔드 뉴스 게시판 만들기→ github front-practice

목록 가져오기 시나리오

1. 이벤트를 등록하여 페이지의 로딩이 끝난 후 Top News와 최신 글 데이터 가져오기

// Top News 함수
function renderTopNews(){}
// 최신 글 영역 렌더링 함수
function renderLatestNews(){}
// 데이터 조회를 위해 DOMContentLoaded 이벤트 리스너를 등록
document.addEventListener('DOMContentLoaded',()=>{
  renderTopNews();
  renterLatestNews();
});

2. fetch() API를 사용하여 데이터를 가져오는 동안 로딩 이미지 보여주기

// spinner.js 
export function createSpinner(parent) {
  const spinnerAreaEl = parent.querySelector('.spinner-area');
  // document.createElement() API를 호출하여 <img> 요소 생성, gif 이미지 설정
  const imageEl = document.createElement('img');
  imageEl.alt = 'spinner';
  imageEl.src = './src/image/spinner.gif';
  // 생성이 끝난 이미지 요소는 appned() API를 사용하여 추가한다.
  spinnerAreaEl.append(imageEl);
}
// main.js
function renderTopNews() {
  const articleSection = document.getElementById('topNewsList');

  createSpinner(articleSection);
  ....
}
function renderLatestNews() {
  const latestNewsList = document.querySelector('.latest-news-list');

  createSpinner(latestNewsList);
  ...
}

3. 가져온 데이터로 DOM 요소를 생성한 후 추가하기

function renderTopNews() {
  const articleSection = document.getElementById('topNewsList');

  createSpinner(articleSection);

  setTimeout(() => {
    fetch('./data/top.json')
      .then((res) => res.json())
      .then((data) => {
        const { articles } = data;
        const articleList = articles.map((article) =>
          createTopNewsElement(article)
        );

        articleSection.append(...articleList);
      })
      .finally(() => {
        hideSpinner(articleSection);
      });
  }, 1500);
}

function renderLatestNews() {
  const latestNewsList = document.querySelector('.latest-news-list');

  createSpinner(latestNewsList);

  setTimeout(() => {
    fetch('./data/latest.json')
      .then((res) => res.json())
      .then((data) => {
        const { articles } = data;
        const articleList = articles.map((article) =>
          createLatestNewsElement(article)
        );

        latestNewsList.append(...articleList);
      })
      .finally(() => {
        hideSpinner(latestNewsList);
      });
  }, 1500);
}

4. 목록 요소의 추가가 완료된 후 로딩 이미지 제거하기

// main.js
function hideSpinner(parent) {
  const spinnerArea = parent.querySelector('.spinner-area');
  spinnerArea.style.display = 'none';
}

package.json의 중요한 속성들

→ 독학 카테고리에 정리

❤ Thinking

목록 가져오기 시나리오와 코드 숙지하기