Review

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까지 표시되어 불필요한 정보를 보여준다는 생각이 들어, 이 날짜포맷을 변환해 보기로 하였다. 👍시도..

이번 주 작업 내용 리뷰 구글 oauth연동 저번 주말에 우리 팀 모두 모여 firebase와 구글 oauth 연동하는 것을 마무리 지었다. 처음에는 package.json에 proxy로 백엔드 주소를 넣어 사용했었는데 이상하게도 계속 localhost3000으로 가게되서 창엽님이 프록시미들웨어를 사용하셔서 완료하셨다. 프론트, 백엔드 구분할 것 없이 모두가 애먹던 부분이라 로그인, 회원가입이 모두 정상적으로 처리된 것을 확인했을 때 모두 매우 감격했다. 마이페이지 현재는 나는 마이페이지 쪽 작업을, 창엽님은 검색페이지쪽 작업을 도맡아 하고 있는 중이다. 마이페이지쪽 작업을 하면서 정말 고려할게 많다는 것을 느꼈다. 지금은 백엔드 api 개발이 완료되지 않아 아직 연동하지 못한 상태인데 json-serv..

오늘 수업에서 다룬 내용 오늘 수업에서는 지난 목요일에 과제로 내주신 DB 및 API 명세서를 보고 피드백해 주시는 시간을 가졌다. 1. PATCH vs PUT 참고 : https://programmer93.tistory.com/39 HTTP Method 중에 PUT과 PATCH는 리소스의 업데이트를 의미한다. 리소스를 업데이트 한다는 점에서는 같은 역할을 하는 메소드처럼 보이지만 두개의 요청에는 약간의 차이가 있다. PUT : 리소스의 모든 것을 업데이트 한다. PATCH : 리소스의 일부를 업데이트 한다. 예를 들어, 아래와 같은 회원이라는 리소스가 있을 때 회원 (member) 1 이름 (name) 홍길동 나이 (age) 18 성별 (gender) M ✅ PUT PUT으로 요청을 보내면 PUT /m..

1주차 목요일(1/20)에는 기능명세서와 페이지 기획서를 작성하는 과제가 있었다. 기능명세서와 페이지 기획서는 이전에도 내가 작업해본적이 있기 때문에 그리 어렵게 느껴지지 않았다. 무엇보다 팀원들이 피드백도 빠르시고, 매우 협조적이어서 순탄했던 것 같다. 기능명세서는 notion을 이용해서 작성했는데, 6주 안에(실질적 개발기간은 4주) 이걸 다 만들 수 있을까? 싶을 정도로 다양한 기능들에 대한 아이디어가 나왔었다. 멘토님의 피드백을 받고 1,2차로 나눠서 개발하기로 하고 1차 개발 분량을 다시 산정했다. 페이지 기획서(UI 기획서)는 와이어프레임과 비슷한 형태여서 쉬웠다. 과연 이 기획서를 보고 디자이너님이 어떻게 해주실지 궁금해졌다.. 기능명세서와 페이지 기획서 모두 멘토님이 아주 잘했다고 칭찬해 ..

✌️ 지원 동기 회사에서 React로 MBP 프로젝트를 진행하면서 여러 의미로 '아 이건 아니다..'라는 생각이 들었다. 갑작스럽게 리액트로 개발하기로 결정되기도 했고, 리액트 개발 경험도 없는데다 같이 프론트엔드 개발할 동료도 없다니 총체적 난국이었다. 일이 닥치다보니 하게되긴 하지만 이걸 나중에 어떻게 리팩토링하지?, 원래 프로젝트가 정상적으로 진행될 떄는 어떻게 다르지? 라는 고민이 들었고, 현 상황에서 가장 합리적인 해결방법은 내 개발 실력과 경험을 쌓는 것이었다. 다른 사람들은 어떻게 코드를 짜는지도 궁금했다. 그렇게 서치하다가 리액트 기반으로 6주간 협업 프로젝트 인원을 모집하는 글을 보게 되고 FrontEnd로 지원하게 되어 이렇게 프로젝트 리뷰를 쓰게 되었다. 😎 수업 소개 전문 멘토 개발..