미연시 프론트엔드를 만들었습니다.

1년차 회사 막내 개발자의 일정으로 조금 늦어졌지만 프론트엔드를 완성했습니다.

후.. 어떻게 해도 썸썸편의점 같은 갬성을 살리긴 어렵네요

그래도 나름 만족스럽습니다.

기술은 React.js 로 했습니다.

이전 백엔드 글 https://okky.kr/articles/1509394

작업 과정입니다

1. UI 설계

2. 해당 UI 에 맞게 백엔드 파라미터, 페이징 등 수정

3. 이쁜 애니메이션 캐릭터 뽑기

4. 각 페이지 구현

UI 설계는 간단하게 노트에 그림으로 그려 패스. (악필이라 부끄럽십니다)

자 그럼 이제 정해졌으니 백엔드 업데이트에 들어갑니다.

무한 스크롤을 구현해서 인스타 DM 처럼 만들것이기 때문에 페이징 처리를 했습니다.

후 버그 사항 수정 및 예외 처리 등 처리를 해줍니다

자 이제 백엔드 업데이트가 완료되었으니 이쁜 애니메이션 캐릭터 사진 하나 뽑아보죠

NovelAI 를 사용하여 이미지를 생성했습니다.

? 예쁜 한국인 뽑아달랬더니 화이트 데이에 나올거같은 걸 뽑아놨네

좋습니다... 이정도면 만족스럽군요. 이제 이 사진을 기반으로 다른 표정 여러개를 뽑아줍니다.

아 뭔가 넥타이 같은거 조금씩 변하는거 킹받네 옷 손목 부분이랑

네 여하튼 사진 생성이 완료 되었습니다.

네 이제 리액트앱 시작해서 만들기로 한 페이지 대로 만들어 줍니다

styled components 사용해서 css 를 작성해주고.. 메인 페이지를 들어가봅시다.

음 좋습니다.

CSS 페이드 인 애니메이션을 추가하여 웅장한 기분이 들게해주었습니다. (사진 캡처라 안보이네요)

유저 이름 설정 하는 창을 만들고, 해당 이름을 등록하면 axios 를 통해 DB에 저장되게 했습니다.

아이디는 로컬 스토리지에, 서버에서 IP를 비밀번호로 조회하여 불러오도록 설계했습니다.

좀 설레네요

이제 메인인 대화하는 페이지를 작성해봅시다.

열심히 작성해주고...

실시간 채팅은 맞으나 유저간 실시간 통신 등 (온라인)이 아니기 때문에 웹소켓이 아닌 http 통신으로 설계해서 만들어주었습니다.

좋습니다. 글자도 한글자 씩 렌더링 되도록 하여 설레는 감정을 추가해줍니다.

좋습니다. 제가 이전에 보냈던 메시지는 placeholder 로 보내주는 식으로 대화하는 것처럼 만들었습니다.

자 이제 대화 내역 페이지인데... 무한 스크롤 등 버그, 이슈가 많을 만한 페이지라 가장 오래걸렸던거 같습니다.

인스타 DM 처럼 대화내용 볼 수 있도록 만들었습니다.

음 약간 싼마이 인스타 DM 같군요. 스크롤 바를 좀 없애야하나

처음 렌더링 시 최하단을 보게 만들고

인스타나 카톡처럼 하단이 최신 대화, 상단으로 올릴 수록 과거 대화가 보일 수 있도록 만들어주었습니다.

좋습니다. 상단으로 올리면 페이징으로 이전 데이터를 불러오는군요.

감성이 넘치는 404 페이지도 하나 작성해줍니다.

이렇게 프론트엔드를 완성했습니다.

본업이 백엔드, 데브옵스 쪽이라 아무래도 CSS 가 많이 부족하네요..

음 채팅 화면에 애니메이션 넣어서 수희가 움직이면 좋겠네요..

좋은 아이디어 있으면 댓글 달아주시면 감사드리겠습니다 허허

이제 도커화 시키고, docker compose 로 aws 에 배포해야겠군요

해당 내용으로 또 글 올리고 플레이 할 수 있도록 url 공유드리겠습니다