🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

useReducer

사실 그동안 useReducer에 대해서 굳이..?라는 생각을 자주 했었다. 내가 다루는 프로젝트 수준에서의 상태가 그렇게 복잡하지도 않았고, 애초에 그렇게 복잡하게 관리되는 상태라면 여러개의 state로 분리하는 게 개인적으로는 개발자 경험에도 좋다고 생각했기 때문이다. 또 그러다가 상태를 핸들링하는 함수가 다소 복잡하거나 지저분하면 그 부분만 커스텀 훅으로 분리하기만 해도 충분하다고 생각했기 때문이다. 그러다 오늘 강의를 듣고 테스트 코드를 작성하면서 useReducer의 필요성을 느꼈다. 앞에서 말했던 것처럼 사실 잘 분리하고 조작만 한다면 useState로도 충분히 깔끔한 코드를 짤 수 있다고 생각한다. 다만, state를 다루는 로직을 reducer라는 순수함수로 분리함으로써 개발자 경험뿐 아니라 state의 응집도를 높일 수 있었고 무엇보다 테스트 코드를 작성하기 수월해졌다. 앞으로도 가능하면 useReducer를 사용하도록 (억지로라도) 해보려 한다!!!

Ajax

오늘 CS - 네트워크 스터디를 준비하면서 Ajax가 무엇인지 설명해주세요.라는 질문이 있었다. 정말 단순하게 Ajax는 비동기적으로 서버와 통신하는 무언가 새로 등장한 기술이라고 생각했다. 그렇지만 좀더 찾아보고 공부해서 준비한 내 대답은 아래와 같았다.

Ajax란 비동기적인 자바스크립트와 XML이라는 의미로 새로운 언어나 개념이라기보단 비동기적으로 데이터만 받아와서 화면을 업데이트할 수 있는 개발 기법입니다.
일반적으로 웹 페이지의 뼈대를 그리는 html, 스타일을 담당하는 css, 그리고 동작을 담당하는 JavaScript를 기본으로 JS에서 특정 data만 요청하는 로직을 함께 쓰는 경우가 대부분입니다.
Ajax 기법이 등장하기 이전에는 각 페이지마다 서버에서 완성된 html을 만들어서 보내줘야했습니다. 유저의 정보나 페이지 번호 등에 따라 페이지의 일부가 변하는 상황에서도 그대로 유지되는
html까지 다시 전부 그려야했습니다. Ajax를 통해 처음 페이지 요청에서만 html, css, js 를 받고 유저의 인터렉션에 따라 data를 요청하여 화면의 일부분만 변경함으로써 기존과는 완전히 다른
사용자 경험을 제공할 수 있게 되었습니다.

비슷할 수도 있지만 내가 느꼈던 어떤 본질적인 느낌이랑은 다른 것 같다. 솔직히 ajax하면 당장 떠오르는 게 xmlHttpRequest 혹은 fetch api이었는데 이런 여러가지를 조합해서 개발하는 기법이라는 게 신기했다.(지금은 이 세트가 너무 당연한데…)

아 그리고 Asynchronous JavaScript and XML에서 xml은 정말 단순하게 말하자면 html 같은 녀석인데, 화면의 골격을 잡으려는 목적이 강한 html과는 다르게 데이터를 표한하기 위한 목적이 강한 마크업 언어이다.(더 단순하게 말하면 지금 우리가 데이터를 전달할 때 사용하는 형태인 JSON의 마크업 버전이라고 생각하면 된다.) 그 당시에는 xml을 사용하는 것이 일반적이었어서 ajax가 되었다.

📝 회고

시간이 빠르더라도 그 속에서 그 흐름을 잘 인지하면서 살도록 하자! 그래야 더 알차고 의미있는 삶을 살 수 있다.

참고

• 위키백과: Ajax
• TCP 스쿨: Ajax 개요