본문 바로가기

Project Log/I'mticon

프로젝트 후기

 동기

본격적인 취준하기 전 마지막으로 만들어볼 프로젝트를 정하고 있었다. 처음에는 간.단.한 사진첩 사이트를 만들어보려고 했는데 또 생각보다 일이 커지면서...프로젝트가 영영 끝나지 않을 것 같은 느낌이 들기 시작했다. 그래서 다시 밤새 뭐만들어보지 고민하다가 다 엎고 특수문자 이모티콘 사이트를 만들어보기로 했다. 웹 이모지나 깨톡 이모티콘이 주로 많이 쓰이긴 하지만 그래도 종종 특수문자 이모티콘의 수요가 있는것을 보아왔기 때문에 만들어 보는 것도 좋을 것 같다고 생각했다. 검색해보면 블로그에 특수문자 이모티콘 모음이라는 제목으로 글이 올라온 것도 봤지만 이 경우에는 복사하기가 영 귀찮다. 그래서 사이트를 만들어서 클릭 한 번이면 자동으로 복사되는 기능을 넣고, 태그로 이모티콘을 검색하는 기능을 넣기로 했다. 그리고 유저가 이모티콘을 추가할 수도 있도록 추가 기능도 만들어보려고 했다.

그리고 이번 프로젝트를 진행하면서 react-thunk는 써봤으니 이번에는 react-saga를 쓰면서 기본적인 흐름을 익혀보려고 했다.

 

🔥 프로젝트를 진행하면서...

프로젝트를 만들면서 react-saga를 익혀보려 했는데 워낙 소규모 프로젝트라 정말 와 이럴때 saga를 쓰니까 넘나 편하네!하는 상황은 마주쳐본 경험이 없어 saga의 진가는 몸소 느끼지는 못했다. 그 점은 조금 아쉽다. 이론적으로는 알고 있지만 내가 그 상황을 부딪혀보고 아 이래서 좋은거구나!하고 느끼는건 확실히 다르니까...

 

배포하고 친구한테 테스트를 부탁했는데 한 친구가 나머지는 모두 정상적으로 동작하는데 복사기능이 안된다고 했다. 그래서 찾아보니 iOS safari에서는 내가 작성한 코드를 지원하지 않는 것을 발견했다. 킹갓 stackoverflow에서 찾아보니 복사 기능 자체는 작동하도록 해결 할 수있었다. 그런데 다시 폰에서 테스트해보니 예기치 못하게 스크롤이 아래로 내려가는 버그가 생겨나서 약간의 꼼수를 사용해 처리해주었다. 별건 아닌데 이런 예기치 못하게 생긴 버그 잡을 때 넘나 속시원하다ㅋㅋㅋㅋ

 

이 프로젝트에는 치명적인 단점?코드?가 있는데, 바로 copy메서드가 실행될 때마다 모든 블럭이 리렌더링 된다는 것이다. ^^...카피할 때 유저한테 알려주는 copy완료 모달이 떴다가 사라지는데(사라지는 함수는 몇초 후 사라질지 setTimeout으로 실행), 이미 copy완료 모달이 떠있으면 화면에서는 모달을 중복해서 띄우지 않는다. 유저입장에서 모달이 여러개 뜨면 거추장 스럽게 느껴질 것 같아서 그렇게 만들었는데 직접 작동해보니 카피할 때마다 모달이 그에 맞게 뜨는게 유저 입장에서는 아 카피가 됐구나!하는 느낌이 더 직관적으로 오는 것 같다. 그리고 모든 블럭이 화면에 copy모달이 띄워져있는지 아닌지 상태를 redux로 관리하고 있기 때문에 카피가 한번되면 copy모달이 보여져야할 때 status가 바뀌고, copy모달이 화면에서 사라질 때 또 status가 바뀌는데, 이를 구독하는 모든 블럭인 모달 상태가 바뀔 때마다 리렌더링 되는 것이다. 와 쓰고보니까 진짜 코드 거지같이 짰네... 다른건 몰라도 이 코드는 꼭!!!! 손을 봐야겠다.

데이터가 그렇게 많지 않기 때문에 사실 사용하는 입장에서는 속도가 느리다는 것은 1도 느끼지 못한다. 그런데 react profiler로 수십 개의 block 컴포넌트가 진.짜 불필요하게 리렌더링 되는 꼴을 보면 절레절레...

 

내가 만든 코드지만 정말...

🚀 배포

백엔드 배포는 heroku에서, 프론트 배포는 netlify에서 진행했다. 배포는 아직 할 때마다 헤매고 있는 중인 것 같다.  DB는 google cloud SQL을 사용했는데 이것도 설정하는데 꽤 오랜 시간이 걸렸다 ^^... 아직 보안적인 내용은 잘 모르기 때문에 보안은 개나주고 열심히 튜토리얼을 따라하다보니 배포가 겨우겨우 된 느낌이다. 배포까지 척척 잘하는 짱짱맨 개발자가 되고 싶다. 그래도 배포의 ㅂ자도 모르던 내가 localhost를 벗어나서 친구들한테 가족들한테 내가 만들어본건데 써볼래?하고 링크를 뿌리고 다니는게 뭔가 뿌듯했다ㅋㅋㅋㅋ

 

🎉 후기

이 프로젝트를 마지막으로 포트폴리오만 정리해서 구직을 시작할 예정이다. 학원이 끝나고 거진 두달 반이 지났는데 어느날은 '그래도 열심히하고 있구나' 하는 생각이 들다가도 '아직 너무너무너무 부족하다'라는 생각이 들기도하고 하루에도 몇번씩 자신감이 롤러코스터를 타는 기분이다. 뭐 어쨌든 이제는 죽이되든 밥이되든 혼자 프로젝트를 하는 것보단 이제는 사람들이랑 같이 일하고싶다ㅠㅠ 같이 토론하고 공부하고 성장하고싶다. 프로젝트 한다고 요즘 알고리즘을 좀 소홀히 했는데 지원하고 기다리면서 알고리즘 캐치업하고 만들어둔 코드 리팩토링해야겠다. 아, 그리고 항상 내 부족한 결과물을 보고 칭찬해주는 친구들한테도 고맙다고 느낀다ㅋㅋㅋ물론 친구들이 다행히(?) 개발을 몰라서 뭔가 더 대단하게 바라봐주는 것도 있지만 부끄러우면서 되게 힘이 되는 것 같다. 크크크 누구보다 테스트도 열심히해주고 유저입장에서 조언도해주고... 그 맛에 더 열심히 하게 된다. 어쨌든 이쯤 후기 끝!