전체 글125 compound component pattern을 활용해 컴포넌트 조립하기 '펀잇'에서 디자인 마이그레이션 작업을 진행하면서, 약간씩 다른 컴포넌트를 구현해야 할 일이 생겼다. 위 사진은 꿀조합에 대한 정보를 요약해서 보여주는 컴포넌트로많은 페이지의 이곳저곳에서 사용되고 있다. 사실상 같은 정보를 내려받는 컴포넌트인데,디자인이 4가지로 나누어져서 이를 모두 구현해야 할 필요가 생겼다. 예전에는 디자이너분들이 없기도 했고,해봤자 2가지 정도의 시안으로 나누어졌기 때문에그냥 페이지에 따라 조건문 처리를 해 구현했다. 하지만, 이제는 4가지나 되고,조건문 처리를 해서 만들기에는 코드가 너무 더러워진다.그렇다고 같은 정보를 받고 있는 컴포넌트를굳이 4개를 나눠 만드는 건 시간과 인력 낭비이다.그리고, 나중에 시안이 더 늘어나게 되면?한, 두개쯤은 몰라도 40개, 100개씩 늘어나게 되.. 2024. 8. 20. Meta OG image 교체가 안 된다면?! 우리는 Meta OG 태그를 사용해 미리 보기 정보를 지정할 수 있다.미리 title, image 등을 작성해두면, 웹 페이지가 소셜 미디어 플랫폼에서 공유될 때,우리가 작성한 정보를 띄울 수 있다. 예를 들면, 카카오톡에서 사이트를 공유했을 때해당 사이트에 대한 제목, 이미지, 설명 등을 볼 수 있다. 만약, 따로 Meta OG 태그를 작성하지 않았다면,아래와 같은 모습으로 보이게 된다. Meta OG 태그를 잘 작성해두면,사용자가 사이트에 접속하기 전에대략적인 정보를 얻을 수 있다. 위 사진처럼 아무 설명도 없는 것보다는 이렇게 만들어놓으면사용자의 클릭을 유도할 수 있지 않을까? '펀잇'의 경우에도 Meta OG 태그 작성을 해두었는데디자인 마이그레이션 작업을 진행하며기존에 작성한 이미지 태그를 수.. 2024. 7. 23. [2탄] dialog 위에 토스트 뜨게 하기 펀잇에서 dialog 위에 토스트가 가려 보이지 않는 문제가 있었다.엄~청 삽질하다가 결국 div에 role = 'dialog'를 주는 방식으로 해결했는데... (자세한 내용은 아래에 있다) [🐛트러블슈팅] 토스트를 구웠는데 먹을 수 없다구요?!?!dialog에서 토스트가 가려져요.... '펀잇'에서 리뷰를 작성할 때 각종 알람이 뜬다. 예를 들어 사용자가 이미지를 등록한다고 생각해 보자. 5MB 이하의 이미지만 받고 있다고 할 때 그보다 큰 용량의hae-on.tistory.com 어찌어찌 해결은 했지만, 뭔가 만족스럽지는 않은 해결법이었다.dialog 태그를 꼭 사용하고 싶었기 때문!dialog 태그를 사용해야 웹 접근성 측면에서 효율적이기 때문이다. 그래서 사용할 수 있는 다른 방법을 찾으면 적용해.. 2024. 5. 7. React Hooks란? "hook의 이름이 왜 hook인지 생각해 보신 적 있으세요?" "갈고리...? 뭘 거는 게 아닐까요?" "....?" React Hooks란? Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. React 공식 문서에서 소개하는 React Hooks의 정의이다. 뭐 대략적으로 이야기하자면 React의 Class형 컴포넌트에서 사용할 수 있었던 상태 관리와 라이프 사이클 메서드를 Function 컴포넌트에서 Hook을 통해 사용할 수 있다는 뜻이다. 그렇다면 왜 굳이 Hook을 만들어 Function 컴포넌트로 넘어간 것일까? Class형 컴포넌트는 Fu.. 2024. 1. 29. 펀잇 리뷰 작성 폼에서 웹 접근성 개선하기 '펀잇'에서는 웹 표준과 웹 접근성을 지키기 위해 노력을 했다. 모든 부분에서 지킬 수는 없었지만 선정한 브라우저 안에서는 동일한 콘텐츠를 볼 수 있도록 했고, 코드 리뷰에서 시맨틱 태그 사용을 꼼꼼히 잡아내곤 했다. 리뷰 작성 폼의 경우 웹 접근성을 지키려고 더욱 노력했는데 이 기능이 우리 서비스의 핵심 기능이기 때문에 모든 사람들이 특정 조건과 상관없이 이용할 수 있어야 한다고 생각했다. 리뷰 작성을 시도하면서 어떤 부분의 접근성이 떨어지는지 직접 체험하고 수정해 볼 예정이다. 키보드만으로 입력 가능 먼저, 키보드만으로 리뷰 작성을 할 수 있도록 개선했다. 이미지를 업로드하는 input과 재구매 여부를 물어보는 check box의 경우 enter key를 눌러도 아무 반응이 일어나지 않았는데 이를 h.. 2023. 11. 12. 최종 데모데이 후기 최종 데모데이 드디어 최종 데모데이를 했다. 최종 데모데이는 4차 데모데이와 비슷하게 부스 형식으로 운영했다. 다만 이전에는 선릉 캠퍼스, 잠실 캠퍼스 따로 운영했던 것에 반해, 이번에는 잠실 캠퍼스 한 곳에서 오전/오후로 나누어 진행했다. 하루 전날에 부스 자리를 정했고 우리 '펀잇'팀은 12번 자리를 골랐다. 선릉 캠퍼스 팀은 오후 차례이기 때문에 오전에는 잠실 캠퍼스 팀의 서비스를 즐기기로 했다. 각종 부스를 돌아다니며 소개를 듣고, 해당 서비스를 사용했다. 잠실 캠퍼스 팀의 서비스는 이번에 처음 써봤는데 정말 재미있었다. 어떻게 이렇게 구현했을까 싶을 정도로 퀄리티가 높고 인터렉션이 재미있었다. 해당 팀의 소개를 다 들으면 피드백을 작성하면 된다. 좋았던 점이나 아쉬운 점을 구글 폼으로 남기고 스.. 2023. 11. 5. 이전 1 2 3 4 ··· 21 다음
