1. 글 제목

💥 실시간 채팅 컨셉으로 슬랙 구현하기! 💥

2. URL 및 캡쳐 이미지

이 곳을 클릭해주세요

3. 자기소개

안녕하세요 창업을 꿈꾸고 있는 예비창업자입니다. 추석은 편히 쉬셨는지요?

세상이 풀지 못한 문제를 해결하고, 모두가 바라는 건강한 일자리를 만들고 싶다는 꿈을 위해 다니던 회사를 그만두고 개발 공부를 시작하게 되었습니다.

처음에는 개발자가 되는 것을 꿈꾸지는 않습니다. 다만 미래의 경영자라 하면 반드시 개발자와 소통할 수 있어야 한다는 생각이 들었고, 경영자가 아닌 개발자의 언어를 공부하기 시작했습니다. 코딩 공부를 시작한 지 얼마 되지 않았기에 새벽까지 자료를 찾고 빨간 에러와 씨름 중이지만, 나만의 아이템을 사업계획서가 아닌 VSC를 통해 제 손으로 직접 만든다는 것에 이전에는 느껴보지 못했던 보람을 느끼고 있습니다.

4. 서비스소개

"시키는 일보다 최소한 10% 이상은 더 해라."

넷플릭스의 창업자 마크 랜돌프가 그의 아버지로부터 배운 성공 규칙 중 하나 입니다.

이번 클론 코딩 대회를 두고 하는 말이 아닐까 싶습니다. 아이템 하나를 온전히 기획해보는 시간인 만큼, 트위터를 그대로 만드는 것이 아닌 이렇게도, 저렇게도 바꿔보고자 노력했습니다. 디자인도 다른 것을 채용해보고, 트윗 배열 순서도 바꿔보고, 또 완전히 갈아 엎어 보기도 하였습니다.

그 결과물을 아래와 같이 설명드리고자 합니다! 10% 이상의 퍼포먼스가 있을지 한 번 볼까요😎?

4-1. 로그인

- 랜덤 배경 표시하기 ⭐️

로그인 페이지를 표시할 때 마다 다른 배경 이미지가 출력됩니다. 매번 새로운 배경을 보는 재미와 함께 지루하지 않은 경험을 선사해드리고 싶었습니다. unsplash 라는 곳을 이용했구요, 얼마 전에 정말 마음에 드는 이미지가 있었는데 다시 만날 수 있기를 기다리고 있습니다. :)

- 소셜 로그인 페이스북 추가

구글, 깃허브 뿐만 아니라 페이스북을 추가했습니다. 처음에는 카카오를 추가하려고 했으나, 생각보다 처리해야 할 과정이 많았습니다. 참고 자료를 바탕으로 시도했으나 실패하고 말았습니다 ㅠㅠ..

새로운 방안으로 페이스북을 추가하여 기존 내용에 더해 보다 다양한 방법으로 로그인 하실 수 있습니다. 츄라이 츄라이 😊

4-2 프로필

- 유저 정보

메인 화면 좌측 상단의 사람 모양 아이콘을 클릭하면 프로필이 표시됩니다.

해당 페이지에는 사용자의 프로필 이미지, 닉네임, 가입 경로, 계정 생성일과 마지막 로그인 날짜가 표시됩니다. 회원 가입을 소셜이 아닌 일반 이메일로 가입하셨을 경우 your own id로 표시됩니다.

- 프로필 사진 및 닉네임 변경

초기 이미지가 없다면 노마드코더의 로고가 표시됩니다. 변경의 경우 카메라 아이콘 클릭을 통해 이미지를 업로드 하시면 자동적으로 변경됩니다.

초기 닉네임이 없다면 John Doe로 표시됩니다. 변경의 경우 닉네임칸이 input으로 설정되어 있으니 변경하신 후 펜 모양 아이콘을 클릭하시면 변경이 완료됩니다.

- 트윗 컨테이너 (자신이 작성한 트윗 확인)

각 채팅방 마다 작성한 트윗을 확인할 수 있는 컨테이너를 만들었습니다.

각각의 트윗 정보를 프로필 화면으로 연결하는 일이 쉽지 않았습니다. 리액트의 작동방식을 되짚어보고 많은 시행착오를 겪었던 것이 생각나네요. 저의 경우에는 map 함수를 router 부분에 선언하여 자료에 접근하였습니다. router에서 자료를 얻어서 profile 페이지에 넣고.. 이걸 다시 표시하고.....

다른 분들은 어떻게 하셨을지 여쭈어보고 싶네요 ㅎㅎ

4-3. 채팅방 변경

행복한 리액트 방과 챌린지 채팅방을 각각 만들었습니다!

+Add Channels 를 클릭하여 방을 생성한 후, 각각의 방에 접근이 가능하도록 만들고 싶었습니다만.. 이를 구현하려면 redux라는 것을 배울 필요가 있었습니다. 지금은 구현할 수 없었지만, 아쉬운 마음으로 태그가 추가되는 선에서 기능을 마무리 하였습니다. 재미 삼아 채팅방을 만들어 보는 것도 좋을 것 같습니다!

4-4 트윗/채팅 기능

- 메세지 배열 순서 변경 / 오토 스크롤 구현

슬랙과 동일하게 먼저 작성한 메세지가 상단에 위치하도록 하였습니다. 나아가 자신이 작성한 메세지는 왼쪽, 다른 사용자의 메세지는 오른쪽에 표시되도록 하였습니다. 이거 완전 코코아톡..?

그리고 채팅방에 입장할 때마다, 새로운 메세지가 작성될 때 마다 자동적으로 스크롤이 아래로 내려가도록 설정하였습니다.

4-5. 이모티콘 및 사진 첨부 기능

- 이모티콘과 사진은 모달 페이지를 통해 추가할 수 있도록 만들었습니다. 이 부분은 제가 코딩 하면서 아주 기뻐했던 부분입니다. useState 이용을 통해 직접 토글 함수를 만들었고, onClick 을 통해 className=hidden을 추가하는 동작을 구현했습니다. 모달 페이지 생성에 필요한 아이디어에 대해서는 아래 내용을 참고해주세요! 역시 노마드 😋

노마드코더 모달 페이지 만들기

4-6. 이미지 확대 기능

- 채팅과 함께 업로드 된 사진에 마우스를 올리면 hover를 통해 확대되도록 하였습니다.

4-7 기타

- 로그아웃 : 화면 상단 좌측의 exit 아이콘을 눌러주세요!

- 시계 : 화면 상단부에 시간을 표시하였습니다.

5. 개발 과정

- JS8 -> JS9

강의 내용은 js8을 기반으로 진행되었으나 실제 코딩은 js9로 작성하였습니다. 변경된 내용을 찾고 이해하기 위해서 많은 시간을 투자했습니다. 여러번 읽는 것 보다 직접 한 번 작성하는 것이 원리를 이해하는 데 큰 도움이 되었습니다.

- I NEED REDUX: 지식의 한계, 확실한 방향 설정

초반 작품의 핵심을 채팅방 추가에 두었습니다. 어떻게든 만들어보려 했지만 한계를 만나게 되었지요 ㅠㅠㅠ. 포기하지 않고 반드시 구현할 예정입니다 !! 길을 알았으니 쓰러질 일은 없습니다! 😎

- Idea

기획이 정말 어려웠습니다. 기획은 노력의 영역일까요 재능의 영역일까요? 이 작품 또한 트위터, 슬랙, 카카오톡 등등의 내용들을 합쳐 놓은 것이지만, 하나로 모은다는 것 또한 제게 있어서는 큰 도전이었습니다.

6. 앞으로의 계획

클론 코딩 대회는 처음 출전하는 지라 많은 생각이 듭니다. 많이 버벅거렸고, 예기치 않게 코딩하다가 일출을 맞이한 날도 많았습니다. 

에러를 찾을 수록, 기술적 한계를 만날 수록 더욱 더 방향이 명확해진달까요? 무엇을 공부해야 하는지, 무엇이 부족한지.. 제 현주소가 보일 수록 오히려 불타오르는 스스로를 발견할 수 있었습니다. 더 하고 싶고, 더 만들고 싶고, 더 완성되고 싶은 그런 느낌이었습니다.

이 작품의 저의 첫 포트폴리오인 만큼 만들고자 했던 기능을 모두 추가할 계획입니다. 좋아요, 다크모드 뿐만 아니라 핵심인 채팅방 추가까지 진행할 예정입니다. 현재 wetube 챌린지를 함께 진행하고 있습니다만, 여기에 더하여 redux 내용을 추가로 공부할 생각입니다. 이제 진짜 시작이라고 볼 수 있겠네요 ㅎㅎ

다른 분들의 글을 보니 정말 멋진 작품들이 많더라구요. 이 곳에서 팀을 만들어도 좋겠다는 생각이 들었습니다. 매력적인 팀을 만들기 위해서 저 또한 계속해서 정진하겠습니다. 

코딩과 개발을 넘어 창업을 통해 새로운 가치를 만들 그 날까지!

읽어주셔서 감사합니다.