프로젝트 소개
- 준비물까지 함께 보내주는 온라인 취미 수업 제공 서비스인 '클래스101'과 비슷한 서비스를 만드는 프로젝트
- 프로젝트 기간 : 10. 5 ~ 10. 16 (2주)
- 개발인원 (총 6명) : 프론트엔드 (권영빈, 김우석, 문상호, 배규덕) / 백엔드 2명 (김성진, 이수현)
주요 기능 (+영상)
1. 메인 페이지 (모달창, MD추천 클래스, 모든 클래스, *새로 생성한 클래스)
2. 크리에이터 센터 (새로운 수업 생성)
사용 기술
Front-End
- JavaScript (ES6)
- React.js (CRA, functional component 사용)
- Styled-components
- Git / Github
- AWS S3
라이브러리
- React-router-dom
- React-slick (슬라이더)
- class 101 UI library
- Redux
내가 맡은 역할
나는 메인 페이지와 새로운 수업 생성 기능 중 한 페이지를 맡았다.
메인 페이지
- 총 3개의 백엔드 endpoint 데이터를 불러와서 출력
- react slick을 이용한 메인 슬라이드창 구현 (데이터 통신)
- 수업 신규 생성시 데이터 불러와서 표기해주기
수업 생성 기능 (크리에이터 정보 부분)
- 프로필 사진 등록시 AWS S3에 바로 등록되어 url 추출
- 기타 input (SNS 정보, 소개, 해시태그)등의 입력
- 해당 데이터의 백엔드 전송
잘한 점, 아쉬운 점
잘한 점
1. 계획적
1주차는 메인 페이지와 기타 기능을 빠르게 마무리하고, 2주차에 크리에이터 센터 부분을 개발하기로 했다. 계획에 맞춰서 생각하며 개발했기 때문에 체계적으로 기능을 완성할 수 있었다.
2. 새로운 기술 사용
1차 때와는 달리, 더욱 많은 기능을 구현하기 보다는 새로운 기술과 문법을 시도해보는 것에 조금 더 중점을 두었다. AWS S3에 바로 이미지를 업로드하여 url을 백엔드로 보냈고, 처음으로 react 함수형 컴포넌트를 사용했다. redux를 사용하여 수업 정보를 가져와 출력하는 함수를 구현했다. styled-components를 사용해서 더 이상 scss 파일을 생성하지 않았다.
아쉬운 점
1. 체력
2차 프로젝트여서 그런지 점점 체력이 고갈되는 느낌이 들었고, 1차 때만큼의 에너지로는 개발하지 못해서 아쉬웠다.
2. 백엔드와 더, 더, 더 소통
백엔드와의 소통을 더 했어야 했는데, 조금 부족하여 비효율적인 업무처리가 발생하였다. 데이터 통신의 키값이라던지 주고받는 파일의 형식 등이 정해지지 않으면 추후 더 많은 비효율이 있기 때문에, 미리 협의하고 가는 연습을 더욱 해야 한다.
3. styled components
스타일드 컴포넌트를 조금 더 효율적으로 사용하지는 못했다고 생각하여 아쉬웠다.
기록하고 싶은 코드
1. AWS 이미지 업로드 코드
// 크리에이터 프로필사진 관련
// 아마존 s3 설정
const config = {
bucketName: "1nass",
region: "ap-northeast-2",
};
// 프로필 업로드 함수
const [profile, setProfile] = useState("");
const handleProfile = (e) => {
const file = e.target.files[0];
S3FileUpload.uploadFile(file, config)
.then((data) => {
setProfile(data.location);
})
.catch((err) => {
alert("이미지 업로드에 실패하였습니다.");
});
};
2. 메인 슬라이더
const Slider = ({ length, id, thumbnail, name, currentSlide }) => {
const [value, setValue] = useState(0);
useEffect(() => {
setValue(0);
}, [currentSlide]);
useEffect(() => {
setValue(100);
}, [value]);
함수형 컴포넌트로 코드를 작성하면서, setState의 콜백을 더 이상 사용할 수 없었다. useEffect Hooks를 사용하여 특정 부분이 페이지에서 변경될 경우 함수를 수행하는 연습을 충분히 많이 할 수 있었다고 생각한다.
마치며
두 번째 프로젝트는 조금 더 여유롭지만, 체계적으로 개발할 수 있었다. 다만, 개발 그 자체보다 더욱 중요한 것은 팀원들과의 소통이라는 것을 뼈저리게 느낄 수 있었다.
'프로그래밍' 카테고리의 다른 글
wecode 10/19 (node.js 사전공부) (0) | 2020.10.19 |
---|---|
wecode (10/18) (0) | 2020.10.19 |
사진 AWS S3 업로드 기능 구현하기 (0) | 2020.10.19 |
wecode (10/10) (0) | 2020.10.11 |
wecode (10/9) (0) | 2020.10.11 |
댓글