Web Development/React21 Date Picker Library 비교 분석 Date Picker Library 비교 분석 들어가며... 프로젝트에서 장소 예약을 위해 날짜와 시간을 선택할 수 있도록 하는 기능을 개발하게 되었습니다. 이 부분을 더 효율적으로 개발하기 위해 라이브러리를 사용하기로 했고, 여러 후보군 중 프로젝트에 가장 적합한 라이브러리가 무엇인지 비교해보고 결정하기로 했습니다. 이번에 라이브러리들을 찾아 비교해보면서 느낀 것은 각각의 라이브러리들 모두 기본적으로 필요한 기능들을 갖추고 있으며 대체로 비슷한 수준이었습니다. 따라서 구현하고자 하는 기능에 따라 적합하다의 기준이 달라질 수 있습니다. 아래의 내용들은 주관적인 견해임을 감안해 참고만 하시기를 바랍니다. 구현하고자 하는 기능 날짜 선택 특정 범위 한정으로 날짜 선택 제한 시간 선택 예약 가능 시간에 한하여.. 2023. 11. 15. [ React ] React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 해당 기능을 개발하게 된 배경 인플루언서와 클라이언트를 매칭하는 광고 플랫폼 회사에서 인턴으로 근무할 당시 사내의 TF팀에서 진행하는 admin system 개발 프로젝트에 참여하게 되었습니다. 해당 프로젝트는 인플루언서 데이터를 효율적으로 관리하기 위한 내부용 admin page 개발이 목표였습니다. 기능을 개발하는 중간에 기획이 변경되어 동료가 맡았던 인플루언서 태그 기능의 볼륨이 초반 계획보다 커지게 되었습니다. 그러한 이유로 태그 생성하는 select box와 관련된 기능들을 구현해서 동료에게 전달하는 방식으로 업무가 수정되었습니다. 따라서 태그 생성과 관련된 코드들이 기존에 동료가 작성했던 코드를 수정하거나, 추가.. 2023. 7. 31. [ React ] date & time Formatter 컴포넌트로 만들어서 관리하기 코드 리팩토링을 진행하며 여러 컴포넌트에서 반복적으로 사용되는 함수가 있어 컴포넌트로 분리해 관리하려고한다. 이렇게 ISO 8601 형식으로 들어오는 날짜 및 시간 데이터를 쓰임에 맞게 가공하는 함수를 컴포넌트로 분리해 관리하기로 했다. 목차 1.date & time Formatter 컴포넌트 분리하기 2.date & time Formatter 각각의 코드 설명 리팩토링 전 코드 (독립된 컴포넌트로 분리해서 관리하기전 불필요한 코드들도 함께 섞여있다.) const TimeTable = ({ time, setSelectedTime }) => { const getTime = e => { const TimeTable = ({ time, setSelectedTime }) => { {ti.. 2023. 7. 27. 날짜 및 시간 예약 기능 구현하기 / with react-datepicker 1. 날짜 및 시간 선택 기능 구현하기 구현하려는 기능 1. 현재 날짜를 기준으로 6일 뒤까지만 예약이 가능하도록한다. 2. 예약하고자 하는 날짜를 선택하면 해당하는 날짜의 타임테이블을 불러온다. 3. 전체 타임 테이블 중에서 예약이 가능한 시간만 버튼이 활성화 되도록 한다. 4. 시간을 선택하고 예약하기를 누르면 예약 날짜와 시간을 서버로 보낸다. 내가 생각한 로직 1. 현재 날짜를 기준으로 예약 가능한 날짜 활성화 2. 예약 날짜 선택과 동시에 해당하는 날짜의 타임테이블 불러오기 3. 예약 가능한 시간만 버튼 활성화 4. 예약 시간 선택 5. 날짜와 시간이 모두 선택 될 때만 예약하기 버튼 활성화 6. 예약하기 버튼을 누르면 결제 단계로 이동 2. 구현에 필요한 라이브러리 비교하기 필요한 라이브러리 .. 2023. 7. 6. React / 컴포넌트 재사용 / Button component 컴포넌트 재사용 / Button component 구현하려는 기능 프로덕트 내에서 사용될 버튼을 컴포넌트로 반들고 재사용 가능하도록 구현 내가 생각한 로직 1. 버튼 컴포넌트를 만들고 props로 변경될 값을 받는다. 2. className을 다르게 주어 스타일에 변화를 준다. 처음 작성했던 코드 처음 작성했던 코드는 bigButton 과 smallButton이라는 두개의 컴포넌트로 분리해서 만들었다. 그러나 className으로 색상을 변경할 수 있다면 사이즈도 마찬가지로 className으로 관리할 수 있다는 생각이 들었다. 그래서 버튼 컴포넌트를 하나로 합치고 스타일 속성으로 사이즈를 분리해서 만들었다. import react from "react"; import "./Button.scss"; co.. 2023. 5. 18. React / useNavigate를 사용해서 경로 이동을 해야할 때 발생하는 페이지 공백 오류 해결 useNavigate를 사용해서 경로 이동을 해야할 때 발생하는 페이지 공백 오류 해결 페이지 전환 시 보이는 로딩 페이지 구현 구현하려는 기능 useNavigate를 사용해서 경로 이동을 해야할 때 페이지 공백이 발생한다. 결제페이지에서 인보이스 페이지로 넘어가는 과정에서 페이지 공백이 잠깐 발생했다. 이때 notFound 화면이 나오게 되는데 사용자는 결제가 완료되지 않았다고 오해할 수 있는 상황이었다. 그래서 결제페이지에서 인보이스 페이지로 이동하는 사이에 보여질 로딩페이지를 구현하고자 했다. 내가 생각한 로직 1. 로딩 페이지를 만들어서 path경로를 /invoice 로 지정한다. 2. orderId를 전달받아서 새로운 페이지를 불러오기 전에는 /invoice가 기본 경로로 설정되어 loading.. 2023. 5. 17. React / 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 데이터가 들어오기 전에는 값을 출력하지 않고 다시 데이터를 요청하도록 구현하려는 기능 네비게이션에 서버에서 받아온 userdata를 활용해서 포인트와 상품 수량 출력 내가 생각한 로직 1. 서버에서 받아오는 유저 데이터는 계속해서 값이 변하기때문에 useState를 사용해서 관리한다. 2. fetch를 사용하여 서버에서 데이터를 받아온다. 3. 받아온 데이터를 state에 저장하고 각각의 데이터를 쓰임에 맞게 가공해서 변수로 선언한다. 처음 작성했던 코드 (오류 발생) useEffect(() => { fetch("http://10.58.52.169:9001/users", { method: "GET", header.. 2023. 5. 17. React / 토큰 유무에 따른 조건부 랜더링 / token undefined가 true로 인식되는 오류 해결 토큰 유무에 따른 조건부 랜더링 token undefined가 true로 인식되는 오류 해결 구현하려는 기능 토큰 유무에 따라 조건부 랜더링으로 다른 결과값 출력 내가 생각한 로직 1. 로그인 버튼을 누르면 fetch가 실행되면서 서버로 요청을 보낸다. 2. 서버로부터 받은 토큰을 localStorage에 저장한다. 3. localStorage에 저장한 토큰을 변수로 저장한다. 4. 변수로 저장된 토큰의 값으로 토큰 유무를 판별하여 조건부 랜더링을 한다. 처음 작성했던 코드 (오류 발생) const token = localStorage.getItem("TOKEN"); const loginOn = () => { fetch("http://10.58.52.169:9001/users/logIn", { metho.. 2023. 5. 17. React/ part.3 Mock Data Mock Data 이번 글에서는 이전 글인 상수데이터에 이어 Mock Data에 대한 개념과 활용방법에 대해 다룹니다. 또한 fetch 메서드를 사용해 로컬 서버에서 Mock data를 받아와 활용하는 방법에 대한 내용이 있습니다. 1. Mock Data란? 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다. UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 때, 데이터가 들어오는 상황에 대비해 의도한 대로 UI가 구현되는지 확인하기 위해 사용한다. ⇒ Mock data를 fetch를 사용해 실제로 서버에서 받아오는 것처럼 사용한다. 2. Mock Data를 사용하는 이유 백엔드 API가 미완성인 경우 Mock Data를 사용하지 않.. 2023. 4. 29. 이전 1 2 3 다음
