본문 바로가기
  • 하고 싶은 일을 하자

리액트12

2023년 하반기 회고 - 이커머스 프론트엔드 개발, 애자일, 스토리북, 테스트 코드, 사이드 프로젝트 2023년이 벌써 이렇게 지나갔구나. 올 하반기에도 많은 일들이 있었다. 이번 글은 회사 개발 일 뿐만 아니라 다른 일들도 회고를 해볼까 한다. 개발 개발이라는 직업은 나에게 애증의 존재 같다. 좋기도 하고, 싫기도 한데, 다시 태어나면 또 개발자를 할 것 같다. 물론 다른 직업을 경험해보지 못해서 익숙한 것을 하고 싶은 마음도 있을 것이다. 그렇지만 하나의 주제를 탐구하고, 공부하고, 논리를 쌓는 행위가 나에게 잘 맞는 것 같다. 올 하반기 개발했던 것을 정리 해보겠다. 기디개 프로덕트팀 창설 하반기부터 기획팀, 디자인팀, 개발팀이 모인 프로덕트팀이 만들어졌다. 가장 큰 변화는 일주일에 한 번씩 기디개가 모여 정기 미팅을 가지고, 스프린트가 끝날 때 회고 미팅도 다같이 하게 된 점이다. 원래는 개발팀 .. 2023. 12. 28.
[React Hook 공식 문서 읽기] useEffect (Race Condtions 해결 방법) React 개발을 하는데 있어 useEffect 는 필수이다. 정말 많이 쓴다. 그런데 공식 문서를 읽다보니 몰랐던 것을 알게되어 정리 해보겠다. 먼저 useEffect 에 대한 정의부터 예상과 달랐다. 나는 컴포넌트가 마운트/언마운트 되었을 때 실행할 로직을 정의하는 Hook 이다 라고 생각하고 있었는데 공식 문서의 정의에는 "외부 시스템을 사용하는 컴포넌트를 동기화하는 Hook 이다." 라고 설명하고 있다. 외부 시스템은 무엇이고, 동기화는 무엇일까? External System external system 이란 React 로 control 하지 않는 코드를 의미한다. 이에 대한 예시로 setInterval(), clearInterval(), window.addEventListener(), windo.. 2023. 11. 22.
[React Hook 공식 문서 읽기] useCallback useCallback 은 함수를 cache 로 저장 해서 re-render 할 때 사용할 수 있도록 하는 React Hook 이다. 아 슈밤 글 다썼는데 코드로 테스트하다가 다 날라갔다... ㅠㅠ loop 3중첩으로 1000*1000*1000 으로 돌리니까 브라우저 바로 뻑나네............. ProductPage가 리렌더링 되면 handleSubmit 함수는 새롭게 생성될까? 아니면 동일한 로직의 함수이니 알아서 이전 렌더링 때 만든 handleSubmit 함수를 그대로 사용할까? 정답은 함수를 새롭게 생성한다. 자바스크립트에서 function () {} 혹은 () => {} 인 경우에는 함수를 새로 생성하기 때문이다. 이런식으로 함수를 useCallback 으로 감싸고 dependency ar.. 2023. 11. 9.
2023년 상반기 주류 이커머스 스타트업 프론트엔드 개발 회고 내가 다니는 회사(술담화)에서는 스프린트가 끝나거나 프로젝트가 끝나면 다 같이 회고하는 문화가 있다. 개발 블로그에도 올해 상반기를 회고해보고 앞으로도 꾸준히 올려보려고 한다. 굵직한 개발 프로젝트 [ 관리도구에서 사용자의 리뷰를 숨기거나 댓글을 달 수 있는 기능 개발 ] 목적 1 : 쇼핑몰 랜딩 페이지 최하단에 "실시간 베스트 리뷰"가 있다. 이곳에 구매한 상품이 아닌 이상한 사진이나, 부적절한 내용의 리뷰가 올라오는 경우가 있었다. 이때 매번 DB를 변경해서 내려줘야 했는데, 관리도구에서 관리자가 댓글을 달거나 숨김 처리할 수 있도록 하였다. 목적 2 : 또한 상세 페이지에 상품에 대한 문의 리뷰를 달았을 때, 적절히 답변하여 상품에 대한 신뢰도를 높여 구매로 이어지도록 하는 효과도 있었다. 기획 단.. 2023. 6. 13.
AWS 한국 사용자 모임 - 프론트엔드 Next.js 이미지 최적화 소모임 후기 AWS 한국 사용자 모임에서 프론트엔드 소모임이 열린다고 하여 다녀왔다. AWS 한국 사용자 모임 링크 : https://www.meetup.com/awskrug/ AWSKRUG - AWS한국사용자모임 (서울, 한국(대한민국)) 본 그룹은 AWS한국사용자모임(AWSKRUG)의 정기 모임 및 소모임 운영 사이트로서 최신 활동 소식 및 행사를 올려드릴 예정입니다. 더 자세한 것은 https://facebook.com/groups/awskrug 를 참고하세요. www.meetup.com AWS이지만 인프라나 백엔드뿐만 아니라 프론트엔드, 스타트업 등 다양한 주제의 세미나가 열린다. https://www.meetup.com/awskrug/events/292866390 Login to Meetup | Meetup.. 2023. 5. 14.
스타트업 개발팀의 React Next.js 마이그레이션 도전기 나는 술담화라는 스타트업 회사에 다니고 있다. 2021년 초에는 php 기반의 웹 페이지에서 React를 도입했고, 이번 2022년 5월부터 NextJs를 도입했다. React에 NextJs를 Migration 하는 과정은 쉽지 않았다. 기존에 진행하던 회사 매출에 중요한 프로젝트도 동시에 진행해야 했고, 폴더 구조와 라우터가 완전히 바뀌기 때문에 버그가 없도록 유의해야 했다. 소규모 개발 인원으로 어떻게 성공적으로 Migration 했는지 이야기해 보겠다. 일단 먼저 시작하기에 앞서 NextJs가 무엇인지 간략하게 설명하겠다. (이 글은 술담화 프론트엔드팀 개발자 이병수, 정윤기 님과 함께 작성하였습니다.) NextJs란 무엇인가? 전통적인 웹 사이트는 글 위주의 페이지였다. 사진이나 영상은 거의 없었.. 2022. 12. 28.
술담화 쇼핑몰 Form 에러 처리 변경하여 결제페이지 체류 시간 감소, 이탈률 감소 시키기 술담화 쇼핑몰(https://sooldamhwa.com/)에서 8월 말 선물하기 기능을 추가하면서 결제 페이지의 대대적인 디자인 변경이 있었다. 결제 페이지 쪽 개발을 하면서 기존 결제 기능에 개선하고 싶은 부분을 발견했다. 술담화에는 장바구니에 상품을 담아서 결제하거나, 제품을 바로 구매하는 경우 결제 페이지로 이동한다. 결제 페이지에서 배송지 확인 및 수정, 주문하는 상품 확인, 결제 방법 선택, 쿠폰 선택, 포인트 입력, 정보제공 동의를 한 뒤에 결제 버튼을 누르면 결제가 진행된다. 기존에는 결제 버튼은 항상 비활성화되어 있고, 결제에 필수인 항목인 결제 방법과 개인정보 제공 동의를 하면 결제 버튼이 활성화되어 결제를 할 수 있는 방식이었다. 이 방식은 유저가 어떤 항목이 필수로 입력해야 하는지 알.. 2022. 10. 10.
[코드숨 리액트 강의] 5주차 회고 - 비동기 코드에서 Thunk를 쓰는 이유 드디어 강의의 절반을 넘게 들었다! 8주차까지면 끝인데 벌써 5주차가 끝나다니 시간 참 빠르다. 이번주는 수요일 휴일이 있어서 여유가 있었다. redux와 비동기 fetch를 TDD로 개발하는 것을 배웠다. 지난번 첫 TDD를 개발해서 그런가 이번 과제는 처음 TDD를 접했을 때 보단 수월했다. 과제를 월요일부터 시작해서 제출하면 더 좋을 것 같다. 코드 리뷰를 좀 더 받는게 나에게 큰 도움이 될 것 같다. -> 내일부터 과제 해보자! Fetch 테스트 jest로 테스트하는 것은 런타임 때 테스트하는 것이 아니기 때문에 실제로 fetch 이후 response를 받아서 테스트가 진행되지는 않는다. useSelector.mockImplementation((selector) => selector({ categ.. 2022. 6. 6.
[코드숨 리액트 강의] 3주차 회고 이번 강의를 통해 처음으로 TDD를 해봤다. 사용한 프레임워크는 Jest와 testing-library/react 였다. TDD(Test-Driven Development)는 Red Green Refactoring 을 이용해서 개발한다. 먼저 테스트에 실패할 테스트 코드를 작성한다. 적당한 코드를 작성해(특이한 케이스) 테스트를 통과시킨다. 이후 코드를 보완해 보편적인 케이스들도 통과할 수 있도록 한다. 개인적으로 테스트 코드를 먼저 작성하고 코드를 나중에 개발하는 방법은 처음이었는데 굉장히 신기했다. 처음에 이런 방법을 고안한 사람은 천재가 아니었을까. 아래는 TDD를 이용한 코드이다. import { render, screen, fireEvent } from '@testing-library/react.. 2022. 5. 23.