위코드 부트캠프 3개월차, 기업협업 인턴쉽에 참여하게 되었다.
🏙 Uiti
내가 가게 된 기업은 빅데이터를 기반으로 주거 목적의 부동산을 클라이언트와 연결해주는 스타트업 '위티'라는 기업이었다.
기업 위티는 집현전이라는 Prop-tech 서비스를 운영하고 있으며 현재는 당구 포털 앱 프로젝트를 동시에 진행하고 있다.
🤔 Prop-tech란?
AI와 Big Data 등 신산업 기술과 부동산의 융합된 새로운 기술 분야
🎱 이커머스 - 어드민 페이지 개발
📌 기존에 진행되었던 이커머스 앱을 기반으로 어드민 페이지를 구현한다.
유저관리, 랭킹, 뉴스, 영상, 인테리어, 클럽, 견적요청 등 전반적인 어드민 페이지 구현이 목적이다.
🗓 프로젝트 기간
12월 14일 ~ 1월 7일 (약 한달 간 진행)
👩💻 기술 스택
- HTML, CSS
- JavaScript
- TypeScript
- React
- Hooks
- Styled Component
- Ant Design
- MonoRepo
🏃♂️ 내 다짐과 목표
- 할 수 있는 것부터 차근차근 하면서 온전히 내 것으로 만들기!
- TypeScript 기본기 익히고 적용시켜보기
- 실무 야무지게 익혀보기
- 소통의 기술 터득하기
- Libery를 활용해보고, 시도해보지 않은 기술에 대한 두려움 없애기
- 에러에 대한 두려움 줄이기...
👭 협업 툴 사용
- Slack - 이건 많이 사용해봤으니까!
- Swagger - 스웨거 진짜 너무 신세계다. Swagger만 있으면 언제 어디서든 api를 붙여볼 수 있다. Http 메소드형식을 확인하고 try it out 클릭! execute를 실행시키면, 데이터가 어떤 구조로 들어오는지 확인할 수 있다.
api 붙일 때는 너무 짜릿해... - Asana - 이건 이전 프로젝트 때 사용했던 트렐로처럼 진행상황을 체크하고 공유하는 협업 툴인데, 진행하기 급급해서 그때그때 확인하지 못하여 아쉬운 면이 있다. UI도 깔끔해 다음 번에는 꼭 제대로 사용해보고 싶다.
- GitLab - 실제로 배포해야 하는 사업 아이템이기 때문에 ssh키를 생성받고 적용시켜야 gitlab을 사용할 수 있다. ssh키 생성하고 적용하기
업무 진행
매일 아침 스크럼 회의
매일 아침마다 간단하게 스크럼 회의를 진행한다.
전날의 진행사항과 이슈사항, 오늘 할 일을 간단하게 팀원들과 공유하고 소통하는 시간이다.
항상 스크럼 전에 간단하게 어제의 일과, 오늘 해야할 일을 정리하다보니 내가 해야할 일이 조금 더 명료해지고 선명하게 다가왔다.
이슈 사항
이슈 사항은 notion에 가이드되어 있는 대로 진행했다.우선, gitLab repo QnA 리스트에 동일한 이슈가 등록되어 있지 않은 것을 확인하고, 팀원들과 이슈를 공유하고 같은 이슈가 발생되었는지 확인한 다음에 회사 내의 QnA 양식에 따라 이슈사항을 작성했다.
결과
Create: 영상 업로드 구현
- '영상 올리기' 클릭시, 업로드하는 모달 창 구현
- 제목 입력, url입력 후 불러오기 버튼 누르면, url이 유효한 유튜브 링크면 썸네일을 추출하여 띄워준다.
- 제목과 url validation check 구현
- 영상 올리기 click시 모달 창 없어지면서 페이지 화면이 리렌더링된다.
Read: 영상 목록 조회
- swagger 이용하여 data 받아와, list페이지 목록 조회 기능 구현
- list item 클릭시, 모달 창 띄워주며 해당 item을 모달창에서 상세히 보여준다. 영상을 재생하고, 영상에 대한 댓글, 조회수, 게시일, 수정일 등을 불러온다.
Update: 영상 업로드, 수정 시 업데이트 기능 구현
- 영상을 업로드 및 수정 시, 바로 데이터를 백엔드로 보내고 프론트 단에서 업데이트
- 수정 버튼 클릭시, 기존의 데이터를 인풋 박스에 불러오고, 제목, 영상 url을 수정할 수 있게 만들었다.
- 영상 수정 validation check
Delete: list item 삭제 및 댓글 삭제
- 삭제 클릭시 해당 게시물을 삭제
- 모달창 안에 confirm(삭제하시겠습니까? 의 내용을 담은) 모달 생성 기능 구현
- detail 모달 진입 후, 해당 영상에 대한 댓글 삭제 기능 구현
그 외: 리스트 순서 변경 기능
- 버튼 클릭시, 리스트 순서 변경
