TIL, 07.01-02

TodoList 리팩토링

최적화에 대해 고민해보고 고쳐야 하는 부분을 개선해보기로 했다 먼저 GlobalStyle과 reset css를 분리하고 코드를 간소화 하기 위해서 CDN css를 추가하여 css를 초기화하였다. 그 다음으로 커스텀 훅을 만들어 반복되는 재활용하기로 했다. 파일을 하나 만들어 자주쓰는 훅을 넣어놓고 필요한곳에서 꺼내썼다. 그리고 필요없는 로직을 제거하거나 좀 더 나은 방향으로 바꾸었다. 다 정리한다음 혹시나 실행중에 잘못된 곳은 없는지 여러가지를 실험해보니 수정상태가 고정되는 것을 확인하여 고치고 사용자가 쓰기 편하게 UI를 좀더 개선하였다. 마지막으로 다른사람한테도 의견을 물어서 잘못된 행동을 했을때 alert창으로 알려주었다(공백만 받았을경우에는 업데이트를 하지 않고 alert으로 알림)

간단한 TodoList를 만들었지만 계속해서 발전시키니 너무 신나고 재밌었다 TodoList를 만들면서 단순하게 만든 기능도 계속해서 발전시키면 끝이 없구나를 느꼈다. 간단하게 입력값 받으려는 것도 밸리데이션으로 조건을 주고 e로 현재 바뀌는 value를 확인하고 UI 꾸며주는 등의 여러가지가 필요하다 나도 계속해서 발전해나가 내가 만든 서비스를 이용하는 사용자가 좀더 사용하기 쉽고 편한 경험을 할 수 있도록 해야겠다

 

은버지스터디

이번 스터디 주제는 검색!! 카카오 API를 이용하여 구현했다. 저번에 페이지네이션을 구현했을때 UI를 클론코딩했었는데 이번에도 똑같은 방식으로 진행되었다. UI는 클론코딩을 하고 그 안에 기능을 내가 구현하는 것이다. 저번에는 처음 해보는 것이라 UI를 비슷하게 만들지 못해 아쉬웠었는데 이번에 했을때는 경험이 있으니 좀더 빠르고 저번보다 더 비슷하게 만들 수 있었다. 검색은 카카오 검색 API를 사용하였다 그리고 드롭다운으로 검색해야할 종류를 선택할 수 있도록 했다 다만 책 검색만 url이 살짝 달라 조건문을 주어 book만 다른 url로 데이터를 받아왔다 비동기로 받는것은 애먹었지만 저번에 한번 해봐서 그런지 저번보다 심하게 헤매진 않았다. 계속해서 개선해야겠지만 처음에 목표한 목표치만큼 구현을 제한시간내에 해내서 다행이었다 코드리뷰시간에 다른사람들의 코드를 보니 구조가 깔끔하게 정리되어있어 다음부터는 나도 폴더구조를 보기 편하게 나눠야겠다는 생각이 들었다

 

CS스터디

이번에는 총 4가지 주제로 CS스터디를 진행하였다 forEach와 map의 차이점, await와 async, REST API, HTTP 요청 메소드 POST와 GET의 차이이다 그 중 내가 맡은 파트는 REST API였다 내가 맡은 파트를 공부하면서 REST가 무엇인지 그리고 REST API의 규칙에 대해서 알게되었다. 그리고 난 아직 비동기가 어렵고 개념이 머리속에서 자리잡지 못했는데 이번에 도영님께서 await과 async를 발표해주시면서 머리속에서 좀더 개념이 구체화 되었다 이번에 항해 일정에 마쳐 CS스터디가 약간 개선되었는데 발표를 하고 QnA를 하는것은 동일하나 발표시간이 길어져 지체되는것을 개선하기 위해 시간을 정해 그 안에 공용 블로그에 업데이트를 하고 각자의 주제를 읽어오기로 했다. 오늘 그렇게 해보니 발표를 듣기전에 내용을 알고 들어가서 더 이해도 잘가고 모르는 부분을 알고 들어가서 질문하기도 편했다. 괜찮은 방법이라 유지할 예정이다 

 

후기

이번에도 토일 묶어서 하게 되었다 스터디랑 주말이 딱 맞아 떨어져서 앞으로는 주말을 묶어서 하는것이 정리하기 편하다고 생각했기 때문이다 항해 일정이 월-토여서 오늘 좀 헤이헤졌는데 다시 마음을 다잡고 내일부터 공부를 다시 열심히 해야겠다 그리고 이번 스터디 시간에 react 생성을 할때 vite로 하는데 저번에도 잘되서 이번에도 똑같이 만들었는데 오류가 났다 정확히 말하자면 오류는 아니고 그냥 문제가 생겼다 처음에는 CSS가 안먹어서 잉?! 내가 import를 안했나 오타가 났나 확인을 했는데도 이유를 몰랐다 그래서 그 다음에는 여러가지를 확인해봤는데 알고보니 리렌더링이 안되는 것이다 내가 yarn dev를 해서 서버를 구동하면 코드를 변경할때마다 실시간 반영이 되야하는데 처음 서버를 구동할때만 반영이 되고 그 후 코드를 변경할때는 구동이 안되서 내가 CSS 변경이 안되는 것처럼 보이는 것이었다 오류가 있었다면 차라리 콘솔로 확인하고 개선해보았을텐데 이유없이 반영이 안되는 이유를 알 수도 없었다 구글에도 검색해보고 사람들에게도 물어보고 프로젝트를 새로 만들어보기도 했는데 이유를 알수가 없어서 결국 create react-app으로 만들어서 검색기능을 구현했다