본문 바로가기

분류 전체보기51

img 2023년 새해의 다짐 곤니찌와. 하상원데스. 늦었지만 2023년 새해 다짐을 하려고 한다! 2023년 다짐이라고 하면 너무 지키기 어렵지 않을까?.. 2023년 2월 다짐으로 Feature를 나눠서 다짐하겠다. 이것처럼 개발 도중에 기획이 변경되는 경우가 꽤나 있다. 이런 것들 또한 개발 초기에 기획을 잘 들여다보고, 해당 부분이 변경되었을 때 영향을 미칠 부분들을 잘 생각하면 미연에 방지할 수도 있다. 뭐 그냥 그렇다는거다. 하여튼 2023년 2월의 다짐을 하겠다. 아침을 지배하는 자가 하루를 지배하고, 하루를 지배하는 자가 한 달을 지배하고, 한 달을 지배하는 자가 일년을 지배한다. 고로 아침 8시 기상하여 느긋한 출근을 하는 것이 목표 1이다. 아침에 보는 것이 하루 동안 머리에 남는다고 한다. 그럼 아침 8시 기상 목.. 2023. 2. 2.
img React의 Clean Architecture 반갑다 선생님들. 난 곧 2년차가 되는 1년차 갓난 프론트엔드 개발 조무사다. 현재는 벳플럭스라는 스타트업에서 늘펫 플러스라는 챗봇을 이용한 동물병원 고객 관리 웹 솔루션을 개발하고 있다. 수식어가 너무 긴 것 같지만 어쩔 수 없다. 우리 회사니까 잘 설명하고 싶은건 어쩔 수 없지 않은가 ? 껄껄 하여튼 개발을 하는데 있어서 기존의 난해한 코드와 내 갓난 코드들을 합치다보니 여간 어려움이 많다. 현재는 아토믹 디자인 패턴이 들어가 있는 상태인데, 이게 철저히 분리되었다기보단 약간 인식적으로? 얘는 이쯤이겠지.. 하는 느낌이며, 별로 효율적인 느낌이 안든다. 그래서 초 경력자이신 사수와 나는 앞으로 개발함에 있어 클린 아키텍처를 도입하려고 한다. 이름하여 엑조디아 아키텍처 ! 하나 하나씩 고쳐가면서 붙인단.. 2022. 12. 31.
img 설정 페이지 UI 개편. 기존 화면의 문제 - 해결 안녕하신가 ! 오늘은 재직하고 있는 회사 제품의 문제를 해결한 것을 적어본다. 늘펫플러스는 챗봇을 이용한 동물병원용 고객관리 웹 솔루션이고, 뭐 여러가지 좋은 기능들이 있다 ! 그 중의 설정 페이지의 문제를 파악하고 개편하는 과정이다 ~ 문제 1 설정 페이지는 챗봇과 알림톡을 시작하는 카카오 알림톡 및 챗봇 메시지 (자동화 메시지) 챗봇이 상담에 답변으로 보내주는 콘텐츠 (챗봇 메시지) 늘펫 플러스에서 단축키처럼 사용할 수 있는 (퀵 메시지) 로 구성됨. 전혀 다른 grade와 기능들을 ‘메시지’라는 한 단어로 엮고 한 탭에 넣어 설정 페이지를 사용하는 것에 있어서 이해를 어렵게 함 문제 2 또한 챗봇 메시지의 기본 늘펫 콘텐츠를 사용하기 위해 ‘잠금 해제’라는 개념을 이해해야 되는데, 한 리스트에 있는.. 2022. 12. 12.
img 리스트의 렌더링이 오래 걸리는 문제 - 해결 (react-virtualized) Domain : 동물병원에 공급하는 우리 회사의 솔루션의 콘텐츠 리스트이다. 실제 동물병원에 나가 테스트를 하다보니, 동물병원에 설치된 컴퓨터들은 상당히 오래되고 사양이 좋지 않아, 렌더링에 시간이 오래 걸린다는 것을 알게 되었다. 이는 문제라고 생각한다. Problem : 설정 페이지의 로딩이 오래 걸리는 문제 발생 요소 1 : 챗봇 콘텐츠(늘펫 플러스 + 병원 내 콘텐츠)가 점점 많아진다. 요소 2 : 최초 페이지 진입 시, 브라우저가 한 번에 모든 리스트를 그려야 되기 때문에, 버벅이는 현상이 생긴다. Solution : 최초 페이지 진입 시, 모든 리스트를 그리지 않고, 적절히 필요한 부분만 그리는 방법을 찾아봤다. 리스트를 렌더링(브라우저에 그리는 작업)을 최적화하기 위한 방법으로써, 안드로이드.. 2022. 11. 16.
img Full text search를 위한 검색 array 알고리즘 Hi 난 하상원 27세 오늘은 소소한 알고리즘 코드를 짜는 일이 있어서 적어보려고 한다. 파이어 베이스는 풀 텍스트 서치를 지원하지 않는다. 만약 DB에 하상원이라는 문자열이 저장되어 있다면, 검색 기능을 만들었을 때 where( 검색어, ==, name ) 으로 검색할 수 있다. 하지만 이건 검색창에 꼭 하상원을 써야한다. 상원으로는 검색할 수 없다. 그렇다면 모든 데이터를 받아와서 스테이트에 저장하고 내부에서 검색하면 어떨까 그건 안된다. 검색 한 번 할 때마다 모든 데이터를 저장하고 저장한 스테이트에서 필터를 돌려야하는데, 파이어 베이스는 리드 수 당 돈을 낸다. 고로 이따위로 짰다간 회사가 망할 수 있다. 대신에 파이어베이스엔 array-contains-any가 있다. 검색어가 배열 중 뭐 하나만.. 2022. 10. 24.
img [React + Next.js] Redux toolkit 사용하기 난 Redux를 처음 쓴다. 근데 시작부터 건방지게 Redux toolkit 을 사용하겠다. 그래도 되냐 한다면 당연히 오케이다. 왜냐하면 toolkit이 더 편해보이기 때문이다. Redux 란 리덕스란 상태 관리 라이브러리이다. Context API를 써봐서 대충 어떤 건진 알겠는데, 아 ContextAPI랑 차이점 같은 것도 나중에 공부해야겠다. 구조 1. Store에 데이터를 저장한다. ( initial data ) 2. Store에 있는 데이터를 읽어서 UI에 보여준다. 3. UI 이벤트에서 dispatch가 이뤄진다. 4. dispatch는 action을 전달한다. 5. reducer는 action을 받아서 store에 저장한다 ! 순서로 흘러간다. ( 내 경험 상 그런듯함 ) Redux의 규칙.. 2022. 9. 26.
반응형