미리보기
기본 정보
새로운 환경에 빠르게 적응하며 창의적 문제 해결을 통해 성장하는 신입 프론트엔드 개발자입니다.
기술 스택
JavaScript, React, HTML/CSS
프로젝트
[Michi] 랜덤 채팅 앱
elice
2024.04. ~ 진행 중
[개요]
✔ 주제 : 익명으로 모르는 사람들과 랜덤 또는 선택 채팅할 수 있는 서비스
✔ 인원 : 백엔드 2, 프론트엔드 3, 디자인 1,
✔ 사용 기술 : React Native
, TypeScript
, Recoil
, Xcode
, Socket.IO
[주요 경험]
실시간 양방향 소통이 가능한 데이터를 구현해 볼 수 있었습니다.
문제
실시간 채팅 기능 구현을 위해 Socket.IO를 적용하고자 했지만, 기존 REST API로 데이터를 불러오는 방식의 차이로 인해 구조적인 혼란이 있었습니다. 특히 REST API는 요청이 발생할 때마다 데이터를 받아오는 반면, Socket.IO는 실시간으로 데이터를 받아오는 방식이라 양쪽의 데이터 흐름을 이해하고 조합하는 데 어려움이 있었습니다.
또한, 실시간 채팅에서 연결 상태나 연결 시점에 따른 데이터의 일관성을 유지해야 했는데, 이 부분에서도 구현 초기에는 예상치 못한 혼란을 겪었습니다.
해결
우선 실시간 통신이 필요한 채팅과 같은 데이터는 Socket.IO를 통해 관리하고, 사용자 정보나 대화 기록 불러오기 등 고정된 데이터는 REST API를 통해 처리하는 방식으로 역할을 구분했습니다. 이 과정에서 Socket 서버를 로그인 시점에 자동으로 연결하고, 연결 상태를 사용자가 인지할 수 있도록 연결 성공 또는 실패 알림 기능도 추가해 안정적인 데이터 흐름을 구성했습니다.
결과
이 과정을 통해 REST API와 Socket 서버가 서로 다른 역할을 하고 있지만, 함께 사용함으로써 동시에 동기화된 데이터를 제공할 수 있음을 체감했습니다. 이를 통해 사용자에게 더욱 빠르고 즉각적인 채팅 환경을 제공할 수 있었으며, 기술 스택의 특성을 파악하고 적재적소에 적용하는 중요성을 다시금 깨달았습니다.
버전 차이에 따른 코드 호환 문제
문제
구현된 화면을 테스팅 하기 위한 시뮬레이터를 Xcode를 통해 사용했어야 했는데 vscode 내에서는 발견된 오류가 발생하지 않아 코드의 문제는 아님을 인지 할 수 있었고, Xcode 내에서의 문제를 발견하였습니다.
해결
다소 익숙하지 않은 Xcode와 React-native 였기에 gpt를 통해 문제점에 대해 질문하며 찾아가다 반본적인 답변에 구글에 Xcode에서 발견되는 다양한 오류들을 검색을 통해 확인하는 작업을 거쳤습니다.
그 중 버전 호환성의 문제가 빈번하게 나타난다는 블로그를 발견할 수 있었고 Xcode의 버전 설정을 통해 바로 문제를 해결하는 경험을 할 수 있었습니다.
결과
생성형 ai는 빠른 답변을 얻기 위해 사용 하되 맹신 하기엔 아직은 이르다는 것을 깨달을 수 있었고, 어떻게 도구로써 잘 사용할 수 있을지 좀 더 고민할 수 있는 계기가 되었습니다.
Xcode 호환성 문제 해결 과정에서 다양한 버전의 호환성을 고려하는 법을 배웠고, 이를 통해 향후 iOS 개발 시 안정성을 확보할 수 있는 자신감을 갖게 되었습니다.
React Native
라우팅 구성 방식문제
URL을 통한 화면간 이동이 아닌 아닌 스택(stack) 기반으로 이루어져 스택 형으로 변경되는 화면 라우팅 방식에 경로 설정을 어떤 식으로 이뤄야 하는 지 시작부터 막혔던 경험이 있습니다.
해결
메인이 되는 가장 초기의 스택 네비게이션을 설정하여 하위로 분류 되는 탭에 맞게 하위 라우팅 컴포넌트를 프롭스로 추가하여 화면이 이동되는 방식을 설정 하였습니다.
결과
앱과 웹의 경로 이동에 대해 고민할 수 있었고 사용자 경험 측면에서도 고민할 수 있었는데 웹 브라우저 상의 '뒤로 가기' 버튼이나 URL 변경에 반응하여 화면을 전환하는 방식이 웹의 기본 네비게이션 패턴이라면, 모바일 환경에서는 화면 전환 애니메이션이 자주 사용 되어 화면 전환 시 슬라이딩, 페이딩 등 다양한 애니메이션 효과 들도 추가로 고민할 수 있었습니다.
[링크]
[Teeny Box] 연극 정보 공유 웹사이트
elice
2024.03. ~ 2024.07.
[개요]
✔ 주제 : 예매 가능한 연극 정보 공유, 연극인들을 위한 커뮤니티 제공
✔ 인원 : 백엔드 3, 프론트엔드 4, 디자인 1,
✔ 사용기술 : HTML/CSS
JavaScript
, React
, Scss
, MuI
, ContextAPI
[주요 경험]
배포 된 이후 진행되는 프로젝트에 합류하여 유지 및 보수
문제
직접 짠 코드가 아닌 다른 누군가의 코드를 보는 것에서 데이터의 흐름이 어떻게 이뤄지는지 문서화 중요성을 인지하였습니다.
해결
개선하는 코드에
javadoc
을 통해 선언된 변수, 함수에 적용되는 매개변수 등 데이터 흐름이 어떻게 이루어지는 지 직관적인 문서화 경험했습니다.
결과
기존에는 검색 기능을 통해 전체적인 파일들을 들여다 보며 이해하는데 소비되는 시간이 오래 걸렸다면, 해당 문서 기능을 통해 직관적인 데이터 흐름을 이해할 수 있었으며 보다 걸리는 시간이 줄어드는 경험을 했습니다.
공통된 훅을 모듈화하여 재사용성 증가
문제
각 파일에서 공통적으로 사용 되는 코드들 발견하였고 재사용성을 고려하기 위한 고민을 하였습니다.
해결
custom Hook으로 모듈화하여 재사용 가능하도록 코드 개선 하였습니다.
결과
해당 프로젝트 외에도 중복되는 코드나 공통적으로 사용될 수 있는 코드들이 어떤 게 있을지 분류 방법을 지속적으로 고민 할 수 있게 됐습니다.
데이터 변화에 따른 종속된 컴포넌트 리렌더 이슈
문제
리렌더링에 따른 사이드 이펙트 이슈
해결
연극 리스트 페이지 종속된 컴포넌트들의 사이드 이펙트 효과로 조건 창을 유지 못 하고 닫히는 이슈를 개선 했습니다.
연극 페이지가 렌더링 될 때마다 api를 호출하여 데이터를 불러오는 것이 아닌 호출 함수를 useCallback을 통해 최적화 하였습니다.
결과
리액트 언어 특성 중 하나인 리렌더링. 변경되는 데이터에 따라 화면이 변경되어야 하는 상태변화 특성 때문에 종속되어 있는 모든 컴포넌트들이 리렌더를 발생하는 언어적 특성을 이해 할 수 있었습니다.
그로인해 종속된 데이터가 변경될 때마다 api를 호출하게 되는 문제를 해결 할 수 있었고 컴포넌트들을 어떤 식으로 종속 시켜야 할 지 좀 더 지속적인 고민할 수 있게 됐습니다.
디스플레이 규격에 따른 적응형 웹 디자인 개선
문제
다양한 디스플레이 환경에서 UI/UX를 개선하도록 적응형 웹 디자인 적용 하였습니다.
해결
적용하고자 하는 디스플레이 규격 기준을 설정하여 모든 페이지를 각 기준에 디자인을 개선 하였습니다.
결과
변경되는 디스플레이 크기에 따라 변경해야할 디자인이 UI 뿐만이 아닌 UX도 고려하여 추가적인 디자인 수정이 필요함을 알게 됐습니다.
[링크]
[Watchere] 매체 콘텐츠 정보 제공 웹사이트
elice
2023.11. ~ 2023.12.
[개요]
✔ 주제 : 영화 및 매체 콘텐츠 정보 제공 웹사이트
✔ 인원 : 백엔드 2, 프론트엔드 4
✔ 사용기술 : HTML/CSS
, JavaScript
, React
, Recoil
, tailwind
[주요 경험]
소셜을 통해 로그인 성공시 소셜 계정 데이터에 맞는 프로필, 유저 닉네임 등을 모든 페이지에서 동기화
문제
데이터와 화면을 하나로 묶을 수 있는 리액트라는 언어의 특성을 고려하지 못하였습니다.
팀원의 추천에 의해 사용하게 된 상태관리 라이브러리
Recoil
사용방법을 제대로 익히지 못 하여 모든 페이지 동기화하지 못 하는 문제가 발생 했습니다.
해결
모든 페이지 내에서 변경된 데이터가 화면으로 구현 되려면 전역 적으로 관리해줘야 함을 깨닫고,
Recoil
사용방법을 학습하여 화면 적용 완료했습니다.
결과
모든 페이지에서 유저 정보를 동기화하여 사용자 경험이 일관되게 유지되는 것을 확인할 수 있었으며 팀원들과 함께 전역 상태의 중요성을 학습할 수 있었습니다.
브라우저단 구현과정에서 오류가 생성되는 원인 파악하는 방법
문제
소셜 로그인 기능 사용에서 로그인 성공했을 시 다시 원 주소를 불러오지 못 하는 이슈 발생
해결
개발도구 기능에서 네트워크 탭을 이용하여 HTTP 상태 코드에서 302를 반환하는 것을 확인 할 수 있었습니다.
담당하는 백엔드 분과 소통하여 함께 원인 파악하고 문제 해결 하였습니다.
결과
구현단계에서 발생하는 오류들이 비단 프론트단에서 만 발생하는 것 아님을 깨닫고 원인을 파악하는 능력 학습 했습니다.
어느 부분에서 어떻게 발생한 오류의 원인 결과를 통해 무리 없이 소통하는 방법을 터득할 수 있었습니다.
[링크]
[Adorn9] 쇼핑몰 웹 사이트
elice
2023.10. ~ 2023.10.
[개요]
✔ 주제 : 바닐라 자바스크립트로 구현한 쇼핑몰 웹 사이트
✔ 인원 : 백엔드 3, 프론트엔드 3
✔ 사용 기술 : HTML/CSS
, JavaScript
[주요 경험]
프로젝트 팀장이 되어 팀원들과 소통 및 리드 경험
문제
효율적인 시간관리 및 소통이 되기 위한 창구 시스템 부족 인지
해결
디스코드로 실시간 이슈를 빠르게 공유하여 해결 할 수 있는 부분을 빠르게 해결하도록 했습니다.
노션을 통한 일정 관리로 각 작업 진척도를 시각화하여 업무 진행 속도를 높일 수 있었습니다.
결과
직관적인 진척도와 소통을 통해 2주안에 서비스 목적을 완벽히 달성하는 MVP를 완성 하였습니다.
[링크]
포트폴리오
교육
사이버에듀 평생교육원
대학교(전문학사) | 경영전공
2017.02. ~ 2018.03. | 졸업
동아방송예술대학교
대학교(전문학사) | 영화예술학 / 촬영
2019.03. ~ 2022.03. | 졸업
엘리스 SW 엔지니어 트랙
사설 교육 | 프론트엔드
2023.08. ~ 2023.12. | 졸업
자격증
정보처리산업기사
68 | 한국산업인력공단
2024.09.
자기소개
새로운 환경에 도전하는 것을 두려워하지 않고, 빠르게 적응하는 것이 저의 강점입니다.
저는 처음에 영화 연기를 꿈꾸며 학업을 시작했지만, 연기 과정에서 카메라 뒤에서 장면을 완성하는 기술적 요소들에 더욱 흥미를 느끼게 되어 영화 촬영 감독으로 전향하게 되었습니다. 촬영 현장에서 카메라를 통한 시각적 표현의 중요성을 깨닫고, 그 과정에서 많은 노력을 기울였습니다.
영화과 재학 시절, 연기 전공자로서 촬영 기술에 대한 개념이 부족했기 때문에, 처음에는 학생들에게 신뢰를 얻는 것이 쉽지 않았습니다. 이를 극복하기 위해 많은 영화를 분석하고, 촬영 장비와 기술적 요소를 꾸준히 학습했습니다. 그 결과, 졸업작품 10편 중 2편에서 촬영 감독을 맡았고, 그 중 하나는 영화제에 초청되는 성과를 거두었습니다. 졸업 후에도 현장에 빠르게 적응하며, 필요한 기술을 신속히 습득하여 팀원들의 신뢰를 얻었고, 두 작품 만에 직급을 올리는 경험을 할 수 있었습니다.
하지만 단순히 촬영 기술을 익히는 것에 만족하지 않았고, 장면을 보다 창의적으로 구성하고 구현하고 싶은 욕심이 생겼습니다. 특히 촬영 현장에서 느꼈던 기술적 제약으로 인해 표현할 수 있는 시각적 효과에 한계를 느꼈고, 이를 해결하기 위해 기술을 통한 이미지 구현에 대한 관심이 커졌습니다. 그 결과 웹 개발에 대한 관심으로 이어졌고, 웹 개발이 시각적 요소를 창의적으로 배치하고 조합하여 다양한 이미지를 표현과 기능을 구현할 수 있다는 점에서 큰 매력을 느꼈습니다.
웹 개발에 대한 흥미를 실현하기 위해 저는 체계적인 교육이 필요하다고 판단했고, 자격 검증을 거쳐 입학할 수 있는 국비 과정을 선택했습니다. 이 과정에서 실무적인 기술을 배우며 두 차례의 팀 프로젝트를 진행했고, 첫 번째 프로젝트에서는 메인 페이지를 담당했습니다. 이때, 영화 촬영 감독으로서 쌓아온 시각적 감각을 웹 개발에 적용하여, 5개 팀 중에서도 디자인 배치와 시각적 감각이 뛰어나다는 평가를 받았습니다. 이러한 경험은 개발자로서 저에게 더 큰 성장 욕구를 불러일으켰고, 웹 개발을 통해 저의 창의성과 기술적 역량을 발전시킬 수 있다는 확신을 얻게 되었습니다.
저는 영화 촬영과 웹 개발이라는 두 분야에서 쌓은 경험을 바탕으로, 창의적인 문제 해결과 기술적 구현을 통해 더 나은 결과물을 만들어내는 개발자가 되고자 합니다.
신입 프론트엔드 개발자로서 새로운 도전에 빠르게 적응하며, 끊임없이 성장해 나가고 싶습니다. 웹 개발에서도 저의 강점을 발휘해 팀과 프로젝트에 기여할 준비가 되어 있습니다.
경력
TvN <아다마스>
3rd | 촬영팀
2022.05. ~ 2022.08. (4개월)
TVING <몸 값>
4th | 촬영팀
2022.03. ~ 2022.04. (2개월)
제이앤씨미디어그룹 <화사한 그녀>
4th | 촬영팀
2021.12. ~ 2022.02. (3개월)