블렉스 이야기’ 시리즈

BLEX 2021 7월 개발노트

  • 0
  • 0
0
0

⭐ 추가된 항목


💬 자체 검색 추가

  • 기존 덕덕고를 이용하여 사이트 검색을 진행하고 있었으나 검색 결과의 만족도가 너무나 떨어져 자체 검색으로 전환하였습니다. 성능은 차차 개선할 예정...
💬 검색 내역 조회 추가

  • 사용자가 최근 검색한 내용을 볼 수 있도록 하였습니다.
💬 포스트 모음 페이지 네비게이션 추가

  • 포스트 정렬을 바꾸거나 태그 클라우드에 들어갈때 항상 상단의 네비게이션을 눌러야 가능한 점이 불편하다고 생각되어 포스트 모음 페이지 상단에 네비게이션을 추가하였습니다.


🔨 개선된 항목


💬 댓글이 없는 경우 알림 박스 변경

  • 기존에는 Alert 형태로 작성된 댓글이 없다고 보여줬으나 로그인이 돼있건 안돼있건 디자인의 일관성을 해치는 것으로 보여져 변경하였습니다. 최초에는 무플 방지 위원회를 추가하려다 그건 좀 과하지 싶어서 추가하지 않았습니다. 😅
💬 댓글 입력창 변경

기존의 심심했던 입력창을 댓글과 비슷한 카드 형태로 변경하였습니다.

💬 로그인 후 X개의 댓글 더보기
  • 방문자에게 댓글을 미리 보여주지 않고 몇 개의 댓글만 달려있는지 보여주도록 하였습니다. 어떤 글을 읽고 추가한 것인데, 무슨 댓글이 달려있는 걸까 궁금함을 유발하여 회원가입을 유도하기 위합입니다.
  • 적용결과 효과가 미비한 것으로 분석되었고, 오히려 사이트에 부정적인 인식을 심어줄 것이 염려되어 제거하였습니다.
💬 드롭다운 개선
  • 드롭다운 외 다른 항목에 포커스가 되면 드롭다운이 닫히도록 수정했습니다.
💬 IE 오류 개선
  • IE에서 사이트가 보여지지 않던 오류를 수정했습니다.
💬 다크모드 개선

다크모드를 그냥 어두운 테마정도로 생각하고 만들었는데요. 다크모드 디자인 가이드를 확인하여 부족한 부분을 개선하였습니다. 전체적으로 명도를 낮추었고, 카드 디자인을 개선했으며, 이미지 및 비디오의 색상 대비를 줄였습니다.

메인 컬러도 기본 테마와 반전된 색상을 사용했었던 기존과 달리, 머티리얼 디자인 가이드 (다크모드 부문)를 참고하여 기본 테마 메인 컬러의 밝기를 높인(+40%) 컬러로 변경했습니다.


💻 월간회고

이번달에는 위 항목들을 고치면서 프론트엔드의 전역 상태 관리에 대해서 개선이 필요하다고 생각되었다. Recoil을 적용하고자 하였으나 IE에서 정상적으로 동작하지 않는 것이 확인되어 기존에 사용하던 방식을 개선하는 방향으로 진행하였다.

기존에 사용하던 방식은 전역으로 공유할 데이터를 한 클래스에 때려놓고 이 클래스를 할당받은 전역 객체의 데이터가 변경되면 이 데이터의 값을 공유하고자 하는 모든 컴포넌트에 상태를 업데이트를 하는 방식이다.

문제는 전역으로 관리할 상태가 많아지자 불필요한 연산이 상당히 많이 호출된다는 문제가 있었다. 굳이 업데이트가 필요하지 않은 컴포넌트의 업데이트도 호출된다. 그래서 기존의 방식을 Recoil에서 하는 방식처럼 필요한 단위로 나누고 기존과 동일하게 자신의 상태를 공유하는 방식으로 전환하였다.

이 방식을 다른 프로젝트에도 사용하다보니 소스코드를 업데이트하면 이곳저곳 바꿔야 할 곳이 많아져 NPM에 처음으로 라이브러리를 등록해 보았다. 생각보다 어렵지 않아서 재활용 가능한 모듈들은 대부분 등록해서 사용하게 될 것 같다.

다음달에는


🎸 기타

'블렉스 이야기' 시리즈

블렉스는 제가 애정을 가지고 개발하는 하나의 취미이자 한명의 자식(?)이며 처음으로 서비스를 시작한 프로젝트입니다. 혼자서 풀사이클 개발을 하다보니 부족한 점이 많을 수 있지만 부족한 점은 채워나가면 된다고 생각합니다. 이곳은 블렉스의 부족한 점을 채워나가는 모습을 그려놓은 시리즈입니다.
baealex
0분전
작성된 댓글이 없습니다. 첫 댓글을 달아보세요!
    댓글을 작성하려면 로그인이 필요합니다.