리액트를 배우다보니 '굳이 왜 이렇게 어려운 문법을 배워가면서 사용해야할까?'란 생각이 들었다. 이런 생각은 내가 리액트를 제대로 이해하지 못했거나, 필요성을 느끼지 못해서라고 생각했다. 많은 기업에서 리액트라는 기술 스택을 요구하고 있고, 실제로 잘 사용하고 있는듯하다. 그러면 Vanilla JS로 리액트스럽게 만들면 필요성을 느끼지 않을까? 정확히는 SPA를 만들어봐야겠단 생각이 들었다.

이런 과정에서 웹팩, 프론트엔드 개발환경, 바벨, CSR, SPA, 상태(State), 컴포넌트, 선언형 프로그래밍 등에 대한 생각들을 깊게하게 되고 많은 것들이 추상화되어 있다는 것을 알게되었다. 내가 너무 편하게 개발을 하고 있었던 것을 오히려 어렵게 생각했던 것이었다. 간단한 함수 사용법만 익히면 구현이 가능하던 것들을 Vanilla JS에선 직접 구현해야하다보니 비교도 해보면서 구현하는 재미까지 있었다.

아직까지 구체적으로 떠오르진 않지만 조금씩 퍼즐이 맞춰지는 느낌이다. '이건 이 기능이네, 이건 완전히 감춰져 있었구나.'라는 생각을 하며 리액트를 그리워하고 있다. 이 프로젝트도 개인적으로 욕심이 나서 내가 원하는 기능을 다 구현할 때까지 해보고싶다. 그 다음 리액트를 배우면 더욱 성장을 할 수 있지 않을까.

기술 스택 🛠

Front-end
- Vanilla JS(ES6)
- HTML5, CSS3
- Axios
Back-end
- Node.js
- Express.js
- Cheerio
- Axios

중요 구현 사항들 🧐

✅ 컴포넌트 기반 설계
- 상태(State)를 기반으로 렌더링
✅ 전역 상태관리를 위한 Store
- Vuex 또는 Redux 등과 같은 라이브러리를 왜 사용할까?
  - 관심사 분리?
- 직접 만들어보고 사용해보기
✅ 페이지간에 이동이 발생할 때 새로고침이 발생하지 않도록 하기
- 상세 페이지 진입
- (미완성) 서브페이지 진입
✅ 상세 페이지는 원본 URL을 크롤링하여 렌더링
- 3개의 크롤링 라이브러리 비교 후 예제와 문법이 익숙한 cheerio로 구현
✅ Image lazy loading 구현하기
- 웹 성능을 위해 상세 페이지의 이미지를 lazy loading하기
- Intersection Observer API를 사용하여 구현했다.
✅ 제공된 JSON을 토대로 API End-point 만들기
- 처음 서버쪽을 구현해보았다. 동작은 하지만 좋은 코드인지, 좋은 설계인지는 모르겠다 그래도 처음보다 리팩토링을 해서 보기에 나쁘진 않다.
🔼 Router 만들기
- 내가한 게 맞는지 잘 모르겠다.
  - history API의 pushState 메서드를 사용해서 뒤로가기, 앞으로가기를 구현했다.
🔼 웹팩으로 개발환경 구축하기
- 거의 3일 내내 웹팩을 학습하는데에 몰입했다. 강력한 툴임은 확실하지만 아직 익숙하지 않다. 개발환경 구축과 번들링 등 여러가지를 시도 중이다.
💡 공통 사항
- 좋은 코드인지 항상 고민하고 유지보수 하자.

프로젝트 실행 방법

프로젝트 Fork 하기

오른쪽 상단 Fork 버튼

가져온 프로젝트 Clone 하기( Clone or download 버튼 )

git clone 복사한 url

의존성 모듈 설치하기

npm install

로컬 서버 켠 후 살펴보기

npm start

10월 21일(목) 업데이트

컴포넌트, 상태, API 통신별로 모듈화
콘텐츠 통신 API 리팩토링
스타일 추가

10월 25일(월) 업데이트

기사 클릭 시 상세 페이지 진입
상세 페이지 원본 URL 크롤링
상세 페이지 엔드 포인트 추가
axios, cheerio 추가

10월 26일(화) 업데이트

상세 페이지 이미지 레이지 로딩 구현
상세 페이지 스타일 추가

10월 31(일) 업데이트

상세 페이지 진입 시 history push, 뒤로 가기 클릭 시 홈화면 렌더

11월 1일(월) 업데이트

클라이언트 사이드도 Fetch API에서 Axios로 변경

11월 2일(화) 업데이트

Store의 상태(State) 리팩토링
서버, 라우터 리팩토링

11월 15(월) 업데이트

개발 환경 구축(웹팩)