본문 바로가기

react3

개인 sns 프로젝트 'NWITTER' 소개 프로젝트 소개 Nwitter프로젝트는 우주 배경의 테마로 된 학교 커뮤니트 사이트를 구현하는 것을 목표로 한 개인 프로젝트이다. 다니던 학교에 재학생용 커뮤니티 사이트가 없어서 "우리 학교만의 독특한 사이트가 있다면 어떨까?"라는 생각으로, 항공과 우주를 테마로 한 SNS 사이트를 만들기로 결심했다. 많은 학생들이 정보를 공유하고 주고받는 플랫폼을 기획하였고 트위터를 중점으로 참고하여 만들었다. 트위터를 참고한 이유는 많은 사람들이 정보 수집을 위해 트위터를 활용한다는 사실을 알고, 이와 유사한 목적을 가진 커뮤니티를 만들고자 했기 때문이다.하지만 단순한 복제가 아닌 다양한 구성을 만들고 싶어서 인스타그램도 보고 여러가지 sns 웹사이트의 레이아웃을 참고하여 설계를 진행했다. 약 1년정도 기획부터 디자인.. 2024. 1. 21.
Nwitter 프로젝트 전체 진행과정 다음의 프로젝트 개발환경과 전체 진행과정입니다. 이 글에서는 react, typescript를 왜 선택했는지 상태관리를 왜 도입했는지 등 프로젝트에 대해서 크게크게 전체적으로 설명하기 위해서 작성하였습니다. 프로젝트 개발 환경 - 프론트엔드 : React, Typescript, Redux, React-Query, SCSS - 백엔드 : Node.js, Express.js, JWT, WebSocket - 데이터베이스 : MySQL (Sequelize ORM 사용), Redis(채팅서비스) - 클라우드 및 배포 : AWS, AWS RDS, Vercel (프론트엔드와 백엔드 코드 배포) 프로젝트 진행과정 프론트 구축, SPA 도입 Typescript 설치 React를 선택한 이유 - 기존에 html, 바닐라 .. 2024. 1. 20.
React-query Infinite queries 도입하기 ✔️ Infinite Queries 무한 쿼리 기능은 무한 스크롤이나 더보기와 같이 특정 조건에서 데이터를 추가적으로 받아오는 기능을 구현할때 사용하면 유용한 기능이다. ⇒ 무한 쿼리를 사용하기 위해서는 react-query 중에서 useInfiniteQuery 사용하면 된다. ✔️ infinite queries를 사용한 이유 기존에 구현한 무한스크롤링 방식은 데이터를 가져오는 시점인 target에 도달했을때 새로운 데이터를 가져와서 getData라는 배열에 삽입해서 새로운 데이터를 화면에 로딩하는 방식이었다. setAddData([...addData, ...res.data.data]); 하지만 이러한 방식은 새로운 데이터를 가져와서 로딩하는데에는 문제가 없었지만 하트 기능이나 북마크 기능을 눌렀을때 .. 2023. 6. 6.

티스토리툴바