TIL, 07.08-09

모달, 버튼을 포함한 웹페이지 리팩토링

리팩토링

간단한 코드리뷰를 한 뒤 부족한 부분을 채우기로 했다 코드리뷰를 하면서 제일 처음에 본 것은 아이콘!! 아이콘을 넣으려고 고 자리는 만들어놨는데 정작 아이콘 넣는 것을 까먹었다 라이브러리에서 필요한 아이콘을 assets 폴더에 넣어놓고 필요한 곳에 사용하도록 하였다 또한 이름을 더욱 명시적으로 바꾸었고 모달도 재사용성을 높이기 위해 text까지 props로 주는 것으로 바꾸었다 거슬리는 UI도 살짝 바꾸었다 코드리뷰까지 마치니 자주 쓰는 컴포넌트를 재사용하기 위해서는 데이터는 최대한 배제한 채로 UI만 가꾸고 안에 내용을 props로 넣어주는 식으로 만들어야 하는 것을 알게 되었다

 

 toLocaleString 

인풋으로 받은 숫자 데이터를 3자리 수마다 ', '를 넣게 해주고 싶은데 정규표현식을 이용하면 식이 길어서 불편했다 찾아보니 toLocaleString을 이용하면 쉽게 3자리 수마다 ', '를 넣어줄 수 있다 toLocaleString은 원래 사용하는 타입에 따라 지정된 지역에 표현방식으로 값을 변환하여 리턴한다 첫 번째 인수와 두 번째 인수를 넣어 함수의 동작을 정의하고 응용 프로그램에서 형식 규칙을 사용할 언어를 지정할 수 있다 로케일을 지정하지 않고 기본으로 사용하는 경우 기본 로케일과 옵션으로 포맷된 문자열이 반환된다

 

rfce 버릇

코드 리뷰하다가 알게 된 버릇 함수를 컴포넌트 만들 때 rfce를 쓰다 보니 function 키워드를 사용해서 컴포넌트들 만들게 되었다 일관성 있게 만드는 것이 좋은데 이러다 보니 화살표함수 방식이랑 function 키워드를 섞어서 사용하게 되는 것이다 버릇이 들일 때까지 한동안 rafce를 써서 만들었는지 화살표함수를 잘 쓰고 있는지 확인해야겠다

 

은버지 스터디

인피니티 스크롤 구현

이번 스터디 주제는 인피니티 스크롤이다 모든 기능이 처음인 나 인피니티 스크롤이라고 구현해 보았을 리가 인피니티 스크롤에 대해 알아보고 구현을 시작했다 인피니티 스크롤은 웹 애플리케이션에서 사용자가 스크롤을 내리면 자동적으로 콘텐츠를 동적으로 로드하는 기술이다 기존의 페이지네이션 방식과 달리 사용자가 스크롤을 계속 내릴 때마다 추가 콘텐츠를 로드하여 부드러운 스크롤 경험을 제공한다 구현방법을 구글링 해보니 여러 가지 구현방법이 있다는 것을 알게 되었다 그중 내가 선택한 것은 직접구현 방법이다 scroll이벤트를 감지하고 스크롤 위치를 확인하여 새로운 콘텐츠를 비동기적으로 로드하는 로직을 말한다 이번에 만들어볼 때는 이번에 배운 미들웨어랑 리덕스를 사용하여 Loading도 구현해 보았다 데이터를 받아올 때 즉 Loading이 true일 때는 react-loader-spinner 라이브러리에서 가져온 로딩화면을 보여주고 로딩이 끝나면 받아온 데이터를 보여주면 된다 어려워서 구글검색과 GPT를 많이 이용하였다 다행히 시간 안에 로직을 완성했다

 

코드리뷰

코드리뷰를 하니 직접구현 방법은 단점이 많다는 것을 알게 되었다 일단 성능면에서 스크롤 이벤트를 지속적으로 감지하므로 매 스크롤마다 로직이 실행되며 이로 인해 성능저하가 발생시킬 수 있고 복잡성 측에서 스크롤 이벤트 감지 데이터 로딩및 관리 추가 등으로 인해 코드의 복잡성이 높아질 수 있다 이러한 단점으로 인피니티 스크롤을 구현에 옵서버패턴을 사용하는 경우가 많다 그리고 이번에 알게 된 스켈레톤 UI!! 다른 사람들이 한 구현 중에 스켈레톤 UI 사용하신 분이 있으셨다 스켈레톤 UI는 로딩 상태에서 사용자에게 콘텐츠가 로드되고 있음을 시각적으로 표현하기 위한 UI 디자인 패턴이다 실제 콘텐츠의 외형과 유사한 형태의 UI를 사용하여 로딩 중에서도 사용자에게 시각적인 피드백을 제공한다 로딩시간이 긴 경우에도 사용자는 콘텐츠가 로드되고 있음을 인지할 수 있으므로 사용가 경험을 향상하면 스켈레톤 UI를 통해 시각적인 피드백을 제공함으로써 사용자의 대기시간을 줄일 수 있다 스켈레톤 UI는 실제 콘텐츠와 유사한 디자인을 가지므로 사용자는 인터페이스가 일관성을 유지한다는 느낌을 받고 콘텐츠가 로드되는 위치와 구조를 시각적으로 표현된다

 

리팩토링

이번에 리팩토링을 하면서 옵서버 패턴을으로 인피니티 스크롤을 구현했다 Intersection Observer API를 활용하여 옵서버 패턴을 구현하였다 Intersection Observer는 요소가 뷰포트와 교차되는지 여부를 비동기적으로 감지할 수 있는 API이다

화면에 맨 마지막에 빈 div를 만들어 id값을 주고 이 div를 관찰하여 div가 노출되면 콜백함수를 호출하고 콜백함수에는 데이터를 불러오는 함수를 넣어주었다 또한 옵션을 주어 뷰포트를 기준으로 관찰하고 관찰요소가  10% 이상 노출되면 콜백함수를 호출하도록 하였다

 

CS스터디

주제와 발표

이번 CS의 주제는 CORS와 아키텍처 패턴이다 그중 내가 맡은 주제는 CORS다 CORS는 간략하게 말하면 교차 출처 리소스 공유로 브라우저에서 교차 출처 요청을 안전하게 할 수 있도록 하는 메커니즘이다 웹 브라우저에서는 보안을 강화하기 위하여 동일한 출처에서만 리소스를 주고받도록 하고 있지만 다른 출처로부터 리소스를 받아오는 현재에는 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해 안전하게 다른 출처와 리소스를 공유하도록 하는 CORS가 필요한 것이다

CORS 작동 방식으로는 까다로운 조건을 걸고 해당 조건에 부합하면 안전한 요청이라고 인식하여 데이터를 응답하는 단순요청, 예비 요청을 먼저 보내 서버와 잘 통신되는지 확인하고 본 요청을 보내는 preflight(예비요청), 클라이언트에서 서버에게 자격 인증 정보를 실어 요청하는 신용 요청이 있다

이번 아키텍처 패턴 발표는 혜경 님이 해주셨다 아키텍처와 MVC에 대해 웹 프런트엔드 개발자 관점에서 알게 되었다

아키텍처는 결국 비슷한 것끼리 분류하여 특정 패턴이 만들어지고 이런 패턴들을 모두가 이해하고 따를 수 있도록 하는 구조를 아키텍처라고 부른다 그중 고전 MVC아키텍처로부터 점점 여러 아키텍처가 생겨났는데 현재는 리액트에서 단방향 아키텍처로 FLUX패턴을 사용하고 있다 다만 현재는 FLUX패턴을 사용하더라도 미래에 어떤 패턴을 사용할지는 알 수 없다 아키텍처는 결국 사람들이 비슷한 것을 묶어서 이름을 붙여 사용하는 것이기 때문에 다른 프레임워크를 사용하는 등에 이유로 바뀔 수 있기 때문이다

 

Figma

이번에 혜경 님이 아키텍처 패턴 발표하실 때 피그마를 이용해서 만들어 주셨는데 너무 좋았다 내용이 시각적으로 표현되어 복잡한 정보를 단순하고 이해하기 쉬운 형태로 변화하여 전달해 주었기 때문이다 또한 피그마로 디자인을 완성하면 inspect 창을 통해 실제 개발에 적용할 수 있는 코드를 확인할 수 있다 실제 넣어보면 브라우저에 똑같이 나타나지는 않는다고 한다 어느 정도 코드의 수정이 필요하다고... 부모와 자식 컴포넌트의 관계에서 문제가 많이 발생한다고 한다 하지만 여러모로 피그마가 매우 유용하다고 생각이 들어 시간이 생기면 피그마 사용법을 익혀놓아야겠다

 

라이프사이클(클래스형 vs 함수형), react hooks

라이프사이클은 리액트 컴포넌트의 생성, 업데이트, 제거 등의 단계에서 실행되는 메서드들의 집합이다 라이프사이클 메서드는 컴포넌트의 상태 변화에 따라 필요한 작업을 수행할 수 있도록 도와준다 리액트에는 클래스형 컴포넌트와 함수형 컴포넌트의 라이프사이클 메서드가 있으며 리액트 16.8 버전 이후부터는 리액트 훅스(React Hooks)도 도입되어 함수형 컴포넌트에서도 상태 관리와 라이프사이클 기능을 사용할 수 있게 되었다

클래스형 컴포넌트 라이프사이클로는 컴포넌트가 처음으로 렌더링된 후에 호출되는 메서드(componentDidMount), 컴포넌트의 업데이트가 발생한 후에 호출되는 메서드(componentDidUpdate), 컴포넌트가 제거되기 직전에 호출되는 메서드(componentWillUnmount) 등이 있으며 함수형 컴포넌트의 라이프사이클로는 컴포넌트가 마운트될때 업데이트될때 언마운트 될때 다양한 시점에서 작업을 수행하는 useEffect가 있다

React Hooks를 사용하는 함수형 컴포넌트는 클래스형 컴포넌트의 라이프사이클 메서드를 대체할 수 있으며 더 간단하고 유연한 상태 관리와 사이드 이펙트 처리를 가능하게 한다 또한 함수형 컴포넌트와 훅스의 조합은 코드의 가독성을 향상시키고 컴포넌트의 재사용성을 높일 수 있다

 

후기

코드리뷰하고 자기 전에 유튜브를 보니 어?! 이것이 인피니티 스크롤과 스켈레톤 UI잖아!! 하고 생각했다 확실히 스켈레톤 UI로 하니 로딩화면으로 스피너를 놓는 것보다 뭔가 체감상 더 빨리 로딩되는 것처럼 느껴졌다 내가 인피니티 스크롤을 구현했을 때와 달리 로딩시간도 짧고 CSS도 화면에 크기에 따라 자연스럽게 바뀌어 유튜브페이지의 위대함을 다시 한번 느꼈다 나도 저렇게 구현할 수 있는 개발자가 되어야겠다 너무 멋있어 진짜로.....