기업협업 회고

조형진·2023년 1월 12일
0

WeCode

목록 보기
3/3
post-thumbnail

들어가며

1달간의 기업협업이 끝이났다.
내가 협업을 진행하게된 기업은 '다비수디지탈'이라는 교육회사였다.
회사에서 실제 진행하고있는 프로젝트에 참여한것이 아닌
회사에서 준 초고에 맞춰 함께 협업을 나간 동기들과 따로 프로젝트를 진행했다.

KGeul 프로젝트

프로젝트의 목적은 최근 K열풍이 불며 외국인들의 한국어 배움의 니즈가 커졌고
그 니즈를 충족시킬수있는 어플리케이션을 만드는것이였다.
배움이 늘 그렇듯 쉽게 따분해지기 때문에 흥미를 잃지않을만한 재밌는 K드라마와 예능을 컨텐츠로 삼았고
컨텐츠를 영상으로 제공하며 영상 밑에 유저가 재밌게 학습할수있도록 받아쓰기 형식으로 퀴즈를 풀고,
영상의 실제 대사를 녹음하여 자신의 발음을 듣고 정확도에 따라 점수를 매겨주는 장치도 만들었다.
프로젝트에 참여한 용사는 나를 포함해 총 5분이다

FE

조형진

  1. Main, Media List, Detail, Conversation Main, List, Detail, Header, Nav 레이아웃 구현
  2. 각 페이지로의 이동, Media Detail 영상 삽입, 2페이지 받아쓰기 구현
  3. 데이터 활용 및 맵핑

BE

지송현(PM)

  • 백에서 프론트에 데이터를 어떻게 전달할지, 프론트에서 어떻게 데이터를 받고 구현해야하는지 까지 해결
  1. Media Detail 3페이지에 유저가 녹음하고 청취하는 기능, 녹음한 발음에 따라 점수를 매겨주는 기능을 구현
  2. Media Detail 1페이지에 영상과 대사의 싱크를 맞춰 그에 따라 글자에 하이라이트 구현
  3. PM 진행

이명석

  • Conversation Detail 페이지의 기능을 도맡아 하심
  1. Conversation Detail 페이지에 상황에 맞는 대사의 음성 데이터를 보내고 스피커 버튼 클릭시 음성 청취 구현
  2. Conversation Detail 페이지에 다음페이지 버튼 클릭시 컴포넌트 전환 기능 구현

이은영

  1. Media Detail 전체 페이지에 쓰일 데이터 가공 및 전달
  2. Media List의 이미지 수정 및 최종단계에 CSS 참여

박상욱

  1. Media List 데이터 전달
  2. Conversation Main, List에 데이터 가공 및 전달

페이지 소개

1. Main

  • FE- 조형진

Main 페이지다.
따로 데이터가 필요하지않은 페이지여서 받는 데이터 없이 링크로 각 페이지로 이동하는 기능을 구현했고,
가지고있는 컨텐츠가 Media로 학습, Conversation으로 학습하는 두가지여서 큰 버튼으로 화면이 심심치 않게 디자인했다.
버튼 위에 커서를 올릴때 호버링 되게끔 구현하고 최대한 입체적인 느낌을 주고싶어 box-shadow를 적용했다.
홈버튼 클릭시 메인 페이지로 이동, 플레이 버튼 클릭시 Media 페이지로 이동, 말풍선 클릭시 Conversation 페이지로 이동하게끔 Nav바를 구현했고
Header의 뒤로가기 버튼 클릭시 바로 전 페이지로 이동하게끔 구현했다.

  • 참고한 자료

Nav 디자인
https://brunch.co.kr/@blackindigo-red/6
React Icons
https://react-icons.github.io/react-icons/icons?name=ai
React Icons 사용법
https://kimyang-sun.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%84%EC%9D%B4%EC%BD%98react-icons-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
페이지 이동시 LInk와 useNavigate의 차이점
https://velog.io/@seokkitdo/React-Link-useNavigate
useNavigate를 이용한 뒤로가기 기능
https://velog.io/@jiho1024/useNavigate%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0-%EA%B5%AC%ED%98%84

2. Media List

  • FE- 조형진
  • BE- 박상욱

Media List 페이지다.
백엔드에서 컨텐츠의 이미지와 제목,상황과 난이도를 텍스트로 보내주셨고
난 그 데이터들을 맵핑하고 페이지의 사이즈에 맞게 버튼 크기를 조절하였다.

  • 참고한 자료

map
https://velog.io/@tpgus758/map-%EC%82%AC%EC%9A%A9%EC%8B%9C-%ED%82%A4-%EA%B0%92%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

3. Media Detail(1)

  • FE- 기능구현 지송현, 레이아웃 조형진
  • BE- 이은영

Media Detail페이지의 1번째 컴포넌트다.
하나의 페이지안에 3개의 컴포넌트가 방향 버튼을 클릭할때마다 조건부로 렌더링 되게끔 구현했고
리액트 플레이어를 활용해 영상을 넣었다.(형진)
영상 재생 버튼 클릭시 싱크에 맞춰 영상 밑에 대사가 띄어지고 인물들이 말하는 단어마다 하이라이트 되게끔 구현했다.(송현)
shoutout to 송현 👊

  • 참고한 자료

조건부 렌더링
https://ko.reactjs.org/docs/conditional-rendering.html

4. Media Detail(2)

  • FE- 조형진
  • BE- 이은영

Media Detail의 2번째 컴포넌트다.
앞서 보여줬던 대사를 이 컴포넌트에서 테스트 할수있게 구현했다.
밑에 테스트할 대사를 보여주고 각 빈칸에 알맞은 단어를 입력하면 된다.
useState를 활용해 초기값을 빈값으로 설정-> 유저가 입력한 단어들을 저장->
여러개의 input들을 하나의 객체로 만듦 -> 데이터의 객체안에 단어 값과 하나하나 비교 ->
작성한게 맞으면 정답을 아닐시 다시 작성해주세요를 alert했다.

  • 참고한 자료

Input 상태관리
https://react.vlpt.us/basic/08-manage-input.html

5. Media Detail(3)

  • FE- 기능구현 지송현, 레이아웃 조형진
  • BE- 지송현

Media Detail의 3번째 컴포넌트다.
유저가 대사를 녹음, 청취하고 발음에 따라 각기 다른 점수를 보여줬다.(송현)
마이크 아이콘 버튼 클릭시 녹음된다는것을 확인시켜주기 위해 아이콘 색깔이 변하게 했다.
useState를 사용해 초기값을 그레이버튼, 버튼 클릭시에 레드버튼이 되게 구현했고
이 함수를 onClick이 아닌 ClassName에 삼항연산자로 넣었다.
사실상 많은 기능구현을 송현님이 도맡아하셨다.
shoutout to 송현 👊

  • 참고한 자료

onClick으로 아이콘 변화주기
https://velog.io/@perfumellim/TIL-hover%ED%96%88%EC%9D%84-%EB%95%8C-%EC%95%84%EC%9D%B4%EC%BD%98-%EB%B3%80%EA%B2%BD-react
페이지에서 녹음하기, 녹음한것 바로 재생하기
https://eundol1113.tistory.com/318

6. Conversation Main

  • FE- 조형진
  • BE- 박상욱

Conversation Main 페이지다.
유저는 각 상황에 맞게 배우고싶은 챕터를 클릭하면된다.
백엔드에선 각 상황별 텍스트와 Id를 데이터로 보내줬고
난 그 데이터를 맵핑하여 각 버튼마다 페이지 이동할수있게끔 구현했다.
Main과 마찬가지로 입체감을 살리고싶어 각 버튼에 box-shadow를 적용했다.

7. Conversation List

  • FE- 조형진
  • BE- 박상욱

Conversation List 페이지다.
백엔드 사정상 어떤 문제로 이미지를 받지못해서 내가 개인적으로 찾은 이미지를 로컬에서 import했다.
대주제와 레슨 밑에있는 상황별 소주제를 데이터로 받아 구현했고 상황별 소주제를 클릭하면 다음 페이지로 넘어가게 구현했다.

  • 참고한 자료

이미지
https://unsplash.com/ko

8. Conversation Detail

  • FE- 기능구현 이명석, 레이아웃 조형진
  • BE- 이명석

Conversation Detail 페이지다.
이 페이지도 백엔드 사정상 이미지를 받을수없어 내가 개인적으로 찾은 이미지를 로컬에서 import했다.
유저는 이 페이지에서 각 상황에 맞는 대사를 보고 들을수있다.
이 페이지에서 내가 설명할수있는건 말풍선과 위에 언급한 조건부 렌더링 뿐이다.
말풍선을 직접 구현하지않아도 내가 원하는대로 구현해주는 웹페이지가있다 밑에 참고한 자료 참고,
시간상 이 페이지의 모든 기능구현은 명석님이 도맡아하셨다.
shoutout to 명석 👊

  • 참고한 자료

이미지
https://unsplash.com/ko
간단하게 말풍선 만들기
https://www.ilikepixels.co.uk/bubbler/

후기

이번 기업협업을 진행하면서 사실 걱정이 많았다.
부담이 커서 드롭아웃을 생각해봤는데 내가 드롭아웃하면 프론트가 없어서 못했다. (물론 장난임)
플젝 멤버를 보다시피 실력좋은 백엔드가 4분에 프론트는 나 하나뿐이라 이게 가능한가 할수있는건가 스스로에게 계속 되물었다.
근데 뭐 어찌됐든 결과에 치중하지말고 완성해내지 못해도 내 실력을 올리는것에 최대한 집중하니 마음이 편해졌다. (멘탈이 중요❗️)
그리고 그렇게 그 어떤 프로젝트때 보다 실력면에선 정말 많은 성과를 얻었다고 자부한다.
물론 기능구현을 할때마다 좌절했고, 내 실력이 한참 모자라다는걸 느낄수있었고
그 덕에 막힐때마다 어떻게 구글링을 해야하는지 어떻게 학습해야하는지 가닥이 잡혔다.
처음엔 상황을 탓하곤했지만 지금보니 정말 좋은 기회였다 🙏

profile
견습생

1개의 댓글

comment-user-thumbnail
2023년 1월 13일

잘보고 갑니다~

답글 달기