미리보기

[개요]

✔ 주제 : 익명으로 모르는 사람들과 랜덤 또는 선택 채팅할 수 있는 서비스

✔ 인원 : 백엔드 2, 프론트엔드 3, 디자인 1,

✔ 사용 기술 : React Native, TypeScript, Recoil, Xcode, Socket.IO

[주요 경험]

1. 실시간 양방향 소통이 가능한 데이터를 구현해 볼 수 있었습니다.

   • 문제

     • 실시간 채팅 기능 구현을 위해 Socket.IO를 적용하고자 했지만, 기존 REST API로 데이터를 불러오는 방식의 차이로 인해 구조적인 혼란이 있었습니다. 특히 REST API는 요청이 발생할 때마다 데이터를 받아오는 반면, Socket.IO는 실시간으로 데이터를 받아오는 방식이라 양쪽의 데이터 흐름을 이해하고 조합하는 데 어려움이 있었습니다.

     • 또한, 실시간 채팅에서 연결 상태나 연결 시점에 따른 데이터의 일관성을 유지해야 했는데, 이 부분에서도 구현 초기에는 예상치 못한 혼란을 겪었습니다.

   • 해결

     • 우선 실시간 통신이 필요한 채팅과 같은 데이터는 Socket.IO를 통해 관리하고, 사용자 정보나 대화 기록 불러오기 등 고정된 데이터는 REST API를 통해 처리하는 방식으로 역할을 구분했습니다. 이 과정에서 Socket 서버를 로그인 시점에 자동으로 연결하고, 연결 상태를 사용자가 인지할 수 있도록 연결 성공 또는 실패 알림 기능도 추가해 안정적인 데이터 흐름을 구성했습니다.

   • 결과

     • 이 과정을 통해 REST API와 Socket 서버가 서로 다른 역할을 하고 있지만, 함께 사용함으로써 동시에 동기화된 데이터를 제공할 수 있음을 체감했습니다. 이를 통해 사용자에게 더욱 빠르고 즉각적인 채팅 환경을 제공할 수 있었으며, 기술 스택의 특성을 파악하고 적재적소에 적용하는 중요성을 다시금 깨달았습니다.

2. 버전 차이에 따른 코드 호환 문제

   • 문제

     • 구현된 화면을 테스팅 하기 위한 시뮬레이터를 Xcode를 통해 사용했어야 했는데 vscode 내에서는 발견된 오류가 발생하지 않아 코드의 문제는 아님을 인지 할 수 있었고, Xcode 내에서의 문제를 발견하였습니다.

   • 해결

     • 다소 익숙하지 않은 Xcode와 React-native 였기에 gpt를 통해 문제점에 대해 질문하며 찾아가다 반본적인 답변에 구글에 Xcode에서 발견되는 다양한 오류들을 검색을 통해 확인하는 작업을 거쳤습니다.

     • 그 중 버전 호환성의 문제가 빈번하게 나타난다는 블로그를 발견할 수 있었고 Xcode의 버전 설정을 통해 바로 문제를 해결하는 경험을 할 수 있었습니다.

   • 결과

     • 생성형 ai는 빠른 답변을 얻기 위해 사용 하되 맹신 하기엔 아직은 이르다는 것을 깨달을 수 있었고, 어떻게 도구로써 잘 사용할 수 있을지 좀 더 고민할 수 있는 계기가 되었습니다.

     • Xcode 호환성 문제 해결 과정에서 다양한 버전의 호환성을 고려하는 법을 배웠고, 이를 통해 향후 iOS 개발 시 안정성을 확보할 수 있는 자신감을 갖게 되었습니다.

3. React Native 라우팅 구성 방식

   • 문제

     • URL을 통한 화면간 이동이 아닌 아닌 스택(stack) 기반으로 이루어져 스택 형으로 변경되는 화면 라우팅 방식에 경로 설정을 어떤 식으로 이뤄야 하는 지 시작부터 막혔던 경험이 있습니다.

   • 해결

     • 메인이 되는 가장 초기의 스택 네비게이션을 설정하여 하위로 분류 되는 탭에 맞게 하위 라우팅 컴포넌트를 프롭스로 추가하여 화면이 이동되는 방식을 설정 하였습니다.

   • 결과

     • 앱과 웹의 경로 이동에 대해 고민할 수 있었고 사용자 경험 측면에서도 고민할 수 있었는데 웹 브라우저 상의 '뒤로 가기' 버튼이나 URL 변경에 반응하여 화면을 전환하는 방식이 웹의 기본 네비게이션 패턴이라면, 모바일 환경에서는 화면 전환 애니메이션이 자주 사용 되어 화면 전환 시 슬라이딩, 페이딩 등 다양한 애니메이션 효과 들도 추가로 고민할 수 있었습니다.

[링크]

Git : https://github.com/teeny-box/michi-frontend

[개요]

✔ 주제 : 예매 가능한 연극 정보 공유, 연극인들을 위한 커뮤니티 제공

✔ 인원 : 백엔드 3, 프론트엔드 4, 디자인 1,

✔ 사용기술 : HTML/CSS JavaScript, React, Scss, MuI, ContextAPI

[주요 경험]

1. 배포 된 이후 진행되는 프로젝트에 합류하여 유지 및 보수

   • 문제

     • 직접 짠 코드가 아닌 다른 누군가의 코드를 보는 것에서 데이터의 흐름이 어떻게 이뤄지는지 문서화 중요성을 인지하였습니다.

   • 해결

     • 개선하는 코드에 javadoc을 통해 선언된 변수, 함수에 적용되는 매개변수 등 데이터 흐름이 어떻게 이루어지는 지 직관적인 문서화 경험했습니다.

   • 결과

     • 기존에는 검색 기능을 통해 전체적인 파일들을 들여다 보며 이해하는데 소비되는 시간이 오래 걸렸다면, 해당 문서 기능을 통해 직관적인 데이터 흐름을 이해할 수 있었으며 보다 걸리는 시간이 줄어드는 경험을 했습니다.

2. 공통된 훅을 모듈화하여 재사용성 증가

   • 문제

     • 각 파일에서 공통적으로 사용 되는 코드들 발견하였고 재사용성을 고려하기 위한 고민을 하였습니다.

   • 해결

     • custom Hook으로 모듈화하여 재사용 가능하도록 코드 개선 하였습니다.

   • 결과

     • 해당 프로젝트 외에도 중복되는 코드나 공통적으로 사용될 수 있는 코드들이 어떤 게 있을지 분류 방법을 지속적으로 고민 할 수 있게 됐습니다.

3. 데이터 변화에 따른 종속된 컴포넌트 리렌더 이슈

   • 문제

     • 리렌더링에 따른 사이드 이펙트 이슈

   • 해결

     • 연극 리스트 페이지 종속된 컴포넌트들의 사이드 이펙트 효과로 조건 창을 유지 못 하고 닫히는 이슈를 개선 했습니다.

     • 연극 페이지가 렌더링 될 때마다 api를 호출하여 데이터를 불러오는 것이 아닌 호출 함수를 useCallback을 통해 최적화 하였습니다.

   • 결과

     • 리액트 언어 특성 중 하나인 리렌더링. 변경되는 데이터에 따라 화면이 변경되어야 하는 상태변화 특성 때문에 종속되어 있는 모든 컴포넌트들이 리렌더를 발생하는 언어적 특성을 이해 할 수 있었습니다.

       그로인해 종속된 데이터가 변경될 때마다 api를 호출하게 되는 문제를 해결 할 수 있었고 컴포넌트들을 어떤 식으로 종속 시켜야 할 지 좀 더 지속적인 고민할 수 있게 됐습니다.

4. 디스플레이 규격에 따른 적응형 웹 디자인 개선

   • 문제

     • 다양한 디스플레이 환경에서 UI/UX를 개선하도록 적응형 웹 디자인 적용 하였습니다.

   • 해결

     • 적용하고자 하는 디스플레이 규격 기준을 설정하여 모든 페이지를 각 기준에 디자인을 개선 하였습니다.

   • 결과

     • 변경되는 디스플레이 크기에 따라 변경해야할 디자인이 UI 뿐만이 아닌 UX도 고려하여 추가적인 디자인 수정이 필요함을 알게 됐습니다.

[링크]

Git : https://github.com/teeny-box/teenybox-frontend

[개요]

✔ 주제 : 영화 및 매체 콘텐츠 정보 제공 웹사이트

✔ 인원 : 백엔드 2, 프론트엔드 4

✔ 사용기술 : HTML/CSS, JavaScript, React, Recoil, tailwind

[주요 경험]

1. 소셜을 통해 로그인 성공시 소셜 계정 데이터에 맞는 프로필, 유저 닉네임 등을 모든 페이지에서 동기화

   • 문제

     • 데이터와 화면을 하나로 묶을 수 있는 리액트라는 언어의 특성을 고려하지 못하였습니다.

       팀원의 추천에 의해 사용하게 된 상태관리 라이브러리 Recoil 사용방법을 제대로 익히지 못 하여 모든 페이지 동기화하지 못 하는 문제가 발생 했습니다.

   • 해결

     • 모든 페이지 내에서 변경된 데이터가 화면으로 구현 되려면 전역 적으로 관리해줘야 함을 깨닫고, Recoil 사용방법을 학습하여 화면 적용 완료했습니다.

   • 결과

     • 모든 페이지에서 유저 정보를 동기화하여 사용자 경험이 일관되게 유지되는 것을 확인할 수 있었으며 팀원들과 함께 전역 상태의 중요성을 학습할 수 있었습니다.

2. 브라우저단 구현과정에서 오류가 생성되는 원인 파악하는 방법

   • 문제

     • 소셜 로그인 기능 사용에서 로그인 성공했을 시 다시 원 주소를 불러오지 못 하는 이슈 발생

   • 해결

     • 개발도구 기능에서 네트워크 탭을 이용하여 HTTP 상태 코드에서 302를 반환하는 것을 확인 할 수 있었습니다.

     • 담당하는 백엔드 분과 소통하여 함께 원인 파악하고 문제 해결 하였습니다.

   • 결과

     • 구현단계에서 발생하는 오류들이 비단 프론트단에서 만 발생하는 것 아님을 깨닫고 원인을 파악하는 능력 학습 했습니다.

     • 어느 부분에서 어떻게 발생한 오류의 원인 결과를 통해 무리 없이 소통하는 방법을 터득할 수 있었습니다.

[링크]

Git : https://github.com/Woo7i/WatchHere

[개요]

✔ 주제 : 바닐라 자바스크립트로 구현한 쇼핑몰 웹 사이트

✔ 인원 : 백엔드 3, 프론트엔드 3

✔ 사용 기술 : HTML/CSS, JavaScript

[주요 경험]

1. 프로젝트 팀장이 되어 팀원들과 소통 및 리드 경험

   • 문제

     • 효율적인 시간관리 및 소통이 되기 위한 창구 시스템 부족 인지

   • 해결

     • 디스코드로 실시간 이슈를 빠르게 공유하여 해결 할 수 있는 부분을 빠르게 해결하도록 했습니다.

     • 노션을 통한 일정 관리로 각 작업 진척도를 시각화하여 업무 진행 속도를 높일 수 있었습니다.

   • 결과

     • 직관적인 진척도와 소통을 통해 2주안에 서비스 목적을 완벽히 달성하는 MVP를 완성 하였습니다.

[링크]

Git : https://github.com/Woo7i/adorn9_frontend