React와 D3를 함께 사용하는 방법: DOM 조작은 React, 복잡한 계산은 D3

1. React와 D3 (1) 각각의 장점 (2) 함께 사용할 때 주의점 2. React와 D3를 함께 사용하는 방법 (1) D3가 대부분의 DOM 조작과 복잡한 계산을 모두 담당 (2) DOM 조작은 React, 복잡한 계산은 D3가 담당 (good) 3. 마치며 4. 참고 자료 React와 D3를 함께 사용하여 그래프를 작업하게 되면서 어떤 방식으로 코드를 작성해야 좋을지 고민하게 됐습니다. 두 라이브러리의 장점을 최대한 활용하면서 유지보수가 쉬운 코드를 작성할 수 있는 방법이 무엇일까 고민하다 'DOM 조작은 React, 복잡한 계산은 D3'에게 담당하도록 하는 방법론을 알게 되었습니다. 본 포스팅에서는 React와 D3의 장점과 함께 사용할 때 주의점, 두 라이브러리의 장점을 최대한 활용하기 위한..

[독후감] UX/UI의 10가지 심리학 법칙 | 존 야블론스키

🤍 읽게 된 이유 토이 프로젝트에 사용할 디자인 시안을 만들기 전, 좋은 UX 디자인을 위해 고려해볼 만한 내용을 아래와 같이 적어두고 작업을 시작했는데요. 막상 시안 작업에 들어가니 좋은 사용자 경험을 위해 고려할 부분은 당연히 훨씬 많았습니다. 그래서 UX 공부가 더 필요하겠다는 생각이 들어 UX 분야의 유명한 책인 'UX/UI의 10가지 심리학 법칙'을 읽게 되었습니다. 💜 느낀 점 '좋아 보이는 것'에는 이유가 다 있구나. 그동안 무심코 '사용자 입장에선 이게 좋을 것 같아'라고 생각했던 것들에 이유를 부여해준 책입니다. 만약 누군가가 위의 UI를 보고 '사용자 위치를 가져오는 동안 왜 버튼이 빙글빙글 돌아가게 했나요?'라고 물어봤다면, 이 책을 읽기 전의 저는 아마 '시스템이 일하고 있다는 걸 ..

주니어 수준에서 해 본 코드리뷰 경험

🤍 상황 설명 가져도댕냥 프로젝트를 진행하면서 '2명 이상의 승인을 받아야 머지가 가능하다'라는 규칙을 정했습니다. 그래서 저희 팀은 PR 승인을 위해 자연스럽게 서로 코드리뷰를 하게 됐습니다. ✏️ 주니어 수준에서 어떤 코드리뷰를 할 수 있을까? 제가 코드리뷰를 할 때 주로 봤던 부분에 대해 정리해보겠습니다. 1. 오타 또는 잘못된 단위 찾기 가장 만만한 오타 or 잘못된 단위 찾기입니다. (저희 팀은 예외 상황을 제외하고는 rem 단위을 사용하기로 했기 때문에 드렸던 리뷰입니다.) 2. 필요 없는 주석 찾기 가장 만만한..2 필요 없는 주석 찾기입니다. 3. 이미지 alt 속성 값 생각해보기 이미지 태그가 들어간 경우 alt 속성 값을 어떻게 작성해야 웹접근성 측면에서 좋을지 고민해보고 변경 제안을 ..

마지막 주 돌아보기

이번 주 돌아보기 1. 프로젝트 발표 🎉 발표 첫번째 날, 두 번째 순서로 진행했는데 빠르게 발표를 끝내니 마음이 너무 편했다. 아래는 피드백 받았던 내용. 팀 내에 디자이너가 따로 있었냐고 물어보셨다. 뿌듯 (｡•̀ᴗ-)✧ 날씨 API의 응답 id와 한국어로 번역된 날씨를 매칭한 게 좋다. → 처음에 이 부분은 질문하신 의도를 제대로 파악하지 못해서 살짝 동문서답을 했었는데, 말씀을 들어보니 변경될 여지가 적은 응답 id와 번역된 날씨를 매칭한 게 좋다는 말씀이셨다. 이미지 압축 라이브러리를 사용한 게 좋다. → 다른 팀원분이 하신 부분. 이미지 압축은 고려하지 못했던 부분이라 팀원분께서 이 기능을 넣으신 걸 보고 멋지다고 생각했었는데 역시 이 부분을 알아봐주셨다. 우리는 기획자가 아니라 개발자라 상관..

[프로젝트] 가져도댕냥 프로젝트 배포 기념 '협업 방식' 위주 리뷰

가져도댕냥 프로젝트 배포 기념 '협업 방식' 위주 리뷰 2달이 살짝 넘는 기간동안 개발했던 가져도댕냥 프로젝트의 버전 1.0.0이 완성되어 지난 주에 배포를 진행했습니다! 배포 기념으로, 우리 조의 자랑거리인 협업 방식 위주로 리뷰를 작성해보려고 합니다. 팀장 자리를 맡게 되면서 어떻게 해야 우리 팀을 잘 이끌어 갈 수 있을까?를 고민하다 여러 가지 시도를 해봤는데요. 이 시도들이 꽤 의미있는 시도였다고 자부합니다! 따라서 수월한 협업을 위해 해 본 시도를 '팀워크를 위한 시도'와 '효율적인 업무 관리를 위한 시도' 이렇게 두 가지로 나눠서 작성해보겠습니다. 1. 팀워크를 위한 시도 (1) 설문지 작성 - 공통된 팀 목표를 세우고 시너지를 강화해요! (설문지는 프론트엔드스쿨 2기 삼콩님의 강연을 듣고 아..

열여덟째 주 돌아보기

이번 주 돌아보기 1) 동물병원 페이지 디자인 개선 완료 동물병원 페이지 디자인을 처음 만들때 너무 못생기게 만들어놔서 계속 찝찝했었는데 드디어 개선 완료! 2) 개리님의 코드 리뷰 목요일에 개리 멘토님의 코드 리뷰 시간이 있었다. 저녁 6시부터 한시간 동안 해주셔서 너무 감사했다. 생각보다 좋은 평을 받아서 기분이 좋았다! 그거랑 별개로.. 한 시간 동안 너무 웃었다. PR 리뷰 해주실때는 진짜 웃겨서 눈물이 났다. 한 줄 요약 : 코드 리뷰를 할때는 코드에 대한 감상을 하자 (코드를 짠 사람에 대한 감상은 하지말자ㅋㅋㅋㅋ) 이번 주의 나 아쉬운 점 상세 페이지에서 뒤로가기 시 기존에 보고있던 페이지 데이터를 그대로 유지하고 싶었는데 거리 필터 유지밖에 구현을 못했다. 잘한 점 우리 팀 모두 목표 기능..

(리액트+크로미움 브라우저에서) Geolocation API의 느린 응답 속도를 UX 개선으로 보완하기

👇 이전 글 보고오기 리액트에서 Gelocation API로 사용자 좌표를 가져오는 속도는 왜 이렇게 느릴까? 🔎 상황 설명 Gelocation API로 사용자 좌표를 받아온 후, 받아온 좌표를 통해 실시간 날씨를 보여주는 산책 난이도 페이지를 개발하고 있었는데요. 이때 리액트+크로미움 브라우저에서 Gelocation API의 느린 응답 속도로 인해 로딩이 5~7초 정도 걸리는 현상이 일어났습니다. 처음에는 Gelocation API로 좌표를 가져오는 속도를 개선해보려고 했는데 이전에 포스팅했던 리액트에서 Gelocation API로 사용자 좌표를 가져오는 속도는 왜 이렇게 느릴까? 글에서 확인했듯이 좌표를 가져오는 속도를 직접 제어하는 것은 어렵겠다는 결론을 얻었습니다. 그래서 기술적으로 개선이 불가능..

열일곱째 주 돌아보기

이번 주 돌아보기 1) 지식 공유하기 월요일 오전 시간에 팀원분들에게 Postman으로 API 테스트 하는 방법과 Axios를 이용해서 API 요청하는 방법을 설명드렸다. 팀원분께 리액트 왕왕왕왕왕초보반 강사 해도 좋을 것 같다는 말씀을 들어서 뿌듯했다. 2) Axios multiple requset 사용해보기 프로젝트를 진행하면서 API를 동시에 여러개 요청해야 할 상황이 많았다. 그런데 이때, API 요청을 각각 하다보니 비슷한 코드를 여러번 반복하는 게 마음에 안들어서 검색을 해보니 Axios mutiple request라는 게 있었다. 그래서 Axios 러닝 가이드를 따라 axios.all() 메소드를 이용해 다중 요청을 한 번에 던지고, axios.spread()를 이용해 다중 응답을 한 번에 ..

리액트에서 Gelocation API로 사용자 좌표를 가져오는 속도는 왜 이렇게 느릴까?

🤍 결론 먼저 리액트에서 Gelocation API를 이용해서 사용자 좌표를 가져올 때 크로미움 계열 브라우저에서만 알 수 없는 이유로 응답이 늦게 옵니다. 다만 좋은 사용자 경험을 위해 실제론 느리더라도 사용자에게는 빠른 것 같은 느낌적인 느낌을 주는 게 중요합니다. 🔎 상황 설명 상황 설명에 들어가기 전, 크롬 브라우저를 기본 브라우저로 사용했음을 미리 알립니다. 가져도댕냥 프로젝트에서 산책 난이도 페이지를 담당하게 되었는데요. 산책 난이도 페이지는 사용자가 있는 위치의 실시간 날씨 정보를 보여주고, 실시간 날씨 정보를 바탕으로 하여 강아지 산책 난이도를 어려움/보통/쉬움으로 책정해주는 페이지입니다. 따라서 기능 구현에 앞서 우선 Gelocation API를 이용해서 사용자의 좌표 정보를 받아와야 했..