[TIL] 불편함을 못느꼈다면 그건 너무 잘 만든 것

📝알고리즘 문제 풀이

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

동적 계획법(DP) 연습하기 좋은 문제. 개념만 이해하면 코드는 쉽게 쓸 수 있는 문제라서 연습하기 딱 좋다.

 

원티드 클론 코딩

디자인 시스템

좌 : colors / 우 : text-weight

text 관련 css

적용한 theme 실사용

프로젝트에 theme을 적용해보기 시작하면서 theme을 어떻게 구성하는지 궁금했다.

원티드 페이지에서는 이렇게 엄청나게 많은 css 세팅이 존재한다.

 

컬러 포인트가 파란색이라고 그 외에는 그렇게 많지 않을 거라고 생각했었는데,

같은 계열의 색이라도 font-weight에 따라서 색이 모두 다르게 설정하고,

font-weight도 어디에 사용할 지에 따라서 하나하나 설정해줬다.

 

협업할 때, 마진이나 글 간격같은 부분도 통일성이 필요하다는 생각이 들었는데,

이 부분도 미리 디자인 시스템을 만들어둬서 통일성을 갖추기 좋았을 것 같다는 생각이 든다.

 

디자인 시스템의 좋은 오픈소스 예시를 보고 싶다면 velog-client를 찾아보는 걸 추천한다.

벨로그는 디자인 시스템뿐만 아니라 여러가지로 좋은 코드가 많아서 너무 좋은 교보재이다.

GitHub - velopert/velog-client

 

로그인 이전 페이지로 돌아가기

우리가 사용하는 모든 사이트에서 적용하는 기능이기 때문에 당연하게만 느껴져서 미처 생각하지 못했을 수 있는데, 당연한 만큼 이게 없다면 UX가 굉장히 불편해질 수 밖에 없다.

 

원티드에서는 로그인 페이지의 query string으로 이전 사이트 주소 값을 가지고 있다.

url 디코더를 사용하면 아스키코드를 디코딩해서 이전 페이지의 url이 맞는지 확인해 볼 수 있다.

 

이전 페이지의 스크롤 되돌리기

이것도 당연하게 적용되는 기능이라서 없다면 UX적으로 굉장히 불편해진다.

 

만약에 게시판 리스트가 infinite scroll로 보여주는 형태라고 생각한다면,

뒤로가기를 눌렀을 때 다시 맨위 리스트에서 시작한다.

내가 사용자라고 한다면 게시판 글을 살펴보기 굉장히 지칠 것만 같다.

그래서 이전 페이지의 스크롤을 되돌리는 것을 scroll restoration이라고 한다.

 

그러면 scroll 값을 기억해야하는데 어떻게 저장할까?

원티드는 세션에 scroll 값을 저장하는 방식을 이용한다.

이 데이터는 일회성이 강하기 때문에 휘발성이 있는 세션이 적당한 것 같다고 판단한 것 같다.

 

 

React-Router에 scroll restoration 적용하기

 

관련 자료를 찾아보니 react-router-dom의 ScrollRestoration이라는 게 존재한다.

https://reactrouter.com/en/main/components/scroll-restoration

ScrollRestoration v6.6.1

 

한가지 더 생각해보아야 할 것은 스크롤 값 뿐만 아니라 데이터도 함께 기억해주어야 하는데,

 

1. 게시판 리스트 데이터를 전역적으로 관리하는 것인지

2. 로드된 데이터의 인덱스를 저장해뒀다가 다시 불러오는 것인지

 

2번은 아닌 것 같은게 인피니티 스크롤로 추가 항목이 로드될 때는 잘 호출되던 api가

뒤로가기를 했을 때는 나타나지 않고 로딩 상태도 나오지 않는다.

1번일수도 있지만 내가 모르는 다른 방법이 있을까 싶다.

🔑key word : infinite scroll, scroll restoration

 

👻코멘트

사이트에서 사용자들이 최대한 불편함을 느끼지 못하게하기 위해서

엄청 많은 신경을 썼다는 게 느껴졌다.

 

역시나 우리가 누리고 있는 것들은 당연한게 아니었다.

모든 것에는 누군가의 엄청난 노고가 담겨있다는 게 느껴졌다.

 

이런 것들을 느껴볼 수 있어서,

클론코딩을 시도하기를 너무 잘했다는 생각.