본문 바로가기

sns 프로젝트27

React LCP 성능 개선하기 React 이미지 최적화를 통한 성능 개선하기지난번 Lighthouse 분석 결과 LCP와 Speed Index가 높은 문제가 발생했다.LCP(Largest Contentful Paint)는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 시간을 측정하는 지표로 이 값이 높으면 페이지의in-my-universe23.tistory.com 이전 글에서 이미지 최적화를 통한 성능 개선을 시도했지만 결과적으로 LCP시간이 증가하게 되었다. 그래서 이번에는 배경 이미지가 로딩되기 전에 기본 배경으로 하고 로딩되는 동안 다른 tweet 화면은 보여주도록 하는 코드를 수정해 보았다.  const [isImageLoaded, setIsImageLoaded] = useState(false); useEffect(() =.. 2024. 4. 26.
React 이미지 최적화를 통한 성능 개선하기 지난번 Lighthouse 분석 결과 LCP와 Speed Index가 높은 문제가 발생했다.LCP(Largest Contentful Paint)는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 시간을 측정하는 지표로 이 값이 높으면 페이지의 주요 콘텐츠가 늦게 나타나는 것을 의미한다. Speed Index는 페이지의 시각적인 로딩 속도를 측정하는 지표로, 값이 높을수록 페이지가 느리게 로드된다.  즉 이 문제들은 웹페이지가 느리게 로드되고 사용자 경험이 저하되는 주요 원인 중에 하나이므로 이를 해결하기 위해 여러가지를 시도해보았다. 일단 LCP 콘텐츠가 포함된 최대 페인트 요소를 보니 페이지의 배경화면을 불러올때 많은 시간이 소요되는 것을 확인했다. main페이지에서 배경화면을 지우고 로딩했을때 성능이.. 2024. 4. 26.
JSON 문자열 JAVASCRIPT 객체 변환 오류 오류 발생 redis 채팅 데이터를 프론트에 보내기위해서 json 문자열을 javascript 객체로 변환하려 할때 다음과 같은 오류가 발생했다. const change = JSON.parse(chatData); Unexpected non-whitespace character after JSON at position 73 오류 발생 원인 찾아보니 `JSON.parse` 함수는 단일 JSON 문자열만 처리할 수 있기 때문에 오류가 발생하는 거였다. 해결방법 해결을 위해서는 배열 내 각 JSON문자열을 개별적으로 파싱해야한다. forEach를 통해 각 JSON문자열을 개별적으로 파싱했다. chatData.forEach((item) => { const parsedItem = JSON.parse(item); r.. 2024. 1. 25.
실시간 채팅 기능 수정하기(실시간 채팅 업데이트) 예전에 진행했던 트위터 프로젝트 문서를 블로그에 올리면서 많은 오류를 발생했다. 그래서 최근에 트위터 프로젝트 코드를 다시 고쳐나가 시작했다. 그 중 가장 많이 고쳤던 것은 실시간 채팅 부분이다. 오늘 새로 수정한 부분은 채팅 데이터를 실시간으로 반영해서 화면에 보여지게 하는 코드를 수정한 것이다. 예전의 코드에서는 현재 로그인한 유저가 보낸 메세지만 실시간으로 채팅창에 업데이트 되었지만 이제는 다른 유저가 보낸 메세지도 즉각적으로 업데이트된다. 수정된 코드는 다음과 같다. 처음 채팅 데이터를 받는게 아니라 상대방이 새로운 데이터를 보내면 배열 형태가 아니라 오브젝트 형태로 받게 된다. -> 이를 활용해서 만약 웹소켓으로 받은 새로운 데이터가 단일 객체일때 새로운 코드 추가 -> 새 데이터 채팅를 보낸 .. 2024. 1. 24.
메세지 채팅 기능 구현하기(백엔드 코드, redis 연결 ) 이 글은 아래의 메세지 채팅 기능 구현하기 (프론트 코드)와 이어지는 글입니다! 이번 글에서는 백엔드 코드에 대해서 적어볼 예정입니다. 메세지 채팅 기능 (웹소켓, redis, 실시간 알람 기능) 미리보기 📁 채팅 기능 미리보기 실시간 소통을 위해서 웹소켓 통신 방법을 사용하였고, 채팅 데이터를 저장하기 위해서 redis를 사용했다. redis 를 사용하게 된 이유는 기존에 사용하던 mysql 데 in-my-universe23.tistory.com 미리보기 📁 채팅 기능 미리보기 백엔드 웹소켓을 사용해서 실시간 통신을 구축하고 redis를 통해서 유저들 소켓 아이디, 소켓 채팅 데이터 등을 Redis 클라이언트 설정 및 연결 : 데이터 베이스 연결을 설정하고 관리 소켓 이벤트 핸들러 : 클라이언트와 실시.. 2024. 1. 24.
메세지 채팅 기능 (웹소켓, redis, 실시간 알람 기능) 미리보기 📁 채팅 기능 미리보기 실시간 소통을 위해서 웹소켓 통신 방법을 사용하였고, 채팅 데이터를 저장하기 위해서 redis를 사용했다. redis 를 사용하게 된 이유는 기존에 사용하던 mysql 데이터베이스는 상대적으로 실시간 데이터를 가져오기에는 느릴것이라고 판단했고 redis는 빠른 읽기/쓰기 성능 제공, 실시간으로 데이터 접근하고 업데이트, 빠른 응답 시간 유지 Pub/Sub 기능 제공 (특정 집단에 메세지 전달 유용할것이라고 판단) 같은 장점을 가지고 있기때문에 사용하게 되었다. 이번 게시물에서는 채팅 기능 중 프론트 쪽 코드에 대해서 적어보고자 한다. 기능 설명 프론트 Auth 페이지 로그인하면 login통신으로 로그인한 유저 email과 socketId를 보내줌. Message 페이지 u.. 2024. 1. 24.
SearchBar 검색기능 만들기 📁 SearchBar 미리보기 SearchBar 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 Search bar 만들기 사용할때 실행할 백엔드 API prop으로 받아옴 search 버튼을 누르면 search 상태값 업데이트 . 전역적으로 관리 업데이트된 search 데이터를 가지고 prop으로 받은 API 실행 백엔드 search value값 param으로 받아서 데이터를 찾을때 search value값이 포함된 데이터만 가져오도록 설정 실제 구현한 코드 각 페이지에서 트윗 데이터를 가져오는 API가 다르기때문에 데이터를 가져오는 함수를 넘겨받아서 사용했다. 그리고 searchBar 디자인은 간단하게 tailwind에서 지원해주는 searchBar를 가져와 수정해서 사용했다. const.. 2024. 1. 23.
트위터 팔로우 기능 구현하기(React, CSS hover기능) 구현한 기능 following 클릭하면 follow 로 바꾸기 팔로우중일 경우, 버튼 위에 마우스를 올렸을때 다른 css주기 구현 과정 데이터베이스에 follow 테이블 생성 & user table과 관계 형성 follow 데이터를 저장하는 saveFollow API 코드 생성 데이터를 가져오는 getTweets파일 수정 ⇒ explore페이지의 people데이터를 가져올때, 데이터 중에서 현재 로그인한 currentUser가 팔로우한 유저의 데이터가 있으면 is_follow값을 true값으로 반환(기본값은 false) 팔로우 버튼 css 수정 백엔드 saveFollow 코드 현재 로그인한 사용자의 이메일 아이디를 통해 유저 id를 찾고 팔로우할 유저와 현재 로그인 유저 데이터를 follow model에.. 2024. 1. 22.
Explore 페이지 만들기 📁 Explore 페이지 미리보기 Explore 페이지 기능에 대해서 간단하게 정리해보자면 다음과 같다. SeacrchBar : 키워드 검색 누르면 해당 키워드를 포함한 데이터를 보여줌. Top : 키워드가 포함된 트윗 데이터들을 하트 수가 많은순으로 보여줌 Latest : 키워드가 포함된 트윗 데이터들을 최신순으로 배열 People : 계정정보에 키워드가 포함된 유저 데이터들을 보여줌 실제 구현한 코드 대부분 백엔드 코드는 getTweet API와 거의 동일하게 사용한다. 다른 점은 트윗 데이터를 가져올때 search 데이터를 가져와서 해당 글자를 포함한 데이터를 가져온다는 점이다. Top부분 마지막에 like 숫자에 따라 많은 순으로 데이터를 다시 정렬하여 프론트 보여주게 된다. data: topUs.. 2024. 1. 22.

티스토리툴바