(WIL) 이노베이션캠프 3주차

 

Fact : 

• TODOLIST 만들기 (LV.1. 추가, 삭제, 완료)
• 다양한 HOOKS 배우기 (useState, useEffect, useRef..)
• STYLE COMPONENTS 배우기
• 아마존 AWS 결제에 충격받기..
• Virtual DOM
• props

 

Feeling & Finding: 

• TODOLIST 만들기 (LV.1. 추가, 삭제, 완료) 
  : 강의로 배운 useState Hook을 이용해서 간단한 투두리스트를 구현했다.
  처음 바닐라JS를 배울 때도 투두리스트를 만들었었는데, 그 때가 생각나서 신기하고 재밌었다.
  분명히 똑같은 기능(버튼을 누르면 투두가 추가된다.. 삭제도 된다!) 인데 만드는 방식이 천차만별이었다.
  어떤 사람은 바닐라가 훨씬 쉬웠다고 하던데, 나는 리액트로 만드는 게 훨씬 간편하고 좋다고 느꼈다.
  바닐라JS로 만들었던 디지털 시계나, 문자와 사진이 랜덤하게 출력되는 페이지도 만들어보면 재밌을 것 같다! 
   
• 이제 좀 useState에 적응한 것 같으니까 곧바로 내게로 찾아오는 useEffect, useRef. 그리고 Redux! 
  당연히 훅 하나로 모든걸 할 순 없겠지만 좀 슬퍼졌다. 
  내장함수라고 해야할까? 배우는게 어렵긴 하지만 익숙해지면 HOOK들이 편리하긴 할 것 같다. 
  리액트의 꽃.. 이라고 해도 좋을 것 같고. 처음에는 잘 와닿지 않았던 이론인 불변성이 함수 하나 하나 쓸 때 마다 발목을 잡는걸 보고 이래서 강의와 책들이 불변성에 대해서 잘 공부하라고 그렇게나 말했던건가 싶었다. 그래서 불변성에 대한 생각을 요즘 맨날맨날 하고있다. 불변성 마스터가 JS를 잘하는 길! 
  
  
• CSS 파일에 좀 익숙해지려니까 JSX에서 CSS를 적용하는 법, 거기에 좀 익숙해지려니까 또 새로운 게 나온다.
  스타일드 컴포넌트. 솔직히 아직까지는 그냥 CSS를 30줄 쓰는게 더 마음도 몸도 편한 것 같지만, 이점이 어디에서 오는지는 잘 알겠다. 코딩을 배우면서 매번 느끼는건데 코드는 반복해서 말하고 읽는 걸 싫어한다. 그리고 별걸 다 줄인다. 그래야지만 비용과 시간 절약이 되면서 적은 코스트를 쓸 수 있기 때문이겠지? 회사에 도움이 되는 (잘 쓰일 수 있는) 개발자가 되려면 스타일드 컴포넌트도 꼭 익숙해져야만 한다. 
  
  
• 위에서 말했던 내용에서 이어지는데, 이번에 새로 가상 돔(Virtual DOM)이라는 개념에 대해서 배웠다.
  리액트에서 특히나 신경써야 하는 내용은 리랜더링 관리라고 생각하는데, 역시나 불변성과 연관된 내용이기도 하고 
  어떨때, 어느 부분은 다시 랜더링이 되어야하고 어떤 부분은 그대로 있어야 하는지. 또 그런 조절은 어떤 방식으로 해야하는지. 최종적으로 왜 그래야만 하는지에 대해서 잘 이해하고 있어야 한다. 
• 리액트에는 props라는 개념이 있는데, 내가 느끼기에는 매개변수와 유사한 것 같다.
  컴포넌트와 컴포넌트 사이를 연결하고 정보를 전달해주는 일을 하는데, 내가 어떤 페이지를 만들고싶던간에 최소한 이 props 사용을 피할 수는 없다. 그런 의미에서 이때 어떤 프롭스를 왜, 어느때에, 어떤 이름으로 쓰는지가 상당히 중요할 것 같은데 아직 나는 많이 부족하다. 조금 관성적으로 쓰고 있다고 해야하나. 이 부분도 개선이 필요!
• 7/2(일) 간만에 휴식시간에 뒹굴거리다가 받은 충격적인 알림. AWS에서 빠져나간 88,388원...
  한달 전에 배포에 대해서 배우면서 어떻게든? 얼레벌레? 해놓고 방치해놨던 결과가 카드에 구멍을 내는 방식으로 돌아왔다. 듣기로 최초 한번은 무지로 비롯한 실수는 감액해준다던데.. 1시간 넘게 아마존 지원 챗에 하소연을 하면서 어떻게든 해결하려고 노력하고 있다. (고마워요 켈런씨!) 일단 24시간 뒤에 내가 배포해놨던 사이트들이 무사히 중단되었는지 다시 확인해보자고 해서 기다리고 있다. 

 

Future : 

 

• 가상 돔이니, 리랜더링이니.. 하는 것들. 사용자 입장에서야 그냥 페이지가 깜빡 하더니 바뀌고, 사라지고, 다시 나타나거나 그대로일 뿐이지만 나는 이제 개발자 입장에서 봐야하기 때문이다. 아직까지는 두루뭉술한 개념들에 대해서 좀 더 정확히 이해하고, 추후 새로운 게시글로 설명해보겠다.
• props 사용법을 좀 더 숙지하고, 이미 작성해놨던 코드 (LV1)에서 프롭스를 어떻게 쓰고있는지, 어떤 부분이 부족한지 자세히 리뷰해보는 시간을 가져야겠다.