Dony :)

FE로 성장 중 🌱

TIL 🧐

  • 컴포넌트 단위로 나누어 렌더링 해보기
  • json 파일 fetch해보기
    • JSON은 사람과 기계가 모두 읽기 편하도록 고안된 텍스트 기반의 데이터
    • XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었다.
    • 또한, 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다.
    • 자바스크립트 객체 표기법을 따른다.
    • 프로그래밍 언어와 운영체제에 독립적이다.
    • 문자열을 전송받은 후에 해당 문자열을 바로 파싱하므로, 빠른 처리 속도를 보여준다.
      따라서 HTML과 자바스크립트가 연동되어 빠른 응답이 필요한 웹 환경에서 많이 사용되고 있다.
    • 데이터의 값으로는 자바스크립트 타입 중 undefined, symbol을 제외하고 모두 사용할 수 있다.
  • 슬라이드 구현해보기

잘했어요 🙂

사실 고전적인 방법인 페이지별로 html을 각각 만드는 방식으로 일을 했던 터라..
single page로 렌더링 하는게.. 상상이 잘안갔다.
특히나, 데이터를 다뤄본적이 없어서.. 이미지 url이나 텍스트들을
데이터에 저장해서 사용하는 것도 어떻게 해야하는 건지 막막했다.
그래서 월요일은 어떻게 해야하나 구상과 검색들만 이것저것 해보았다.
하지만 거의 다 리액트를 활용한 렌더링 방식들이 많아서 글을 읽어도 componet, props, state 등 모르는 단어들이 많았다..
그 상태가 화요일까지 이어졌다. 컴포넌트를 어떤 단위로 나눠야하고, 데이터를 어떻게 저장해야 좋은지 고민이 너무 많았고
특히 파일들을 어떤 단위로 나눠야하는지도 너무 고민했었다.
그러다 컴포넌트를 이용해 페이지를 조립하듯이 써놓은 글을 보게 되었다.
그 분의 글은 리액트라 그런건지 정말 작은 단위(버튼, input창 하나 등)로 컴포넌트를 나눠놓으셨다.
이렇게 하면 재사용성이 극대화 될 것이다.
그러나 나는 그렇게 나눈다면 내가 아직 관리가 어려울 것 같아 그냥 내가 생각하는 기준으로 나눠보자,
하다보면 나누는 단위에 대한 기준이 생기겠지 하고 화요일 밤이 되서야 코딩을 시작했다.
고민한 시간에 비하면 구현은 비교적 빨리 된 것 같다..ㅎ
그러다 렌더링하는 파일과 데이터의 파일의 결합이 강한 것 같다는 느낌이 들어
인터페이스 역할을 해줄 controller와 이벤트를 관리해줄 eventListener를 따로 만들어주었다.
그러다 view에서는 렌더할 템플릿만 관리하고 DOM 관리는 controller에서 해주는게 어떨까라는 생각이 들어
DOM 관리를 controller와 eventListener가 하도록 역할을 나누어 주었다. controller가 data.js에서 데이터를 받아 view.js의 렌더 함수에 넘겨주고,
eventListener는 입력 값에 맞는 렌더 함수를 실행시킨다. (controller의 역할을 분배)
사실 하다보니 세워두었던 역할 분배대로 딱딱 되진 않았지만
그래도 고민을 너무 오래했어서 그런지 구현되고 나니 나름 뿌듯했다.
그러고 크롱의 PR에 역할을 나누려는 시도가 너무 좋았다 라는 코멘트를 받게 되어 간만에 흐뭇했다..🙂
밤샌 보람이 있었던..ㅎㅎ..

아쉬워요 🙁

두번 째 PR을 위해 슬라이드를 구현해야 했다.
슬라이드를 구현하려고 맘 먹었는데 앞에 코드들이 이상한 부분들이 너무 많이 보이기 시작했다..
결국 밤까지 리팩토링..ㅎ 밤이 되서야 슬라이드를 구현하기 시작했다.
(이 때부터 또 밤새겠구나 감이 왔다..ㅎ)
nams 님이 리팩토링도 시간과 비용이 드는 작업인데 그 정도로 가치가 있는지 생각해보고 하면 된다라고 다른 분께 남긴 리뷰가 떠올랐다.
리팩토링도 중요하지만.. 구현의 시간이 정해져있으니 구현부터 했어야했나 싶기도 하고..
하지만 회사에서처럼 중요하게 마감이 정해진게 아니고, 공부하는 입장이니까 잘했는건가.. 싶기도 했다.

슬라이드는 페이지 구현할 때부터 젤 먼저 해보고 싶었다.. (난 찐 프론트엔드인가보다..ㅋㅋ)
하지만, 생각보다 어려웠다.. 무한 슬라이드.. 이기 때문에 index 관리가 너무 어려웠다.
그러다보니 함수들에 if문들이 많아지고.. 여러 함수에서 index 업데이트 시켜야 되다보니 전역변수를 쓰지 않을 수 없었다.
버그가 있긴 하지만 얼추 구현은 했는데.. 코드가 너무 맘에 들지 않았다.
리팩토링하기엔 밤을 새서 비몽사몽하여 결국 그냥 제출을 했다.
PR 메세지에 똥을 싸놨다는 글과 함께..💩
주말에 다시 리팩토링 해봐야겠다.

사실 제일 반성인 점은.. PR하는 전 날에 자꾸 밤을 샌다는 것이다..
사실 2~3시 쯤에 자고 10시 반부터 집중 빡해서 조금 늦더라도 제출하면 될텐데..
밤새다보니 아침이 되면 헤롱거리다 코딩을 못하게 되어 전체적인 코딩 시간은 같지 않나 싶다..ㅎ
이 놈의 야행성.. 또 한번 결심해본다.. 일찍 자자!!! 😡

참고