리액트

컴포넌트 구현을 안 해본 FE 개발자는 없을 것입니다. 개발자마다 각자의 기준에 의해 컴포넌트 단위를 결정하고 컴포넌트의 형태, 기능을 정의합니다. 컴포넌트 구현 방법은 명확한 정답은 없다고 생각합니다. - 컴포넌트마다도 형태, 기능이 다르기도 하고, - 어느 곳에서 사용하는 지, - 개발 기한이 얼마나 주어졌는지에 따라 컴포넌트 설계에 대한 고민의 시간이 달라지기 때문입니다. 다만, 컴포넌트를 잘 구현해놓으면 개발 생산성이 높아지기 때문에 많은 고민이 필요한 것은 사실인 것 같습니다. 저는 주로 신규 프로젝트에 많이 참여했었고, 프로젝트들 별로 디자인이 달랐습니다. 그래서 아토믹 디자인 패턴을 사용하지 않았고, 회사 내에 디자인 시스템도 만들 필요가 없었는데요. 이런 환경의 기준 (소규모 프로젝트) 으..

간단한 웹 페이지 기능 소개 쇼핑몰 기능 중 하나인 장바구니 기능을 구현한 웹 페이지입니다. 장바구니에 등록된 상품 중에서 결제할 상품을 선택하고, 상품 갯수에 따라 최종 금액을 유저에게 보여줍니다. 리액트 컴포넌트 설명 컴포넌트 2개가 있습니다. 1. 상품 컴포넌트 : 장바구니 상품 정보를 보여주는 컴포넌트 2. 상품 리스트 컴포넌트 : 상품 컴포넌트들을 보여주고, 필요한 비즈니스 로직을 제공합니다. 2번 컴포넌트는 컨테이너 - 프레젠테이션 패턴의 컨테이너라고도 볼 수 있을 텐데요. 컨테이너를 별도로 구별하려면, ~ 컨테이너라는 코드컨벤션이 생기고 별도의 디렉토리 폴더를 관리해줘야 하는데 개인적인 생각으로는 코드의 양이 늘어나고, 비즈니스 로직을 가지고 있는 컴포넌트들을 컨테이너로 엄격하게 구분하기 어..

[ 목차 ] Query 상태 (Status) StaleTime과 CacheTime 정리 Query 상태 (status) 아래 다섯 가지 상태로 정의되어 있습니다. 1. fetching 2. fresh 3. stale 4. paused 5. inactive 1. fetching QueryFn을 이용해서 데이터를 요청하는 상태입니다. 2. fresh 새로운 데이터를 받은 상태입니다. default로 staleTime이 0으로 정의되어 있는데요. default일 때는, 순간적으로 fresh 상태로 유지됩니다. 3. stale 데이터의 상태가 최신이 아님을 뜻하는 상태입니다. 이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터..

보통 슬라이더(또는 스와이퍼)를 구현할 때, 화면에 한 개의 슬라이드가 보이는 형태로 많이 구현합니다. 슬라이드를 넘기면, 다음 슬라이드가 나오는 형태입니다. 그런데, 요구사항이 화면에 여러 개의 슬라이드를 보여달라고 하면 어떻게 할까요? 예를 들어, 375px 사이즈의 모바일 화면에 200px 크기의 카드 형태를 하나는 다 보이도록, 하나는 일부만 보이도록 해줘야 합니다. 말이 잘 이해가 안되실 수도 있는데, 아래 그림과 같은 형태입니다. 위와 같이 Swiper에 옵션을 제공해서 인라인 형태의 슬라이드를 구현할 수 있습니다. 중요한 것은 styled 컴포넌트에 있는데요! .swiper-slide 클래스 선택자에 width 값을 auto, !important를 적용해야 합니다. 그렇지 않으면, Swi..

프로젝트를 마치면서. 11주차 주간회고를 작성하지 않아서, 12주차와 같이 씁니다. 4주 간의 프로젝트 기간이 끝이 났습니다. 11주차, 12주차에서는 목표했던 개발진행이 잘 이뤄지지 않았습니다. 코드숨 외에 다른 일에 신경써야 했던 것이 크기도 했지만, 한 트레이너님의 말씀처럼 핑계거리에 불과할 수도 있습니다. 아무튼, 이 2주의 기간에는 테스트 코드를 어떻게 작성해야 할지에 대한 고민과 회사에서 개발을 하면서 궁금했던 부분들을 질문하는 시간을 가졌습니다. 주로 프론트엔드 트렌드와 기술적인 궁금증이었는데, 트레이너님들의 답변을 통해 아이디어를 얻을 수 있었습니다. 코드숨을 통해서 배우고 싶었던 것은 다음과 같습니다. - CI / CD 구축하기 - 프론트엔드(리액트) 단위테스트 & e2e 테스트 작성하는..

[ 10주차 목표 ] CI / CD 구축 깔끔한 디자인 고민, 참고 자료 살펴보기 메인 화면 메뉴 랜덤하게 나오도록 처리 검색결과가 10km 이내에서 나오도록 변경 맵 하단에 음식점 리스트가 나타난다 반응형 디자인 적용하기 [ issue 링크 ] 2주차 문서 작성 · Issue #9 · CodeSoom/project-react-6-CheolWoongChoi 1. 이 앱을 언제 사용하나요? "점심", "저녁" 매 끼니마다 "뭐 먹을까?" 고민할 때 사용한다. PC로도 사용할 수 있고, 모바일로도 사용가능하다. 2. 구체적인 사례는 무엇인가요? 회사업무를 집중하 github.com [ 프로젝트 2주차를 진행하면서 ] 9주차와 마찬가지로 코드숨에서 똑같은 질문을 매주 작성하라고 했습니다. '왜 매 주마다 똑같..

[ 개인 프로젝트 시작 ] - 9주차 부터 개인 프로젝트를 시작합니다. - 코드숨에서는 똑같은 질문사항을 매주 작성하라고 권고합니다. [ 1주차 프로젝트를 진행하면서 ] 처음에는 어떻게 진행해야 될지 감이 안왔습니다. 그러다가 일상에서 필요한 기능을 구현하면 좋겠다는 생각이 들었고, 회사 점심시간에 "오늘은 뭐 먹지?" 하면서 고민을 하는데 이게 필요하다고 느꼈습니다. 서비스 이름이 좋겠다는 생각이 들었고, 여러 이름을 생각하다가 사람들이 많이 알법한 단어를 쓰면 좋겠다는 생각이 들었습니다. TMI, 원래는 투머치토커를 의미하는 말이지만, 저는 Today Menu Information이라고 갖다 붙였습니다 ㅎㅎ 이제 어떤 서비스를 만들지 생각했고, 구체적으로 어떻게 만들 것인가 고민해야 합니다. 그것은 ..