MERN Stack ChatApp
-
8.LoginMERN Stack ChatApp 2024. 8. 5. 14:26
Signup과 마찬가지로 전면 개편했다.거의 비슷해서 딱히 설명할 내용은 없다.API Route방식이 아니라 Server Action방식으로만 해줬다. github : https://github.com/Wunhyeon/ChatApp-MERNStack/tree/8.frontSignin GitHub - Wunhyeon/ChatApp-MERNStackContribute to Wunhyeon/ChatApp-MERNStack development by creating an account on GitHub.github.com
-
7. Front 회원가입 페이지 전면 수정 및 서버통신MERN Stack ChatApp 2024. 8. 4. 18:43
회원가입 페이지를 전면 수정했다.현재 내가 보며 공부하고 있는https://www.youtube.com/watch?v=nvjYCK9oDRU 에서는 react로 만들고 있고, chakra ui라는 거를 사용해 ui를 만들고 있는데서 우선 나랑 차이가 좀 난다. (나는 nextJS로 만들고 있음)또, 이게 좀 옛날 동영상이다 보니 이때 이후로 많은게 업데이트 되었는데,대표적으로 여기서는 form안의 input값들을 전부 useState로 관리하고 있고, 따로 유효성검사도 해주고있지 않다. 그런데 나는 유효성검사도 좀 해주고, 서버와 통신하는 방식도 살짝 다르게 해주고 싶었다.그래서 전부 바꿔줬는데, 시간이 좀 걸렸다.난이도는 그렇게까지 높지는 않았지만, 귀찮음 점수가 꽤 높았다.난이도 : ⭐️⭐️귀찮음 : ..
-
5. express server와 몽고DB 연결하기MERN Stack ChatApp 2024. 8. 1. 11:01
https://www.youtube.com/watch?v=mnHjdgdCK6c&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=8 몽고디비 사이트가서 가입하고, 프로젝트만들고 이런거는 굳이 적지 않겠다.프로젝트를 만들고 나면 클러스터를 만들어야 한다. 클러스터 만들때 유저랑 비밀번호 생성하던가?잘 기억이 안나는데 아무튼 혹시라도 이때 유저랑 비밀번호를 생성한다면 어따가 잘 저장해둔다.그리고 네트워크 액세스에 들어가 내가 접속할 수 있게끔 아이피를 추가해준다.아마 기본으로 현재 아이피가 추가되어 있을텐데, 혹시 아니라면 추가해준다.나중에 서버를 ec2등에 배포하거나 한다면 배포된 곳의 ip도 여기에 등록을 해줘야 디비에 접근할 수 있다. 다음으로 데이터베이스를 눌러서 들..
-
4. 로그인, 회원가입 폼 만들기MERN Stack ChatApp 2024. 7. 31. 19:42
https://www.youtube.com/watch?v=5QcAcfEf-CI&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=7 리액트, 자바스크립트를 => 넥스트, 타입스크립트로 변환, css 와 tailwindCss 미숙으로 꽤 오래 걸렸다.그냥 단순한 로그인/회원가입 화면이다. 여기서 배웠던 점은 일단 css, tailwind css를 사용하며 익숙해져가고 있고, background image등을 파일로 넣어서 사용하고 싶다면 public 폴더에 이미지 파일을 넣고bg-[url('/background.png')] 이런식으로 사용해주면 된다는 것.// app/layout.tsximport type { Metadata } from "next";import { Int..
-
3. 스키마생성MERN Stack ChatApp 2024. 7. 31. 17:59
https://www.youtube.com/watch?v=3wi_fScbF1Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=6 몽고디비 스키마를 생성했다. (몽구스 사용)별 특별한 건 없고, chatModel : 채팅방의 정보. - isGroupChat이라는 칼럼을 만들어 그룹챗인지 아닌지 알 수 있도록 만드는 부분이 흥미로웠다. - lastestMessage : 이 채팅방에서 마지막으로 보내진 메세지를 표시하는 부분인 거 같은데, 이걸 따로 칼럼으로 빼주는 건 별로 생각못했었는데 좋은 것 같다. 역시 NoSQL인가 messageModel : 메세지의 정보. 특별한 건 없다. 유저와 채팅방의 정보를 각각 외래키로 가지고 있고, 콘텐츠(메세지 내용)도 가지고 있다.us..
-
2. 프론트와 연동MERN Stack ChatApp 2024. 7. 31. 17:13
https://www.youtube.com/watch?v=3wi_fScbF1Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=6를 보며 챗웹 만들기를 하고 있다. 그런데 위 동영상에서 리액트를 쓰는데, 리액트 버전이 너무 오래되고, 라우터 형식이라던지 여러가지가 옛날거라서 새롭게 nextJs로 바꿔주며 하고있는데, 생각보다 분투하고있다. 뭐 진도에 관해서는 특별히 쓸 내용이 많지는 않고, 새롭게 알게된 내용이라던지 이런걸 써줘보겠다. 1. 서버와의 연동사실 그동안 nextJs로 뭔가를 만들때는 거의 서버를 따로 만들지 않고 서버컴포넌트를 이용해 풀스택으로 만들었었기 때문에 이번처럼 서버를 따로 만들고 연동해줘보기는 처음이다. (사실 하면서, 그리고 지금도 그냥 expr..
-
MERN Stack으로 챗앱만들기 - 1.서버가동MERN Stack ChatApp 2024. 7. 31. 14:30
MERN 스택으로 챗앱만들기를 하려 한다.MERN 스택하면 예전에 유행?이었지만 이제 지나간 느낌이 없지 않긴한데 유튜브를 보며 따라 만들어보려한다.이걸 하는 이유는 최근에 NextJS 14 + Supabase로 채팅방 만들기 사이드프로젝트를 하는데,웹소켓에 대한 이해가 좀 떨어지다보니(물론 supabase에서 사용하는거랑 살짝 다르긴하지만)약간 난항을 겪고있다고해야하나.하면서도 좀 이상한 느낌도 들고 해서, https://www.youtube.com/watch?v=29FEesnQrjA&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=4이분의 강의를 보며 따라만들어보려 한다.현재 express로 서버 가동하는 것까지 했는데, 예전생각도 나고 재밌다. 그런데 강의에서는 프..