수업
코멘토(https://bit.ly/3D9XCOz)의 실무 PT라는 프로그램에 참여하기로 하고 오늘이 첫 수업이었다.
처음에 이 수업을 알게 되었을 때 커리큘럼이 좋다고 생각했었다. 수업이 js -> 클래스형 리액트 -> 함수형 리액트 순서로 레거시 코드들을 리팩터링 하는 방식으로 프론트 개발의 변천사?를 훑어보는 내용으로 이루어져 있다.
나는 시작부터 함수형 컴포넌트로 리액트를 시작했기 때문에 변화 과정을 훑어본다는 게 좋은 경험이 될 것 같아 신청했다.
첫 주 차 수업은 익숙한 내용이 많기도 했고, 어떤 개념보단 지난 흐름에 대한 이야기 같은 내용이었어서 크게 정리할 건 없었다.
예전에는 크로스 브라우징을 많이 신경 써야 했는데 제이쿼리가 그 부분을 지원해서 전성기를 누렸었다. 모던 브라우저들이 나오고 es6가 나오면서 인기가 없어졌지만.
간단한 예시로 멘토님이 IE를 따로 처리하는 걸 보여주셨는데 흠... IE가 없어져서 다행이다.
그래도 많지 않지만 아직 브라우저들이 구현한 렌더링 방식이나 그런 부분에서 차이가 있는 경우가 있어 크로스 브라우징을 처리해야 할 때가 있다고는 한다.
이번 수업 느낀 점은
1. IE가 없어져서 너무 좋다.
2. 바벨 만든 사람 최고.
과제
첫 주 차 과제는 어렵지 않아서 바로 했다. 데이터 배열에서 필요한 부분만 필터링해 컴포넌트에 주입해 주면 되었고 기본적인 내용은 미리 구현되어 있어서 필터링 로직만 작성하면 됐다.
const filterProducts = (products, category) =>
products.filter((product) => product.category === category);이렇게 필터링하고
const collectionCards = (() => {
const collectionProducts = filterProducts(products, "collection");
return collectionProducts.map(createProductCard).join("");
})();
collections.innerHTML = collectionCards;
const seasonalCards = (() => {
const seasonalProducts = filterProducts(products, "seasonal");
return seasonalProducts.map(createProductCard).join("");
})();
seasonal.innerHTML = seasonalCards;이렇게 넣으면 끝!
- 데이터 주입 전
- 데이터 주입 후
