1. 커뮤니티 서비스
- 협업하는 회사 케어마인드와 함께 의료인 대상 커뮤니티를 만들기 위해, Next.js와 TypeScript를 활용해 링크드인을 클론 코딩
1-1. 프로젝트 소개
- 프로젝트 클론 사이트 소개 : Next.js와 TypeScript를 활용해서 링크드인을 클론코딩했습니다.
- 특징 : 로그인 회원가입부터 프로필 수정, 글 작성 UI와 로직 구현
- 프로젝트 목표 : Next.js와 TS활용
- 진행기간 : 2023년 11월 6일 ~ 2023년 11월 30일
- 프로젝트 참여자 : 프론트2 / 백엔드2
2. 적용 기술 및 구현 기능
적용기술 :
Front-End : Next.js, TypeScript, React.js, Styled-componenets, Figma
2_1. 회원가입 / 로그인
2_2. 피드페이지
2_3. 친구 신청 확인 페이지
2_4. 루틴 만들기
- 프로필 수정
- 자기소개
- 경력 생성 / 수정 / 삭제
- 학력 생성 / 수정 / 삭제
- 프로젝트 생성 / 수정 / 삭제
3 프로젝트 진행 요약
3_1 팀에서 담당한 역할 + 대략적인 히스토리
- FE 개발자로서, 유저 로그인 회원가입 프로필과 관련된 ui 구성과 로직을 구현 했음.
- Next.JS, TS를 통해 개발을 진행했으며, 협업 기업에서 사용하고 있는 MvvM 디자인 패턴을 적용했음.
3_2 진행하면서 좋았던 점
- Next.js라는 프레임워크과 TypeScript를 적용해서 더욱 용이한 개발환경에서 작업해서 좋았음.
- 현업 개발자의 코드 리뷰와, 디자인 패턴 리뷰를 통해서 더욱 성장할 수 있는 시간이 됐음
3_3 진행하면서 아쉬웠던 점
- Next.js와 TypeScript를 배우는데 시간을 소요하다보니, 기획을 하기보다는 클론코딩에 가까운 결과여서 아쉬웠음
3_4 트러블 슈팅 :
1. 프로필 수정 문제
[문제 사항]
=> 프로필 수정 모달창을 컴포넌트로 만들어서 적용했음. 모달창은 기본적으로 띄워져있는데, display를 이용해서 모달창을 열고 끄는 로직으로 작성했음. 이로 인해 문제가 발생함. 내용을 수정하고 그냥 나가기 버튼을 누르면, 다시 열었을 때 그 수정 내용이 그대로 남아있는 문제가 있었음.
[결과]
=> 모달의 내용은 그대로 남아있기 때문에, 모달을 다시 열 때 백엔드로부터 해당 내용을 다시 받아오는 것으로 수정함. 이를 통해서 모달창을 열 때마다, 백엔드와 통신을 진행했고 문제를 해결할 수 있었음. 모달창을 열 때마다 통신을 하는 덕분에 모달창의 최신화도 이끌어 낼 수 있었음.
2. MvvM, TypeScript 적용
[문제 사항]
=> React 작업 시, 백엔드와 통신 부분과 UI 부분 모두를 한 페이지에 작성했었음. 이로 인해 유지 보수 관점에서 다른 사람이 코드를 읽기 힘든 상황에 쳐함. 유지 보수, 의존성 감소를 위해 기존에 한 페이지에 작성했던 코드들을 새로운 디자인 패턴으로 바꿔야 됐음. 그리고 코딩 시, 협업하는 개발자로 인한 의도치 않은 데이터 변경을 막기 위한 수단이 필요했음.
[결과]
=> 데이터와 통신하는 Model , 데이터를 관리하는 View-Model, UI를 보여주는 View로 분리해서, MvvM 디자인 패턴으로 코드를 작성함. 해당 패턴으로 인해서 백엔드와 통신 시, 신경 써야 할 범위를 직관적으로 알 수 있게 됨. TypeScript를 통해서 의도치 않는 데이터 변환이 일어나지 않게 함.
4 총평
- Next.js TS 그리고 디자인 패턴을 사용할 수 있어서 굉장히 많은 성장의 시간이 되었다. 앞으로도 해당 프레임워크와 방법들을 활용해서 용이한 개발을 하려고 한다.
