데모는 가볍게 **어떤 것을 의도해서 어떤 것을 만들었는지** 공유해주세요.
덧붙여서 팀활동을 하면서 ***1. 기술적인 도전, 2. 힘들었지만 극복했던 에피소드, 3. 가장 잘한 일이 무엇인지*** 팀 활동에서 자랑꺼리 1-2개를 소개해주세요.

<br>

# ❤️ 12팀 `╰(*°▽°*)╯` ❤️

<br>

# 0. 일단 데모 화면 👉 🧡 [12팀 데모 바로가기](http://13.209.60.60:5000) 🧡

## 0-1. 구현된 기능

* GET
* POST (새로운 카드 등록)
* PUT (카드 내용 수정)
* DELETE (카드 삭제)

## 0-2. 구현하지 못한 기능

* Drag & Drop으로 카드 옮기기 *- API는 다 만들어주셨는데 FE에서 해내지 못함,, 😭*
* action 발생 시 로그 view가 바로 렌더링 되지 않음 (새로고침 해야 함)
* (추가 구현 사항인) column 추가, 삭제 기능

<br>

# ✨ 1. 기술적인 도전 `༼ つ ◕_◕ ༽つ`

* **[BE]** 어그리게이트 루트로 데이터 관리
* 유저를 어그리게이트 루트로 두고, 유저가 여러개의 컬럼을 가질 수 있게 설계해보았음
* 또, 컬럼은 여러개의 태스크를 가질 수 있게 설계했다.
* 그래서 유저아이디만 있으면 컬럼목록을 불러오거나 저장할 수 있었다.
* 또한, 컬럼이나 태스크 목록을 리스트로 관리하는 기능도 추가해보았다.
* 그래서 태스크를 이동시키는 API를 구현해볼 수 있어서 재미있었다
* **[BE]** Valid 사용
* 컨트롤러에서 받는 데이터를 검증하고 싶었다.
* `@Valid` 어노테이션과 DTO를 조합해서 편하게 검증해볼 수 있었다
* 검증이 실패하면 발생하는 BindException에 대한 ExceptionHandler를 추가해서 예외처리 기능도 추가해보니 편했다.

* **[FE]**
* React... 🤩 이번 프로젝트에서 엄청난 도전이어따..!
* 도전까지는 아닌데 axios를 사용해봤다.
* data를 전송할 때, default content-type이 json이라고 생각하고 post를 보냈는데, data가 parsing이 안됐는지 null값이 나왔다.
* 'content-type': 'application/x-www-form-urlencoded'으로 변경
* qs모듈의 stringify메서드로 보낼 때 string으로 보냈다.
* JSON.stringify도 될 것 같은데...
* 급하게 작동하게 하느라 qs모듈이 정확히 어떤 모듈인지 아직 모른다.

<br>

# 🤷‍♀️ 2. 힘들었지만 극복했던 에피소드

* **[BE]** DB 설계 변경, 그러나 DTO를 쓰고 있어서 괜찮았다
* h2에서 mySql로 DB 변경.
* User, Column이란 테이블명이 mySql에서는 예약어로 사용되어 충돌 문제 발생.
* User, Column, Task 클래스명을 전부 rename.
* response는 DTO로 했기 때문에 FE에서 쓰실 response 데이터 포맷이 수정되지 않음.

* **[FE]** action에 따라 View를 새로고침 없이 렌더링할 때 서버랑 통신하는 걸 잘 몰라서 삽질하고 있었다.
* Nas가 같이 봐주면서 도와주셔서 `.then`을 사용해야 한다는 걸 깨달아서 극복했음!!!!!!
* 실제로 서버와 통신하면서 `.then`으로 성공, 실패 처리를 해보니 이제 확실하게 알겠다.

<br>

# 🎉 3. 팀 활동에서 자랑거리

* **[ALL]** 마일스톤 사용
* Spring Data JDBC 붙일 때, 어떤 순서로 작업할지 미리 정했음
* 정한 내용을 그대로 이슈로 등록하고 마일스톤으로 묶었음
* 하나씩 해결할때마다 마일스톤의 진척도가 올라가는 것을 보고 행복했음
* **[ALL]** 프론트랑 백엔드랑 프로젝트를 통해 진행상황을 칸반보드로 관리한 것
* 서로 어떤 일을 하고 있는지 보여주고 싶었음.(진행상황 공유)
* 그래서 깃헙의 Project기능을 이용했다.
* **[ALL]** 12팀의 자랑 : 나스와 정과 라쿤과 오톰
* 다들 리액션 명장들이시다
* 같이 할 수 있어서 너무 좋았다.
* 나스랑 정이 적은 것 같은데 무지개반사다.🌈

<br>

# 4. 구현시 어려웠던 점

**[FE]**
* component 및 state 설계가 어려웠음 -> 일부 컴포넌트 렌더링 최적화 작업이 안됨
* 취소 확인 팝업창 렌더링시 전체 렌더링
* UserActionCardList 슬라이드시 헤더도 함께 렌더링됨
* 컴포넌트 별로 데이터 상태를 분리해서 관리하는 방법으로 해결 시도
* props drilling 문제
* state 값에 함수를 선언하고, 선언된 함수에 클로저를 이용해서 data를 전달하는 방식으로 해결 시도
* 컴포넌트가 사라질때 fade out 애니메이션 구현(구현 실패)
* 애니메이션에 상태를 주고, 상태가 바뀌는 시점을 잡아서 애니메이션이 진행될 동안 setTimeout을 이용하려고 했는데 실패

<br>

# 5. 인상 깊었던 학습 포인트

**[FE]**
* 기능단위 컴포넌트 설계 및 구현
* 클로저를 이용한 데이터 전달
* axios.get().then() 등을 이용한 비동기 처리 방식을 통한 백엔드와의 통신 방식 이해
* request와 response 헤더, 바디를 통한 http 통신 방식의 이해
* [라쿤] 전체적으로 리액트를 학습하면서 진행해야 해서 버거운 면이 있었지만, 그동안 학습한 것들을 사용해 볼 수 있었다는 점에서 매우 재미가 있었다. 바닐라 기초를 더 확실히 쌓아야겠다고 생각했다. (네이밍 잘하기, 코드 읽기 쉽게 짜기)
* [어텀] 리액트 너무 신기하고 편리한데 아직 익숙해지지 않아서 주말동안 이것저것 만들어보면서 연습해봐야겠다. 한 1년 전 쯤 바닐라JS도 잘 모를 때 리액트를 접했을 때랑 비교해보니 이해도가 확연히 달라서 *나 성장했구나..🥺* 라고 느꼈다.