안녕하세요.
당구 포탈 사이트 하이런의 어드민 페이지 개발에 참여하였습니다.
본 프로젝트는 회사 기밀상 자세히 설명하는 것이 힘든점 양해 부탁드립니다.

📒 프로젝트 소개

개발기간 : 2020.12.14 ~ 2021.01.07 (25일)

개발인원 :
FRONT-END: 김태현, 신세원, 안상혁, 안해수, 엄문주,

프로젝트 목표 :

• 실제 회사에서 실무가 어떻게 이루어지는지 그 흐름을 파악한다.
• 새롭고 러닝커브가 있는 기술을 배우는 만큼 제대로 익히기위해 집중한다.

사용한 기술 :

• Type Script
• Ant Design
• Mono Repo
• Lerna
• React Hooks
• React Router
• Axios
• Framer Motion
• Beautiful DnD
• Styled Component
• Theme
• Mixin

구현 사항 :

• Ant Design을 이용하여 메인 페이지와 뉴스 관리 페이지 레이아웃 구현
• Framer Motion을 이용하여 로딩 애니메이션을 구현, API 통신시 활용
• Beautiful DnD를 이용하여 드래그 앤 드랍 애니메이션 구현
• Ant Design을 이용하여 뉴스 리스트 테이블 구현
• Link와 Map 메소드를 이용하여 라우팅 기능구현
• Axios와 SwaggerAPI를 이용하여 API 통신
• Mono Repo와 Lerna를 이용하여 패키지 관리
• Slack, Asana, Swagger API를 이용하여 팀 프로젝트 진행

✏️ 후기

📝 아쉬운 점

기획서도 자주 바뀌고 아무래도 스타트업 특성상 체계적이지가 못해서 이 부분이 좀 힘들었습니다.
타입스크립트도 어렵고 앤트디자인도 어려운데 이 둘을 섞어서 코드를 짜려니 2배로 어려웠습니다.
새로운 기술을 접목시켜 코드를 짜는데 두려움이 없어지도록 노력해야겠습니다.

🤔 문제와 해결

❓문제 : Ant Design의 테이블 컴포넌트를 가져와서 이미지를 넣으려고 헀는데 나오지가 않았다.
❗️해결 : 공식문서를 읽고 기본으로 제공해주는 columns 배열에 render 라는 키 값을 주고 value로 img 태그를 삽입 하여 에러를 해결하였다.

❓문제 : Type Script 타입을 지정하는데 useState 훅에 기본값으로 빈 배열을 넣었더니 에러가 떴다.
❗️해결 : string 값을 state로 저장하므로 <string>[] 형태로 타입을 지정해주어 에러를 해결했다.

🙋🏻 팀원들에게

처음엔 말도 많이 못해본 분들과 한 팀이 되어버려 걱정이 좀 됬었는데 이제는 그 누구보다 많이 친해져서 든든한 동료가 되었습니다.

저를 리액트 네이티브의 세계로 초대해주신 상혁님, 솔선수범 궃은일 도맡아서 하는 우리의 리더 세원님, 사랑스러움 그 자체, 문블리 문주님, 다 잘하면서 항상 징징대는, 사람 약올리는 듯한 해수님,
지난 1달간 정말 수고 많으셨습니다.
이제 기업협업을 마무리 하고 우리 모두 취업전선에 나가게 되는데 현장에서 좋은 동료로 다시 만났으면 좋겠습니다.