2차 프로젝트를 끝내고 그동안 작업했던 내용과 과정을 돌아보며...
남의집 프로젝트
취향 공유 커뮤니티 서비스 남의집을 모티브로 제작하게 된 남의집(GUYSHOUSE) 팀 프로젝트입니다.
짧은 프로젝트 기간동안 새로운 기술을 사용하여 만들어야 했기에 몇몇 기능들을 제외 및 변경하였습니다.
개발 인원 및 기간
개발기간 : 2021/12/13 ~ 2021/12/24
개발 인원
Front-End 3명 : 김태영, 김상훈, 황성재
Front-end github 링크
Back-End 3명 : 고민혁, 박세용, 유민혁
적용 기술 및 구현 기능 적용 기술
Front-End : JavaScript, React.js, SASS, React-router-dom
Back-End : Django, Python, MySQL
Common : Git, Github, Slack, Trello, Notion
[프로젝트 영상] https://www.youtube.com/watch?v=F6Sg-UZp1NY&feature=youtu.be
내가 구현한 기능
Kakao social Login
- kakao developers 문서 참고
- Kakao SDK for JavaScript를 이용한 로그인,로그아웃, 연결 끊기 기능
- 카카오 access_token을 fetch로 전달 및 로그인 토큰 localStorage에 저장
- .env에 환경변수 저장 및 사용
예약 페이지
- textarea를 map()으로 반복 및 textarea Auto Height 적용
- textarea 내부 텍스트 Count
- state의 값에 따라 조건부 버튼 활성화
- 동적 라우팅, useParams 사용하여 데이터 가져오기
Mypage
- state 값을 변경하여 3가지 요소 중 한 가지만 active되도록 onClick 이벤트 작성
아쉽지만 끝까지 해낼 수 있었다
각자 잘 하더라도 소통은 중요하다
이번 프로젝트는 1차 프로젝트를 경험하였기 때문에 전체적인 기획과 초기세팅은 어렵지 않게 진행하였다. 그러나 새로운 기술을 사용하게 되었고
팀의 성격이 다르다보니 정리나 프로젝트 진행에 있어서는 다소 차이가 있었다. 게다가 각자 한번씩 경험했던 것을 하다보니 1차에 비해 소통이 조금 뜸해졌는데 그럼에도 각자 맡은 일은 잘 해나갔다. 문제는 그 이후 서로 만든 것들을 merge/ 백엔드와 연결하면서 중간중간 소통하지 않았던 부분들이 문제가 되어 돌아왔다.
다행이도 문제를 찾은 후에 빠르게 문제를 고치고 다시 소통하여 프로젝트를 끝까지 해냈지만 1차 프로젝트에서 소통을 강조하였는데도 2차에서 이렇게 행동한 것에 대한 아쉬움을 느꼈다.
이번 프로젝트에서 좋았던 점은
1. 소통이 부족했지만 이를 인식한 후 빠르게 개선하여 프로젝트를 끝낼 수 있었다는 것
2. 외부 API를 사용하여 로그인 기능을 만들어 본 것
3. 기획 부분에서 1차와 다르게 전체적인 팀 스케줄과 시간을 확인하고 필수와 추가 기능을 나누어 일정을 관리한 것
아쉬운 점
1. 추후 빠르게 개선하였지만 소통이 부족하여 일정이 얼마남지 않은 상황에서 문제들이 생긴 것
2. 여러 기능을 만들다보니 한 기능을 더 깊게 알아보지 못한 것
기록으로 남겨야 나의 것이 된다.
외부에서 API를 받아와 사용하기...
웹사이트를 제작할 때 모든것을 직접 만들지는 않는다고 한다. 대부분은 라이브러리와 같은 이미 만들어진 것을 가져와서 사이트에 맞게 변경하여 사용하는데 그런 종류 중 하나로 이번에 제작한 카카오 소셜 로그인이 있다.
기능부터 레이아웃까지 모든 것이 만들어져있고 그것을 가져다 쓰기만 하면 되는데 이게 그냥 control c/v로 되는 것은 아니다보니 여러가지 시행착오가 있었다.
게다가 같은 로그인 기능이지만 REST API, Javascript 등 만드는 방법 또한 여러가지라서 어떤 것이 나의 상황과 맞는 것인지도 확인하고 사용해야 했다.
이번에는 Javascript 키를 사용했는데 사용한 이유는 팝업으로 사용하기 위해서였다.
내가 공식문서를 재대로 이해한 것이 맞다면 REST API와 Javascript를 사용할 수 있는데 이 중에서 팝업으로 만들 수 있는 것은 후자에 속했다.
선택한 요소 강조
Textarea의 높이를 변경하기 위해서는 css가 아닌 js를 사용해야 한다고 합니다.
게다가 크롬에서 Textarea tag를 사용하면 내용에 따라 높이가 늘어나는게 아닌 스크롤이 생긴다.
const [textColor, setTextColor] = useState([true, false, false]);
const changeColor = index => {
const defaultState = Array(3).fill(false);
// 함수가 실행될 때 Array(3)은 [undefined, undefined, undefined]을 만들고 .fill(false)은 3개의 값을 false로 채운다
defaultState[index] = true;
// 인자로 받은 index의 값을 true로 바꾸어 준다
setTextColor(defaultState);
};
--------------------------------------------------------------------------
return (
<ReservationListContainer>
{DEFALUT_DATA.map((list, index) => {
return (
<ReservationButton
onClick={() => changeColor(index)}
textColor={textColor[index]}
key={index}
>
<Count textColor={textColor[index]}>{list.numbers}</Count>
{list.title}
</ReservationButton>
);
})}
</ReservationListContainer>
--------------------------------------------------------------------------
const Count = styled.span`
margin-bottom: 8px;
color: ${props => (props.textColor ? 'orange' : 'gray')};
`;Textarea Auto Height
Textarea의 높이를 변경하기 위해서는 css가 아닌 js를 사용해야 한다고 합니다.
크롬에서 Textarea tag를 사용하면 내용에 따라 높이가 늘어나는게 아닌 스크롤이 생기게 되어있다
const MAX_ROW = 20;
const TEXTAREA_LINEHEIGHT = 16;
export default function TextArea({
id,
context,
checkbox,
answers,
setAnswers,
}) {
const [textHeight, setTextHeight] = useState(5);
const changeInput = event => {
const { name, value } = event.target;
const currentRows = ~~(event.target.scrollHeight / TEXTAREA_LINEHEIGHT);
const previousRows = event.target.rows;
if (currentRows === previousRows) {
event.target.rows = currentRows;
}
if (currentRows >= MAX_ROW) {
event.target.rows = MAX_ROW;
}
setTextHeight(currentRows < MAX_ROW ? currentRows : MAX_ROW);
setAnswers({
...answers,
[name]: value,
});
};
**뒤늦게 알게 된 사실**
위와 같이 작성하게 되면 자동으로 높이가 늘어나지만 텍스트를 지웠을 경우 높이가 줄어들지 않았다;;
이 부분은 추후 수정해야겠다.~~ 연산자
Math.floor()와 동등하게 쓰이는 연산자
자세한 내용은 다른 글에 작성하여 링크로 남기겠습니다.
