안녕하세요, Vanilla JS 챌린지를 이제 막 졸업했습니다.

Todo list 졸업 작품을 만들다 보니 재밌어서

매일 기능 추가와 UI 개선을 하고 있습니다.

졸업작품 제출 이후로, 다음과 같은 작업들을 완료했습니다.

<Design>

1.화면에 구획별로 나뉘어져있는 위젯들에 Fade-in 애니메이션 일괄 적용

2. 위젯 + input + 버튼 모서리깎기
   마음에 드는 걸 찾기가 굉장히 어려웠는데, Dribble에서 많은 도움을 얻었습니다.

3. 컬러 팔렛트 수정
   메인 컬러는 정했는데 배색 조합을 찾기 어려워서, Coolers에서 많은 도움을 얻었습니다.

4. 날씨, 격언, Todo list, 텍스트 배치 수정

5. 음악 플레이어 디자인 수정
   accent color을 컬러 팔레트 색깔로 변경
   volume icon 추가

<Feature>

1. 인사 문구를 클릭하여 사용자 이름 수정 .
   프로필 이름도 함께 바뀝니다.
   

2. location access 허용이 되지 않으면
   날씨 위젯이 활성화 되지 않음.
   허용이 된다면 Fade-in
   

3. 음악 플레이어 Youtube 연동 코드 수정 + 자동 재생 비활성화
   

   
   3.1 공식 문서 가이드에 맞게 index.html에 iframe을 넣지 않고
   JS가 컨트롤할 수 있게 수정했습니다.
   
   3.2 자동 재생 비활성화

디자인과 기능들이 추가되다보니까

코드 관리하기와 리팩터링이 너무 힘들더라구요 !

간단해보이는 기능을 추가하는데도

html을 켜서 element를 읽어온 다음

element에 영향을 받는 element들을

함수 하나에 나열해야했습니다.

위젯별로 나누어서 코드 파일을 만들긴했지만

위젯의 상태를 더 효율적으로 관리할 수 있었으면 좋겠다는 생각이 들었습니다.

Vanilla JS 기술 내에서 이를 구현하려고 처음 생각한 것은

1. Widget Class를 만들고

2. 이 Widget Class를 상속받는 날씨, 격언 Class들을 만든 뒤

3. 필요로 하는 속성과

4. 데이터 조작에 관한 메서드, Painting에 관한 메서드를 추가한다.

였는데, 지금 이런 고민을 하는 순간이 Framework를 사용해야 할 때라는 직감이 들었습니다.

저는 프레임워크를 갈망하고있었습니다 !

설계를 도와줄 강력한 지침.

당장 제가 필요로 하는 것은

• 일관된 UI

• 바뀐 부분만 Re-paint

• 용이한 상태 관리 및 추적

이었는데

React JS가 니즈를 충족시키고 있었고

React JS과 같은 자료가 풍부한 생태계라면

당장 배우지 않을 이유가 없겠다 싶었습니다.

다른 프레임워크로는 Angular와 Vue도 있으며

설계의 차이가 있지만 일단은!

Nomad coder의 철학에 따라 직접 코딩하며 리액트를 먼저 배우려고합니다.

여러분들은 졸업 작품을 하면서 어떤 감상을 하셨는지 궁금합니다

저는 이만 말을 줄이며

ReactJS 클래스로 가보겠습니다 !