본문 바로가기

분류 전체보기54

개인 sns 프로젝트 'NWITTER' 소개 프로젝트 소개 Nwitter프로젝트는 우주 배경의 테마로 된 학교 커뮤니트 사이트를 구현하는 것을 목표로 한 개인 프로젝트이다. 다니던 학교에 재학생용 커뮤니티 사이트가 없어서 "우리 학교만의 독특한 사이트가 있다면 어떨까?"라는 생각으로, 항공과 우주를 테마로 한 SNS 사이트를 만들기로 결심했다. 많은 학생들이 정보를 공유하고 주고받는 플랫폼을 기획하였고 트위터를 중점으로 참고하여 만들었다. 트위터를 참고한 이유는 많은 사람들이 정보 수집을 위해 트위터를 활용한다는 사실을 알고, 이와 유사한 목적을 가진 커뮤니티를 만들고자 했기 때문이다.하지만 단순한 복제가 아닌 다양한 구성을 만들고 싶어서 인스타그램도 보고 여러가지 sns 웹사이트의 레이아웃을 참고하여 설계를 진행했다. 약 1년정도 기획부터 디자인.. 2024. 1. 21.
재사용 컴포넌트 분리하기 🚨 문제 발생 잘못된 리덕스 사용 저번주에 API 데이터를 redux 대신 react-query 담아오도록 변경했다. ⇒ 이 과정에서 api데이터는 react-query로 가져오고 그중 현재 페이지 트윗데이터는 또 redux로 관리하였다. ⇒ react-query로 가져온 서버데이터를 또 redux에 담는것이 어색하고 불필요하게 느껴졌다. ⇒ redux에 담은 이유는 무한스크롤링에 따라 페이지가 변할때마다 현재 페이지 데이터를 변수에 담아서 트윗 박스에 보내주기 위함이었는데 이 데이터는 다른 곳에서 사용되는 것이 아니라 트윗 페이지에서만 사용되는 데이터이기때문에 store에서 전역변수로 관리될 필요가 없었다. 잘못된 컴포넌트 분리 또한 컴포넌트 파일로 분리한 tweetBox파일에서 데이터를 가져와서 관리.. 2024. 1. 20.
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.
Nwitter 디자인 Nwitter 화면 디자인은 피그마를 활용하여 우주 테마를 중심으로 만들어보았다. 디자인 설명 처음 디자인을 구성할때 원했던 느낌은 우주 배경이었으면 좋겠고 많은 사람들이 연결되어있는것을 느꼈으면 좋겠다는 생각이 들었다. 그래서 Nwitter에 우주 테마를 도입하여, 사용자들이 마치 은하수를 배경으로 우주에서 다양한 사람들과 연결되어서 소통하고 있는 듯한 느낌을 받을 수 있도록 만들었다. 이를 위해 화면 바탕 배경으로 은하수 이미지를 사용했으며, 더하여 친숙함과 연결성을 느끼게 하기 위해 맥북 화면 테마를 적용했다. 마치 인터넷으로 우주속에서 서로가 연결되어서 생각을 공유한다는 느낌이 들도록 디자인해보았다. 화면 구성 인증(Auth), 홈(Home), 프로필(Profile), 탐색(Explore), 북마.. 2024. 1. 20.
다국어 지원 번역파일 db 설계(planetscale, prisma) 왜 데이터베이스를 설계해야 할까? 비용 효율적이기 때문이다 그렇다면 좋지 않는 설계는 ➡️ 많은 시간과 비용이 소요되어 비효율적이다 예) 작은 부분이 변경되었음에도 불구하고 기존 db에 많은 변경이 일어나야한다. → 작은 변경을 수용하기 위해 많은 시간과 비용 소요 예) 고객이 서비스를 이용하는데 시간이 너무 많이 걸려 서비스 이탈 → 수익 감소로 이어짐 비용적으로 가장 효율적으로 운용하기 위해서는 각 상황에 맞은 효율적인 데이터베이스가 필요하다 좋은 데이터베이스 설계란? 효율적인 데이터베이스 설계를 위해서 고려해야될 사항들은 다음과 같다. 무결성 : 데이터베이스 내에 모든 값은 언제나 정확한 값을 유지해야한다. 유연성 : 데이터베이스 구조는 요구사항 변화에 대해 수정이 쉬워야 한다. 확장성 : 데이터베.. 2023. 10. 1.
Planet Scale + Prisma 도입과정 🌱 Planet Scale이란? MYSQL과 호환되는 데이터베이스 플랫폼. 서버리스 DB 플랫폼이라서 우리가 서버를 관리하고 유지보수할 필요가 없다. 그 외에 non-blocking, autoscaling, git과 비슷한 브랜치 기능등을 지원하여 유용하다. Planet Scale의 대표적인 기능 Non-blocking 스키마 변경 Branching workflow Non-blocking 스키마 변경 이 기능은 데이터베이스나 테이블을 블록하거나, 잠그거나, 속도를 늦추는 스키마 변경을 방지한다. 스키마 변경과정 → production(main) 브랜치가 development branch에서 적용하고 → schema diff를 확인한 후, deploy request를 열어 변경사항을 적용하게 된다. 사용하.. 2023. 9. 5.
tailwind css 컴포넌트 크기 조정하기, 자동 줄바꿈 ✅ 적용 목적 grid-cols-4 속성으로 인해 컴포넌트가 고정되어 있었고 이로 인해 사용자 입장에서 보기 불편할 것 같다는 피드백을 받았다. css가 grid-cols-4로 고정되어있어서 브라우저 크기를 줄이면 컴포넌트가 계속 작아졌다. 이러한 점을 개선하기 위해 브라우저가 줄어들면 한 줄에 하나의 컴포넌트만 위치하게 만들고 자동줄바꿈 속성을 넣기로 계획했다. ✅ 적용 방법 grid grid-cols-1 md:grid-cols-4 md 사이즈 까지는 한 줄에 4개씩 배치하고 md 사이즈보다 작아지면 한 줄에 하나씩 배치하는 css 속성을 적용했다. 그리고 각 게시물 개별 단위로는 max-w-2xl 속성을 주어서 게시물의 최대 너비를 제한하였다. ✅ 코드 {dataList.map((data: any) .. 2023. 7. 25.
Tailwind CSS container 적용하기 ✅ 적용 목적 container를 사용하면 컨텐츠의 최대 너비를 제한할 수 있다. 즉 사용자가 사용하는 모니터의 크기와 상관없이 컨텐츠의 최대 너비가 제한되어 있어 예쁜 크기를 유지할 수 있으므로 사용하기로 했다. ✅ Container란? tailwind 공식 홈페이지에는 다음과 같이 container의 사용법을 나타내고 있다. Using the container The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying.. 2023. 7. 25.
React-query Infinite queries 도입하기 ✔️ Infinite Queries 무한 쿼리 기능은 무한 스크롤이나 더보기와 같이 특정 조건에서 데이터를 추가적으로 받아오는 기능을 구현할때 사용하면 유용한 기능이다. ⇒ 무한 쿼리를 사용하기 위해서는 react-query 중에서 useInfiniteQuery 사용하면 된다. ✔️ infinite queries를 사용한 이유 기존에 구현한 무한스크롤링 방식은 데이터를 가져오는 시점인 target에 도달했을때 새로운 데이터를 가져와서 getData라는 배열에 삽입해서 새로운 데이터를 화면에 로딩하는 방식이었다. setAddData([...addData, ...res.data.data]); 하지만 이러한 방식은 새로운 데이터를 가져와서 로딩하는데에는 문제가 없었지만 하트 기능이나 북마크 기능을 눌렀을때 .. 2023. 6. 6.

티스토리툴바