너무 감사하게도 일을 하나 맡아 무사히 마치게 되었다.
이 일로 대가를 받고 일을 하는 것이 성장에 얼마나 도움이 되는지 느낄 수 있었다.
오늘은 이 일에서 무엇을 배웠고, 어떤 것을 느꼈는지 정리해본다.
#1 일의 주제
맡게 된 일은
"지금보다 더 저렴하게 주유할 수 있는 주유소를 찾는 페이지"를 만드는 것이었다.
(*출처: https://www.yna.co.kr/view/AKR20211110170000002?input=1195m)
당시에 유류세 인하에 대한 정부발표가 예정되어있었기 때문에
오일나우의 핵심기능(내 위치를 기준으로 저렴한 주유소 추천)이 빛을 발할 수 있는 기회로 보고
빠르게 기획된 프로젝트였다. (해경PM님 정말 브릴리언트하신 분👍)
#2 일의 기간
계약기간은 총 5일이었다.
그 전에 간략한 와이어프레임을 받아서
일주일간 대충 그린 디자인으로 연습을 해보긴 했지만
실전은 또 몰랐던 문제들로 가득했다.
아래는 연습했던 화면들.
이때는 나름 footer도 붙여보았다.
디자이너의 대단함을 느낄 수 있었던 결과페이지 ㅎㅎㅎ 허접허접
#3 일의 결과
복작복작해서 나온 결과물은 아래의 페이지다.
https://treasurehunt.oilnow.co.kr/
"내가 놓치고 있는 주유비 찾기" 첫 화면
아이폰X 사이즈를 기준으로 만들었다.
반응형으로 만드려고 rem이랑 flex를 사용했으나 완벽하게 유연하지는 않다.
아직 %와 vh, vw에 대한 사용이 미흡해서라고 추측해본다.
"내 주유비 확인하기" 버튼은 플로팅 버튼이다.
유종 선택 화면
browser router를 사용해서 화면마다 url에 param을 달리해줬다.
맨 위의 헤더는 fix되도록 만들어서 스크롤이 생겨도 항상 뒤로가기 버튼이 보이도록 했다.
주소 container
여기서는 "주소를 입력해주세요" 버튼을 누르면
아래의 주소 입력 화면이 모달로 뜰 수 있도록 만들었다.
주소 입력 모달
여기가 정말 복잡했다.
유저의 입장에서는 그냥 주소를 입력해서 결과값을 클릭하면 끝이지만
개발자의 입장에서는
- 주소 api 연결
- 처음 모달을 열어서 아무 값도 입력하지 않은 경우
- 값을 입력했다가 모든 값을 삭제한 경우
- 입력값이 유효하지 않거나 결과가 없는 경우
- 결과값을 클릭하고 나갔다가 다시 모달로 돌아오는 경우
등등 고려해야할 경우의 수가 많았다.
주소 입력값이 유효하지 않거나 결과가 없는 경우
값이 입력되기 시작하면 입력값 전체를 삭제할 수 있는 x버튼이 생긴다.
주소 검색 결과값이 있는 경우
주소를 입력한 후 평소 주유하던 가격을 묻는 화면
여기서 "금액을 입력해주세요"를 누르면 금액 입력 모달이 뜨고
"우리 동네 평균 가격으로 자동 입력"을 누르면 해당 지역의 평균가격을 검색기준으로 이용한다.
상단의 주소 영역은 앞선 주소입력 화면에서 모달을 여는 버튼과 같은 요소를 재사용했는데 props를 이용해서 글자색을 바꾼 것도 재미있었다.
"금액을 입력해주세요" 버튼을 누르면 뜨는 금액 입력 모달
금액을 입력하면 "분석 시작하기" 버튼이 abled 상태로 바뀌면서 색상이 변경된다.
"원/L" 입력란의 placeholder만 가운데 정렬시키는 것도 흥미로웠다.
위 두 가지도 몰라서 검색을 해보았지만 그 보다 더 어려웠던 건 다음 두가지였다.
- 새로고침을 했을때 어떻게 첫 화면으로 이동시킬 것인가
- "분석 시작하기"를 누르면 어떻게 모달을 닫음과 동시에 다음 화면으로 넘어가도록 할것인가
"분석 시작하기" 버튼을 누르면 뜨는 로딩페이지
price 화면에 로딩화면을 붙이는게 좋지 않겠냐는 의견도 있었지만 나는 result 화면에 붙였다.
같은 입력값으로도 비교대상에 변동이 있으면 결과값이 다르게 나올 수 있다고 생각했기 때문이다. 같은 위치(url)에서 새로고침을 한다면 로딩화면이 여기서 필요할 것이라 생각했다. 결과적으로는 내 실력 부족으로 새로고침하면 back to home 되도록 만들긴 했지만ㅎㅎㅎ
더 저렴한 값의 주유소가 있는 경우
여기서는 숫자가 많이 나오는데,
실전을 하기 전 연습할 때에 쉼표를 찍었다가 뺐다가 하는 것이 참으로 복잡했떠랬따...
여기를 포함해서 이 이후로 나오는 하단 버튼도 모두 플로팅으로 만들었다.
"이 주유소는 상위 몇% 일까?" 버튼을 눌렀을 때
움직임을 위해서는 애니메이션을 넣어야만 하는 줄 알았는데 lottie-player라는게 있었다.
이걸 배경에 깔기 위해서 z-index도 사용해보았다.
그리고 내가 하지는 않았지만 sns 공유하기는 생각보다 쉬웠다.
다음에는 직접 해봐야지.
이미 최저가 혹은 최저가와 같은 가격으로 주유하고 있는 경우
조건에 맞는 주유소가 반경 내에 없는 경우
조건에 맞더라도 너무 멀면 소용이 없기 때문에 이 경우에는
notfound 화면을 띄우고 다시 검색하도록 유도했다.
#4 일의 소감
이번 일을 시작하면서 느낀 건 "아, 나 개발하길 잘했다" 였다.
내 머리속으로 상상하고 있는 것을 직접 만들어낼 수 있다는 성취감이 너무나 좋았다. "성취감"이라는 건 이전에 의류업 md 인턴을 할때에, 여행업 운영 매니저를 할때에는 느껴본 적이 없던 것이었다.
일을 끝내면서 얻은 가장 큰 소득은 "동기부여"다.
퇴사를 하고 공부를 시작하면서 줄곧 "프론트 개발을 해서 뭘 이룰 것인가"에 대해 고민해왔다. 프론트 개발자에 대한 어렴풋한 이미지만 가지고 내가 잘할 수 있을거라 생각했지, 막상 시작을 하니 정확히 프론트 개발자가 뭘 하는 사람인지 감이 오지 않았다.
하지만 이제는 프론트 개발자가 어떤 역할인지 약간이나마 알 것 같다.
그리고 이 커리어의 지향점에 대한 힌트도 얻게 되었다.
완전 저 끝의 도달치는 여전히 뭔지 모르겠다.
일단 지금은 유저가 이용하는데 끊김이 없는 유려한 프론트를 만드는 개발자가 되고 싶다.
그 밖에 알게 된 것
프론트 개발자의 역할
결과물을 부모님께 보여드리면서 프론트 개발이란 무엇인지 설명을 하다보니
이제서야 나도 프론트 개발자가 뭘 하는 사람인지 간략하게 설명할 수 있게 되었다.
"온라인에 화면을 그리고, 데이터가 지나다닐 수 있는 통로를 만들어주는 사람"
연차가 쌓이면서 프론트 개발자에 대한 나의 정의가 어떻게 바뀔지 궁금하다.
잠을 안자는 이유
동생은 백엔드 개발을 한다.
그 전에는 어떻게 새벽까지 코드를 치고 아침에는 나랑 비슷하게 일어날 수 있는지 이해가 안됐다.
그런데 이 프로젝트 기간동안에 내가 그렇게 생활을 했다.
구글이 계속 답을 알려주니까 앉아서 코드로 문제를 풀어가는게 재미있다.
기술적 지식
redux
- useDispatch
- redux는 닭잡는데 소잡는칼 쓰는 격이 될 수 있다. (feat. context api)
- redux 대신 useState의 활용
hooks
- useEffect는 어느 시점에 사용하는 것인지
- 모달을 useState로 띄우는 방법
- 커스텀 hook 만드는 법
- debounce
API
- 값이 없을때의 처리
- if 그리고 "return" only (얼리리턴)
- fetch then async await
Javascript
- 객체를 함수의 prop으로 넘기는 방법(prop에 바로 함수를 넣는 해결방안)
- 복잡한 정규표현식 사용하지 않고 숫자 콤마 넣는 방법 (locale과 정규식의 차이는?)
- 문자열 쪼개는 방법 (split이었나)
- 타입스크립트의 필요성
css
- 플로팅 버튼
- z-index
- 폰트 적용
- lottie player
styled components
- 선택자(div{}, :placeholder, :first-child, :last-child나 :nth-child를 연달아 사용하면 왜 안되는가)
- global style
- props를 사용한 조건 추가 방법
반응형 웹
- rem
- flex
새로고침
- window.history (useHistory)
- window.location (useLocation)
- init
기타
- scroll to top
- web share api (링크 공유)
- sns 공유하기
이후에 공부할 것
반응형 웹 만드는 방법 (%, vh, vw 활용)
redux와 context API의 차이
context API 사용법
react hook form
폰트 & 이미지 최적화 (flickering 없애기)
fetch then async await 활용
redux (useDispatch, toolkit, saga)
typescript 붙이기
sns 공유하기
딥링크? 원링크?
프로젝트 파일구조
커스텀 hook이란? (정확한 정의 확인 필요)
All thanks to Oilnow💙
p.s
- 벨로그(마크다운)에서 이미지 side by side로 나란히 두는 방법
- <p align="center" style="color:gray">
<img style="50px 0 10px 0"> </p> 가 왜 안먹히는지
아시는 지니어스 계신가요..?ㅠㅠ