개인적으로 만들고있던 사이트도 어느정도 안정화가 되어가고..
이제 뭘하지?
뭔가 새로운것을 공부하고 만들어야겠다는 생각이 문득 들었다.
그리고 아는것과 모르는것, 하고싶은 것과 하기싫은 것을 분류해보고…
소켓을 이용한 무언가를 해보고싶어.
소켓은 10여년 전 처음 자바를 배울때를 제외하고는 실무에서 전혀 접할 기회가 없었다.
당시에는 간단한 1:1 채팅 앱을 학습했는데, 기억도 잘 나지 않고 당시에 나에게는 너무 어려웠다.
소켓을 이용해 다시 채팅 앱을 만들어 보면 되겠다.
뭘 이용해서 만들까?
최근에 만든 사이트는 프론트를 React, 백엔드를 Node.js, DB를 MySQL로 만들었다.
하지만 너무 겉핥기 식이고 빠르게 만드는 것에 바쁜 나머지 너무 날로 먹은것 같은 느낌이 들었다.
또 다시 React
내가 처음 React를 공부했을때(아마.. 2007년? 2008년?) 그때는 클래스형 구조로 되어있었다.
그리고 최근에 사이트를 만들었을 때 그때의 기억을 토대로 클래스형 구조로 만들고 사이트의 구조가 굳어갈때..
요즘 예제들은 함수형 구조로 된것이 많더라.
이 말은 뭔가 검색해도 함수형 구조를 이해하고 있지 않으면 빠르게 문제를 해결할 수 없다는 것과 같은 말이다.
결국은 클래스형 구조에서 함수형 구조로 다 뜯어 고치고 이 과정에서 생각보다 많은 시간을 잡아먹었다.
이번 채팅 앱은 처음부터 함수형 구조로 시작해야겠어.
그리고 Node.js 서버
Javascript는 잘 못하는데, 그래도 Node.js로 서버개발을 해보니 의외로 간편하고 쉬웠다.
무엇보다 React도 Javascript니까.
MUI
React UI library로 기본 UI보다 좀더 있어보이게 꾸밀 수 있다.
컴포넌트마다 예제는 너무 잘 돼있는데 조금 취향에 맞게 수정하려고 하려면 생각보다 쉽진않은 듯 하다.
socket.io
소켓을 사용하기 위해서 검색중 socket.io를 이용하면 간편하게 개발할 수 있을것으로 보였다.
그리고 채팅 앱을 만드는 간단한 튜토리얼도 제공한다.
개발하는데 필요한 부분만 보고 개발했는데, 정리해서 포스팅해두면 나중에 쉽게 찾아볼 수 있을것 같아 조만간 정리할 예정이다.
디자인
디자인에는 정말 소질이 없기 때문에 구글에서 ‘web chatting design’ 등의 검색 키워드를 몇개 참고해서 만들기로 했다.
로그인 화면은 사실 많은 기능을 필요로 하지 않도록 ID만 입력하게 했고,
서버를 통해 동일한 ID가 존재하는지 중복 체크만 했다.
좌측 상단에는 ‘나만의 채팅’ 기능으로 로그인한 나 자신이 가장 상단에 뜨고 이미 접속해있는 유저나 새로 접속한 유저들은 그 밑으로 리스트를 뿌려주어 채팅할 상대를 선택할 수 있도록 구성했다.
우측 환영 페이지는 딱히 디자인할 것이 없어 간단히 환영메세지만 작성했다.
채팅을 작성하면 내 채팅은 우측 말풍선으로 표시했다.
가장 최근 메세지는 카카오톡처럼 대화상대 아이디 밑에 나오도록 했다.
상대방과 채팅을 한다면 이런 식으로 표시된다.
만들면서 느낀점
flexbox 너무 어렵고…
화면의 영역과 구조가 복잡해질수록 부모와 자식의 계층을 잘 나눠야 하고 결국 디자인 영역까지 영향을 준다.
어떤 컴포넌트들은 세로로 배치해야하고 어떤 컴포넌트들은 가로로, 그리고 좌측 정렬, 우측 정렬… 가운데정렬..
주먹구구식으로 배우니 답이 없어 주변 친구에게 하소연할때 그 친구가 기본적인 flexbox 배치를 공부해 볼 수 있는 사이트를 추천해줬다.
24단계의 간단한 문제로 컴포넌트의 배치를 공부해 볼 수 있다.
정말 도움이 많이 되었고 능숙하진 않지만 확실히 개발 속도를 올려주었다.
flexbox froggy 알려준 친구야 고마워!
부모의 자식의 자식의 자식의… props, props, props… props 지옥
위에 설명한대로 이전에 React를 공부했을때도 발생했던 문제다.
계층을 여러개로 나누다 보면 몇단계 위에서 가지고있는 데이터를 자식에게 보내기 위해서 props의 지옥이 시작된다.
반대로 자식이 가지고있는 데이터를 부모 컴포넌트에서 업데이트해서 사용해야 될 경우도 생긴다.
또 이렇게 Redux를…
뭐야 한글 번역 사이트도 있었네…
예전에도 Redux를 사용했는데.. 너무 어렵고 공부했을때의 경험이 썩 좋지는 않았다..
그래서 다시 사용하고 싶지는 않았지만 결국 다시 사용해야 하는 상황이 왔다.
설치 방법을 보고 따라해보는데 이런 생각이 들었다.
의외로 쉽네. 앞으로 겁먹지 않아도 되겠다.
그래도 아쉬운 구조
주변에 React를 전문으로 하는 친구가 있어 조언을 구하고 싶은데 항상 바쁘다..
프론트 전문도 아니고 공부하며 만든 토이 프로젝트라 폴더 계층이나 컴포넌트 구조등 마음에 안드는 부분이 많다.
잘 만들어진 프로젝트를 보고 배우는것이 이 아쉬움을 해소하는데 도움이 될것으로 보인다.
그런 프로젝트를 github에서 찾으면 뜯어봐야지.
3주간의 개발
뭘 만들지 고민하고, 디자인이나 기능을 생각하고 코딩을 시작해서 지금까지 3주 정도 걸린 것 같다.
일하면서 취미도 즐기고 마지막으로 남는 시간에 만들었는데 정말 재미있었다!
이렇게 정리하고 보니 생각보다 배운게 많네.
그래서 앞으로는?
지금 이 글을 정리하면서 다음 토이 프로젝트를 구상중이다.
짧으면 3개월에서 길면 6개월을 예상하고 있는데 덩치가 너무 큰것은 아닌지 걱정되기도 하고..
이와 병행해서 배운것들은 계속해서 블로그에 작성할 예정이다.
내가 만든 채팅앱 소스와 설명은 간단히 포스팅 할 예정이다.