[TIL] 20210826

🎯 그동안 공부한 것

• [JavaScript] 실행 컨텍스트
• [JavaScript] 컴포넌트 방식으로 localStorage를 이용한 todoapp 구현 복습
• [JavaScript] Client Side에서 데이터 저장하기, ES6 Module, 비동기 복습
• [코드 리뷰] 함수형 프로그래밍 reduce 함수로 구현할 수 있는 방법 생각해보기
• [특강] 인디스트릿 기술 스택에 대해서: Jamstack(Javascript, APIs, Markup), Next.js, Vercel, Strapi, GraphQL + APOLLO
• [특강] 렌더링의 역사: Server Template -> Client Side Rendering -> Server Side Rendering -> Static Site Generator -> Incremental Site Regeneration
• [멘토링] 디자인 시스템, 현업에서 UI 구현하는 방식

 

---

📚 더 공부해야 할 것

• 실행 컨텍스트 ES6 버전
• 웹 접근성
• localstorage 값에 숫자를 임의로 넣었을 때 에러 처리가 안되는 경우 해결
• 데이터를 외부에서 불러오는 todoapp 직접 구현: XMLHttpRequest 방식 -> Promise 방식 -> async, await 방식
• Strapi, GraphQL 공부해보기

 

---

🎇 Reflection

• 한 주 동안 한 게 정말 많았는데 TIL 쓰는 시간에 공부나 한 자 더 하자는 마음으로 TIL을 못썼다.
• 저번 주에 너무 여유 부리면서 빡세게 진도를 안 나간데다 이번 주도 너무 설렁설렁 공부해서 지금 엄청 밀려있는 상태다... 노션 클로닝 프로젝트 들어갔는데 나는 아직도 todoapp 과제는 커녕 수업 복습하구 있음...
• 컴포넌트 방식으로 todoapp 구현하는 수업 복습하는데 저번에 들었을 때는 그냥 따라치기만 해서 사실 이해가 안됐다. 강의를 한번 다시 듣고 나서 직접 구현했는데 역시 한번에 돌아가진 않았다. 그래도 구현을 직접 해보고 에러에 부딪혀보니까 컴포넌트를 어떻게 설계해야하는지 이해가 됐다. 컴포넌트를 만들 때는, DOM 요소부터 만들고, target에 생성한 DOM 요소를 append 시켜주고, this.render에 마크업 구현하고 이벤트 있으면 걸어주고(이때 한번만 실행되면 되는 것들은 방어코드로 감싸줘야 한다), 상태값은 this.state에 정의해주고, 상태값 변경이 필요하면 this.setState에 nextState를 인자로 넣어서 호출하면 상태값 변경하고 다시 렌더될 수 있게끔 코드를 설계해야한다. 또, 다른 컴포넌트 값을 제어하는 이벤트를 걸어줘야 하는 경우에는 컴포넌트 간의 의존성을 줄이기 위해 parameter에 이벤트 콜백함수를 전달할 수 있게끔 해줘야 한다.
• localStorage를 통해 데이터를 저장하고 불러오는 코드를 구현할 때는 storage 파일을 따로 만들어 한 파일에 getItem, setItem api를 구현했는데 module export하고 쓸 때도 import만 해오면 되니까 되게 깔끔하고 좋아보였다. 그리고 신기했던 게 있다. 내가 만약 storage 파일에 어떤 변수를 지정했는데 이건 export 하지 않았다. 내가 export한 getItem 함수에서 이 변수를 사용하는데, 내가 다른 파일에서 getItem 함수만 import 해왔는데도 문제없이 storage 파일에 있는 export 하지 않은 변수를 사용할 수 있더라. 원리는 모르겠지만 신기했다.
• localStorage를 사용하기 위해 getItem, setItem을 구현할 때는 값이 없거나 json parse 불가능한 값이 있을 때를 대비해서 try catch문으로 에러 처리를 해줘야 한다. 임의로 string 값을 넣을 때는 잘 잡혔는데 테스트로 number 값을 넣으니까 map을 돌리는 부분에서 에러가 났다. json 방식이 아닌 string은 json parse를 하면 에러가 나서 catch로 잡을 수가 있는데 string화된 number(ex. "123")는 json parse를 해도 에러가 안 난다... 더 웃긴 건 원래 string인데 json parse를 하면 number가 된다!! 몰랐던 사실인데 에러 처리 해주려고 이렇게 저렇게 해봤는데 잘 안됐다. 우선 다음 진도를 나가고 나서 본격적으로 과제 구현할 때 수정해봐야겠다.
• fetch나 axios나 너무 얼레벌레 써왔어서 비동기 통신 부분을 기초부터 탄탄히 잡고 싶다. 그래서 시간이 좀 들더라도 직접 구현하는 연습을 해보면서 복습하는 게 좋을듯
• 솔직히 함수형 프로그래밍을 잘 이해 못했는데 코드 리뷰를 해주려니까 정말 막막했다. 근데 다른 사람들 코드 리뷰한 걸 본 게 되게 도움이 많이 됐다. 다른 코드 리뷰들을 보면서 함수형 프로그래밍에서는 reduce 함수를 잘 사용하는 것, reduce 함수적으로 구현하는 게 중요하다는 걸 배웠다. 그리고 공유 상태 지양이라는 목적을 달성하기 위해 제너레이터, 이터레이터를 사용할 수도 있다는 것을 배웠다. 함수형 프로그래밍으로 명령형만큼 효율적인 코드를 작성하려면 아직 갈 길이 먼 것 같지만 그래도 코드 리뷰를 보고 시도하면서 많이 배웠다. (시간이 엄청 많이 들었지만...)
• 인디스트릿 기술 스택에 대한 특강을 들으면서 요즘 트렌드 기술들에 대해 귀동냥할 수 있어서 정말 유익하고 재밌었다. SSG 혹은 ISR된 파일은 Vercel을 이용하면 무료로 배포하고 CDN 처리까지 할 수 있다는데 다음에 프로젝트 할 때 써보고 싶다. 어드민 페이지를 통해 모델을 생성하고 REST 기반 api를 만들 수 있는 strapi도 엄청 유용해보였다. GraphQL은 데이터를 요청하는 동작을 정의하는 방식의 REST와 달리 필요한 데이터를 선언하는 방식의 API 개발 방법론인 것 같다. 근데 GraphQL로 Redux를 대체하는 상태관리를 할 수 있다 그래서 띠용이 됐다. GraphQL이란 무엇일까... 궁금하다. 그리고 다른 멘토님이 웹 접근성에 대한 중요성을 강조하셔서 다시금 웹 접근성을 공부해야겠다는 의지가 되살아났다. lighthouse를 통해 사이트 성능을 측정할 수 있다는 것도 알려주셨다. 웹 접근성도 지수가 나와서 신기했다.
• 이번 멘토링은 선택사항인데 멘토님이 엄청 엄청 바쁜 와중에도 시간을 내주셔서 멘토링해주셔서 정말 감사했다 ㅠㅠ 내가 수요일에 시간이 안된다고 하니까 목요일로 시간까지 바꿔주셨다 ㅠㅠ 멘토님이 만들고 있는 서비스의 디자인 시스템을 직접 보여주시면서 현업에서 디자인 시스템을 어떻게 이용하고 있는지, 디자인 시스템은 어떻게 설계되어 있는지 알려주셨는데 진짜 유익하고 재밌었다. 웹 접근성을 현업에서 어떻게 구현하는지에 대한 궁금증도 풀었다.
• 오늘 아침에 백신 맞으러 가서 주말 내내 골골댈까봐 어제까지 과제를 다 구현하고 싶었는데 실패했다. 별 수 없지, 뭐. 아프면... 타이레놀 먹어 가면서 오늘도 열심히 공부해봐야겠다 ^^(ㅠㅠ)