[Saida Lab] 첫 서비스 배포, 그 4주간의 기록

이번에 첫 이직 후 약 4주전 간단한 바이럴 페이지를 제작하는 프로젝트에 투입되었다. 사실상 지금까지 개발다운 개발을 못했었는데, 이제서야 제대로 된 개발을 진행 해봤던 것 같다. 그래서 그 소중한 기록들을 한번 정리해 보려고 한다. 그 전에 내가 만든거 홍보부터 하구..ㅎ 주변에서 나를 솔직히 어떻게 생각하는지 궁금해? 친구들에게 익명 투표를 요청해봐. 친구의 솔직한 속마음을 알 수 있어. 마상은 각오하고… lab.saida.club 차후 출시 될 앱의 사전 페이지라고 할 수 있는 이벤트 페이지인데 요거를 프론트엔드 개발은 혼자 맡아서 진행했다. 혼자 진행한다는게 부담스러운 부분도 있었지만, 그래도 내가 만든 서비스가 출시 된다는 게 더 기대가 됐다. 1주차 2024. 02. 13. ~ 16. 4일밖에..

• format_list_bulleted Personal/Dev_log
• · 2024. 3. 13.
• textsms

[Project] socket.io를 이용해서 채팅 기능 구현하기

이번 프로젝트에서 가장 핵심이 되었던 기능 중 하나인 채팅 기능을 구현했던 과정에 대해서 정리해보고자 한다. Websocket 통신 방식은 HTTP 통신 방식과는 차이가 있었고, 처음 해보는 기능이라 학습과 병행하면서 진행했어야 했는데 그러다 보니 개념에 대한 이해를 다소 부실하게 하면서, 기능 구현에만 집중하다 보니 부족한 부분이 굉장히 많았다고 생각한다. 해당 정리 내용은 frontend 측 입장에서 어떻게 사용하는지를 작성한 글이기 때문에, backend나 전체적인 socket.io의 원리 부분들은 다른 글을 참고하길 바란다. 라이브러리 설치 및 세팅 우선 내 글을 보고 도움을 받을 분들을 생각해 미리 내 개발 환경에 대해서 정리를 해보겠다. node ver : 20.1.0 stack : React..

• format_list_bulleted Personal/Dev_log
• · 2023. 9. 5.
• textsms

[Project] 우리동네_6주차 로그

저번주에 다 끝낼 수 있을줄 알았는데, 결국 끝내지 못하고 이번주가 되어서야 마무리 할 수 있었다. 더 이상 지체할 수 없어서 내가 무조건 오프라인으로 만나자고 독촉해서 2일간 마무리를 지을 수 있었다. 첫번째 만남에서는 간이 QA를 진행해서 지금 에러가 발생하고 있거나 기본 기능인데 아직 제대로 되지 않은 부분들을 잡아서 진행했고 두번째 만남에서는 전체적으로 한번 쭉 보면서 미비된 부분과 기획한 부분에서 이뤄지지 않았던 기능들을 적용했다. 이렇게 2일간 정리를 하면서 다시 한번 느낀건 역시 오프라인으로 각잡고 하는게 최고다...?ㅎㅎ What I Do? 우선 주소 입력할 때 직접 입력하던 방식에서 토글 방식으로 변경했다. 기존에는 직접 입력하는 방식으로 구현을 했는데, 유저가 어떻게 적느냐에 따라서 같..

• format_list_bulleted Personal/Dev_log
• · 2023. 9. 2.
• textsms

[Project] 우리동네_5주차 로그

이번주는 지난 3주차 4주차 보다 굉장히 유의미한 결과를 얻을 수 있는 기간이었다. 아무래도 계획했던 3주보다 2주나 일정이 미뤄졌던 탓일까 더 이상 질질 끌 수없다고 생각해서 아예 나랑 백엔드 한분이랑 만나서 각잡고 개발을 진행했다. What I Do? 이번 프로젝트의 핵심 기능이자 가장 해보고 싶었었던 채팅 기능이다. 기존 HTTP 통신 방식이 아닌 WebSocket을 이용한 실시간 통신 방식을 통해 채팅을 구현했는데 사실 이 채팅 기능을 다른 팀원에게 주려다가 다른 기능은 이미 구현해본 내용들이기에 채팅에 도전했는데 처음 프로젝트를 하면서 새로운 기능을 구현했던것 처럼 꽤 기쁜 순간이었다 ㅎㅎ 해당 기능을 구현하면서 공부했던 내용은 차후에 정리해서 남기도록 하겠다. 앞으로도 진행해야 할 기능이 산더..

• format_list_bulleted Personal/Dev_log
• · 2023. 9. 1.
• textsms

[Project] 우리동네_4주차 로그

지난주까지 전체 페이지 레이아웃을 마치고, 레이아웃과 공통 컴포넌트에 대한 리팩토링을 진행했었는데 사실상 이번주에 진행한 내용이 거의 없었기에, 긴급 미팅을 진행했다. 이게 확실히 그전에 프로젝트 할 때는 함께 한 공간에서 모여서 하기 때문에 어떻게든 맡은 티켓을 처리하고 해결하도록 서로가 서로에게 압박을 줄 수 있었고 온전히 그 프로젝트 하나만 신경쓸 수 있었기에 속도면에서 굉장히 빠르게 진행될 수 있었는데 물론 다 핑계고 변명이지만, 우리의 문제는 딱 그거였다. 오프라인, 취준 사실 오프라인은 큰 문제라고 하긴 어려웠다. 나름 카톡으로 요청하면 30분 안에 연락 닿아서 빠르게 처리가 됐기 때문이다. 그래서 이번주의 가장 큰 이슈는 아무래도 취준이 가장 큰 이슈이지 않을까 싶다. 요즘 시장도 시장이지만..

• format_list_bulleted Personal/Dev_log
• · 2023. 8. 31.
• textsms

[Project] 우리동네_3주차 로그

지난주까지는 전체적인 레이아웃을 작업했고, 사실상 이번주가 프로젝트의 마지막 주간이어서 모든 기능을 구현하는 것으로 목표를 잡았었다. 하지만 인간의 욕심은 끝이 없고 같은 실수를 반복한다고 했던가... 3주안에 프로젝트를 끝내겠다라는건 역시 욕심이었구나 라는 것을 깨닫게 되었다. What I Do? 이번주에 진행한 작업은 전반적인 레이아웃의 리팩토링을 진행했다. 내가 담당한 페이지 뿐만 아니라 공통으로 사용되는 모달, 버튼, 인풋 등의 컴포넌트를 확장성 있게 리팩토링했다. 작업 자체는 크지 않았고, 만약 티켓별 점수를 부여하는 상황이라고 한다면 0점이었을텐데 그래도 프로젝트가 끝나고 돌아보면 그래도 이 작업을 진행해 놔서 다행이다라고 느껴졌다 ㅋㅋㅋ 컴포넌트에 대한 사용 방법과 어떤 방식으로 구현이 되었..

• format_list_bulleted Personal/Dev_log
• · 2023. 8. 30.
• textsms

[Project] 우리동네_2주차 로그

지난주에는 기획과 디자인을 진행했고, 이번주부터 본격적인 프로젝트를 진행했다. 사용한 스택으로는 React, Typescript, Styled-components를 사용했다. 일단 해당 스택들을 사용한 이유는 해당 프로젝트를 함께 하는 팀원들이 함께 한 교육생들이었고 기존에 사용해서 익숙한 스택을 사용하는 것이 짧은 프로젝트 기간에 적합하다고 판단했기 때문이다. 이번 주에는 기능을 구현하기 보다는 주로 레이아웃에 대한 부분들이 집중했다. What I Do? 내가 담당한 페이지는 '채팅방 페이지', '마이 페이지' 였다. 거기다가 공통 컴포넌트로 필요한 부분들이 있어서 해당 부분들을 작업 하기로 했다. 왼쪽이 마이페이지, 오른쪽이 채팅방 페이지다. 아직 레이아웃만 구성하고 있긴한데, 확실히 디자인이 잘 된..

• format_list_bulleted Personal/Dev_log
• · 2023. 8. 24.
• textsms

[Project] 우리동네_1주차 로그

최근에 공부하면서 간단하게 할만한 프로젝트를 하나 시작했다. 시작은 사내 프로젝트 시뮬레이션으로 시작했는데, 기왕하는거 기획부터 꼼꼼하게 해서 포트폴리오로 남길만한 프로젝트로 만들어보자 해서 가열차게 한번 시작해봤다. Introduce 프로젝트 명 : 우리동네 소개 : 동네 기반 소셜 네트워크 플랫폼 참여 인원 : Frontend 3 / Backend 2 일정 : 7월 11일~ (3주 예정) UserFlow Chart 해당 차트는 Figjam을 이용해 직접 구현한 Flow Chart다. 여러번의 프로젝트를 진행하면서 기획 단계에서 설정한 User Flow가 탄탄해야 실제 개발할 때 삐걱임 없이 진행할 수 있다는 것을 몸소 체험했기 때문에, 이번에는 1주일의 시간을 들여서 기획 단계부터 탄탄하게 하기로 했..

• format_list_bulleted Personal/Dev_log
• · 2023. 8. 23.
• textsms

[Project] 숫자 야구 게임 만들기

Overview 해당 포스팅은 학습을 진행하면서 구현한 연습의 결과물들을 정리하고, 발전해 나가는 과정을 정리한 글입니다. 해당 프로젝트를 통해 웹에서 발생한 이벤트를 바탕으로 Javscript 기능을 구현하는 방법에 대해 이해했습니다. 이번 포스팅은 기존 작업한 내용에서 발전시킨 내용을 주로 담고 있습니다. Introduce 소개 : Vanilla JS를 이용한 숫자 야구 게임 기간 : 2023년 7월 (1일) 배포 페이지 : https://sstaar91.github.io/VanillaJS_Practice/pages/baseBall/index.html 구현 화면 주요 기능 및 코드 예전에 자바스크립트를 배우면서 간단한 게임을 만들어 봤었는데, 그 중에서 숫자 야구 게임을 만들어봤었다. 그때는 그냥 ..

• format_list_bulleted Personal/Dev_log
• · 2023. 7. 28.
• textsms

[Project] 다시 쓰는 프로젝트 : Tango_Plate (ver 1.0.0)

최근에 위코드에서 작업 했었던 1차 프로젝트가 돌아가는지 궁금해서 clone 받고 확인해 봤는데 아니나다를까 첫 페이지 부터 보이지 않는 에러를 마주하게 되었다. 그냥 두고 볼 수는 없을 것 같아서 기존 기능들을 프론트 단에서 구현 할 수 있는 수준으로 일단 구성을 해 놓은 뒤, 차후 백엔드 API를 만들 수 있는 수준이 될 경우, 백엔드 통신도 함께 구현해서 적용해 볼 예정이다. 다시 구현하는 Tango Plate는 헬창들을 위한 단백질 충만한 맛집을 추천하는 페이지로 변모할 예정 Flow Chart ver 1.0.0 에서의 Flow Chart는 간단하다. Main 페이지에서 List 페이지로 이동하고 Detail 페이지로 이동할 수 있다. (어떠한 분기처리도 없음) 앞으로 버전 업과 API 통신을 통..

• format_list_bulleted Personal/Dev_log
• · 2023. 4. 6.
• textsms