미리보기
기본 정보
안녕하세요 경험을 중요시 하는 개발자 이대규입니다. 개발과 개발외 또 다른 분야에서도 경험을 통한 학습만큼 중요한 학습은 없다고 생각합니다. 개발 학습을 하면서 다양한 경험들을 겪었습니다. 처음 만난 사람들과 프로젝트를 진행하며 소통하는 방법 그리고 그 과정에서의 시행 착오를 통해 협업과 개발언어의 이해와 활용에 대해 경험을 쌓았습니다. 완성된 서비스에 구글 애널리틱스를 이용하여 서비스 이용 추이를 통계내었고 유저 테스트를 통해 사용자로 부터 피드백을 받고 서비스를 개선 하였습니다. 유저의 경험을 공유하고 소통하는 과정에서 피드백의 중요성을 알게 되었습니다. 개발학습을 하는 기간동안의 경험을 통해 지금의 제가 되었다고 생각합니다. 앞으로 더 좋은 경험을 통해 발전하고 학습하는 그리고 내가 원하는 서비스를 개발 하기 보다는 사용자 입장에서 좀 더 나은 UX/UI를 경험 할 수 있도록 하는 개발자가 되고자 합니다.
기술 스택
React, HTML/CSS, JavaScript, TypeScript
프로젝트
푸릇푸릇
항해99
2024.02. ~ 2024.03.
기술
프론트엔드 - Javascript,Typescript, React, Axios, Styled-Component, React-Router, React-Query, Recoil, React-Slick, React-ga4, Browser-image-Compression, Vite
백엔드 - Typescript, Sequelize, MySQL, Nginx, GitHub Actions
팀원
프론트엔드 2명 / 백엔드 3명 / 디자이너 1명
프론트엔드 개발 담당
본인 역할
재사용성 향상과 구성요소를 작은 단위로 나누고 조합하는 방법으로 개발하기위한 공통 컴포넌트 개발
React Slick 슬라이드를 활용한 오늘의 추천 식물 및 오늘의 미션 메인페이지 구현
성향 테스트 및 결과에 따른 추천 식물 안내페이지 구현
유저의 편의성을 위한 상단 바(Nav Bar) 구현
초기 로딩 최적화를 위한 페이지 이동 구간에 Lazy, Suspense 통해 코드 스플리팅
트러블 슈팅
식물 검색 기능
문제
동일한 검색을 여러 번 수행할 때마다 다시 동일한 API 요청 -명사형으로 작성
해결
useCallback 및 useMemo와 같은 메모이제이션 기법을 고려했으나, 비동기 데이터 로딩 및 관리에 대한 복잡성으로 인해 이러한 방법을 적용하기 어려웠습니다.
대신에 리액트 쿼리를 사용하여 데이터 요청, 캐싱, 재로딩 등과 같은 고급 기능을 내장하고 있는 라이브러리를 채택하여 API 요청의 중복을 방지하고 효율적으로 검색을 처리할 수 있었습니다 -내용 요약
서버로의 이미지 전송 비효율적인 문제
문제
이미지의 크기에 관계없이 서버로 이미지를 전송하는 데 비효율적인 문제 발생
해결
browser-image-compression 라이브러리를 사용하여 이미지를 압축하고 서버에 전송했습니다.
이 과정에서 maxSizeMB 및 maxWidthOrHeight 옵션을 사용하여 이미지를 적절하게 압축했습니다.
페이지 초기화 문제
문제
여러 반려 식물이 있는 경우 특정 반려 식물에 대한 내용을 보다 페이지를 이동하면 초기화되어 첫 식물로 돌아가는 문제가 발생
해결
부모-자식 관계가 아닌 경우 상태를 전달하는 것이 어려워졌습니다.
이를 해결하기 위해 recoil을 사용하여 상태를 저장하고 관리했습니다. 또 페이지 간에 상태를 유지할 수 있었습니다.
로그인 인가 / 인증 문제
문제
사용자가 이용도중 AccessToken이 만료되면 그대로 로그인 페이지로 이동하고 RefreshToken을 쿠키게 담아두고 활용하지 못함
해결
response 인터셉터 활용으로 AccessToken이 만료되어 api 요청으로 에러 메세지를 받으면 RefreshToken토큰을 이용해 AccessToken을 재발급 받은 후 다시 재요청 할 수 있도록 해결하였습니다.
보드 테스트 버그
문제
한 태그를 클릭하고 다른 태그 클릭시에 결과 확인 버튼이 비활성화 되고 요소 선택없이 결과 확인 버튼을 클릭시 결과 페이지로 넘어가는 문제
해결
태그 선택시에 상태 변화가 되는 boardId가 있는데 이 state를 통해서 로직을 구현 하였습니다.
그리고 이 boardId가 없는 경우에는 결과확인 버튼이 클릭되지 못하는 로직 또한 구현하여 해결하였습니다.
-코드 제거
유저 피드백 & 반영
구글 애널리틱스
구글 애널리틱스를 이용하여 사용자가 어떤 페이지에 접속을 많이했고 어떤 이벤트를 했는지 분석 했습니다.
그러한 분석으로 페이지의 우선 순위를 두어 QA기반 코드 리팩토링을 하였습니다.
소셜 로그인
-피드백- 요즘은 대부분이 다 소셜로그인으로 돌아가는게 더 많기 때문에 남은 기간동안 소셜로그인을 넣는것을 추천드립니다.
-> 리다이렉트 페이지를 만들어 인가코드와 페이지 네이션을 구현 하였습니다.
클론 코딩 (스파르타 코딩 클럽 홈페이지)
항해99
2024.01. ~ 2024.01.
기술
프론트엔드 - Javascript, React, Axios, TailWind CSS
백엔드 - Java, Spring, MySQL, AWS
팀원
프론트엔드 2명 / 백엔드 2명
프론트엔드 개발 담당
본인 역할
Axios를 사용한 비동기 통신으로 사이트 내에 강의 목록 구현
CRUD중 CR을 활용한 강의 리스트 검색 구현
극락 퀴즈넷
항해99
2024.01. ~ 2024.01.
기술
프론트엔드 - Javascript, React, Axios, Styled-Component
백엔드 -Node.JS, Javascript, MySQL
팀원
프론트엔드 2명 / 백엔드 3명
프론트엔드 개발 담당
본인 역할
Axios 비동기 통신으로 로그인, 회원가입 구현
JWT 토큰을 활용한 보안성 향상
유저들의 소통을 위한 커뮤니티 게시판 게시글, 댓글 구현
트러블 슈팅
회원 가입을 통해 accessToken과 refreshToken을 발급하여 회원 인증(Authentication)을 하고 인증 받은 회원들에게 인가(Authorization)를 주는 과정에서 어려움이 있었습니다.
문제를 해결하고자 axios interceptor를 사용하여 request 헤더에 accessToken과 refreshToken을 발급하여 문제를 해결하였습니다.
포트폴리오
교육
항해99
사설 교육 | 프론트엔드
2023.12. ~ 2024.03. | 졸업