react project

1차 프로젝트가 눈 깜짝할 사이에 끝났다. 약 한달정도 되는 기간 내내 매일 성장하는 기쁨을 느끼면서 코딩할 수 있게 해준 우리 팀원분들 모두 고맙습니다~ 💛 여러분들과 함께했기 때문에 프로젝트를 잘 마칠 수 있었어요! 🥳 🏆 프로젝트 소개 최종 결과물 확인 : https://www.camp-us.ga 우리가 진행한 프로젝트는 전국 캠핑장 추천 플랫폼 'CampUs'이다. campUs에서는 전국 3000 여개의 캠핑장 정보를 제공하고, 사용자의 위치에 따라 가까운 캠핑장을 추천해주는 서비스를 제공한다. 각 캠핑장별로 이용 후기를 남기고, 커뮤니티를 통해 캠퍼들간의 유용한 정보를 교류할 수 있다. ⌛ 진행기간 2022.01.18 ~ 2022.03.01 (5주) 📌 팀 구성 (TEAM COOP) 프론트엔드 ..

작업 내용 리뷰 리뷰 길이에 따라 더보기 버튼 생성 기존 Figma 디자인 상에서는 리뷰가 길어지면 3줄 이상이 되었을 때 ...으로 표시하도록 하였는데, 생각해보니 그렇게 하면 리뷰 내용 전체를 아무도 볼 수 없는 UI가 되어버렸다. 이 부분을 modal로 처리할 지, 더보기 버튼을 추가할지 고민하다가 인스타그램을 참고하여 일정 텍스트 길이보다 크면 더보기 버튼이 나타나고, 더보기 버튼을 클릭하면 전체 작성 내용이 표시되도록 수정하였다. 더보기 전 더보기 후 👍시도 // ReviewsList.jsx import React, { useState, useEffect } from 'react'; import './ReviewsList.styles.js'; const ReviewsList = ({ review..

작업 내용 리뷰 antd 커스텀 우리 프로젝트의 메인 컬러는 햄버거바에서 보이는 바와 같이 연두색에 가까운 초록색인데, React UI library를 앤트디자인으로 사용하였더니 default컬러가 저런 파란색으로 나왔었다. 우리가 직접 css한 부분은 초록색인데 antd를 사용한 부분만 푸릇푸릇하니 통일성이 없어보여 이 부분을 우리가 커스텀하기로 했다! 👍시도 less를 글로벌로 설치한다. npm i -g less antd.less 파일을 불러오기 쉽도록 터미널로 node_modules에 직접 들어가서 커스텀 코드를 작성할 less 파일을 생성한다. cd node_modules/antd/dist touch my_custom.less 디렉토리의 node_modules/antd/dist 경로에 가보면 my..

작업 내용 리뷰 작성한 리뷰 / 알림 등의 업데이트 날짜포맷 변환 대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리의 년.월.일 표현 방식과는 다른 방식으로 기본적인 날짜 표현을 한다. 우리의 프로젝트에서 response로 받은 데이터를 보면 날짜 포맷을 아래와 같이 넘겨주는 것을 확인 할 수 있다. createDate : ""2022-02-27T09:47:05.256725" 하지만 UI에 이대로 표현된다면 사용자가 보기 불편할 뿐만 아니라 ms까지 표시되어 불필요한 정보를 보여준다는 생각이 들어, 이 날짜포맷을 변환해 보기로 하였다. 👍시도..