최종프로젝트 8일차 - 끝도 없는 API 수정, 리엑트 디자인 추천 사이트

최종프로젝트 8일차 - 끝도 없는 API 수정, 리엑트 디자인 추천 사이트

 

 

금방 끝날 줄 알았던 API 수정이 아직도 끝나지 않았습니다. 그리고 스벨트에서 리엑트로 변경되고 모두가 혼란이 왔을 때쯤 튜터님은 디자인적으로 도움될만한 사이트 몇개를 소개해주었습니다.

 

 

최종프로젝트 8일차

 

최종프로젝트 7일차 - 스벨트에서 리엑트로, 쿠키와 세션의 차이

전날 작업한 기록입ㄴ다

 

 

전날 담담 튜터님과의 면담 이후 프론트엔드를 스벨트에서 리엑트로 옮기게 되었습니다. 일주일간 스벨트 공부하며 레이아웃까지 만들어놨는데 그걸 다 허사로 만들어린게 허무하긴 했지만 리엑트로 만들어 놓는게 취업에 더 유리하다는 튜터님의 조언에 따라 리엑트를 준비하게 되었습니다.

 

그리고 제가 담당한 API의 테이블 구조를 바꾸라는 조언도 들었습니다.

 

필자가 담당한 API

 

 

최종프로젝트 7일차 - 스벨트에서 리엑트로, 쿠키와 세션의 차이

자세한 내용은 위 페이지에 기록되어 있습니다

 

전날 들은 조언을 바탕으로 만들어놨던 API를 전반적으로 수정하게 되었습니다. 그래도 한 번 만들어 놓은 거니까 금방 끝나겠지하고 있는데 생각보다 오래 걸리고 있습니다. 글쓰는 지금 거의 다음날을 바라보는 시간까지 왔습니다. 왜 이렇게 됐나 생각해보니 다른 팀원과의 관계 지정을 안해 놓을게 가장 컸었습니다.

 

초기 DB 세팅할 때 자신이 맡은 테이블만 각자의 AWS RDB에 넣고 테스트하다보니 테이블간 관계를 설정하지 않은 채 개발을 하게 되었습니다. 그렇게 개발하다가 github에 점점 합쳐지면서 어제 전 팀원 테이블이 깃 레포지토리에 쌓이게 되었습니다. 그 자료를 pull 받고 다시 작업하면서 관계 설정을 하고 진행했어야 했는데 계속 초기 개발하던것처럼 없는 값에 대해 임의로 집어넣고 하다가 나중에서야 다른테이블과 연결하는 작업을 해야한다는걸 깨닫게 되었습니다.

 

임시로 넣은 데이터를 다른 테이블에서 가져오는 코드로 변경하면서 관계 설정도 하다보니 여기에 시간을 많이 쓰게 되었습니다. 그래서 정작 수정하려 했던 API는 나중으로 미뤄지게 되었습니다. 

 

그래도 현재 80%는 완료한 상태이니 다 끝내고 잠을 자려합니다.

 

 

리엑트 디자인 추천 사이트

 

튜터님은 오늘 저녁 잠깐 필자의 팀 자리에 와서 현재 상황을 보고 갔었습니다. 필자는 위의 API 작업한다고 리엑트를 1도 다뤄보지 못했지만 다른팀원이 어느정도 기존에 만든 스벨트 코드 가지고 리엑트를 만들었습니다. 그걸 보여주고나서 몇가지 조언 및 응원과 함께 리엑트 개발에 있어서 유용한 사이트 몇 개를 소개해주었습니다.

 

1. semantic UI React

Introduction - Semantic UI React

 

이 사이트는 다양한 리엑트 디자인 코드를 제공하고 있습니다. 버튼이나 아이콘 같은 다양한 엘리먼트 디자인도 제공하고 무엇보다 페이지 레이아웃도 제공하는 점이 좋아보였습니다.

 

아래는 semantic UI React를 활용하기 위해 참고하면 좋은 사이트 입니다.

Semantic UI React 시작하기

 

 

2. React Bootstrap

 

React Bootstrap | React Bootstrap

 

내일배움캠프 처음 시작할 때 웹개발하면서 부트스트랩을 사용한 적 있었습니다. 그래서 그런지 사이트 화면이 꽤나 친숙했습니다. 

 

부트스트랩 쉽게 사용하는 방법 - 웹사이트 제작 필수 프로그램

 

 

3. Ant Design

 

Ant Design - The world's second most popular React UI framework

 

깔끔한 디자인이 인상적인 사이트 입니다. 

 

 

다양한 컴포넌트 제공은 물론이고, 페이지를 둘러보다가 아래처럼 중국어가 보일수도 있습니다. 이 사이트 만든사람이 중국인가 대만사람이라 하던데 이 정도는 그냥 영어로 바꿀법도 싶었는데 생각해봤습니다.

 

 

언어적인 이슈는 그렇다쳐도 막상 둘러보면 꽤 보기좋은 디자인들이 많습니다.

 

 

 

4. React Rainbow Component

 

튜터님 개인 피셜로 가장 보기 좋은 디자인들이 많은 사이트라 했습니다. 그것도 그럴법 한게 정말 별의 별 디자인이 있있었습니다. 위의 세 사이트에서 보지 못했던 Presence Map도 보이구요.  

 

 

각종 아이콘과 채팅 화면도 제공하고 있었습니다.

 

 

아직 리엑트 공부도 안해놔서 코드 읽을 수도 없는데 이런 사이트들을 보고 나니 왠지 금방 배울수 있을 것 같은 기분이 듭니다. 물론 아직 리엑트 코드를 안봤기 때문이겠죠.

 

▼ 이전 진행한 프로젝트들 ▼

 

내일배움캠프 Node트랙 심화 프로젝트 역할 및 진행사항

 

내일배움캠프 NestJS 프로젝트 코드리뷰 - 온라인 공연 예매 서비스