Next.js14 fetch 와 react-query 캐싱 문제점? 넥스트 14 버전을 사용하고 있다. 그 옵션 속성들 중에서도 cache 에 대한 정리가 필요할 것 같아서 작성한다. 넥스트는 fetch 를 사용할 것을 권장하고 있다. 기존의 리액트 프로젝트에서 axios 를 사용하던 나는 권장 사용법대로 사용할 수밖에... 근데 현재 만들고 있는 프로토타입 프로젝트에서 자꾸 이전 캐싱된 정보가 fetch 되는 것 아닌가? 리액트 쿼리의 문제인지 넥스트의 문제인지 아직은 잘 모르겠어서 차근히 정리하고자 한다. 현상황 로그인을 하면 -> 그 회원이 포함된 리스트에 해당하는 정보가 보여야 하는 상황이다. 하지만 기존의 로그인에서 다른 사용자로 로그인을 하면 바로 전의 로그인한 사람의 리스트가 보인다. 매번 db 를 읽어와서 처리해주면 된다고 생각했는데 캐싱된 정보가.. 2024. 3. 14. Flask-session 으로 서버에서 세션 관리 로그인 시 세션 정보를 넘겨주고 싶었다. 기존 Flask 에 존재하는 session 은 클라이언트 측에 세션을 저장하는 방식이므로 매우 위험하다. from flask import session flask-session 하지만 플라스크 라이브러리 중 flask-session 을 설치하고 app에 설정해주면 해당 session은 서버측에 저장되게 된다. from flask_session import Session server_session = Session(app) 이때 꼭 정해야 하는 app config 두 가지는 SECRET_KEY 와 SESSION_TPYE 이다. app 에 여러 설정 들이 늘어나면서 app.py 가 더러워져서 클래스로 분리시켜 주었다. import os, dotenv dotenv.lo.. 2024. 3. 9. Next.js로 SNS x.com 클론코딩하기 - 12 Optimistic update 복습 전 포스팅에도 언급했었지만 긍정적 업데이트는 곳곳에 잘 쓰이는 편이라 팔로우/언팔로우 기능을 가지고 복습 겸 정리를 합니다. Optimistic update 란 사용자가 서버에 요청 시 성공될거라는 가정(긍정적)으로 미리 UI를 업데이트 시켜준 다음 -> 서버 검증 후 -> 업데이트/롤백을 하는 방식 이 방식을 통해 동작에 대한 빠른 피드백을 받을 수 있어서 애플리케이션이 빠르게 반응한다고 느껴 UX 경험이 향상됩니다. 다만 의문점이 생길 수 있는 게, 그저 서버의 성능을 높이면 되는 문제라고 여길 수 있는데 이는 사용자의 네트워크 환경이 어떠냐에 따라 서버의 성능과는 무관하게 응답 속도가 달라질 수 있습니다. 그렇기에 그저 단순히 서버 성능을 높이면 되는 것과는 다.. 2024. 2. 18. Next.js로 SNS x.com 클론코딩하기 - 10 게시글 업로드 게시글을 올리기 위해 사용하는 textarea 의 크기가 자동으로 설정되게 해주는 라이브러리를 설치해줍니다. npm install react-textarea-autosize import reactTextareaAutosize from "react-textarea-autosize"; 그저 단순히 텍스트 에리어의 크기를 늘려주는 라이브러리라 따로 설정할 건 없습니다! 게시글 이미지 프리뷰 const [preview, setPreview] = useState([]); 우선 프리뷰 이미지를 담아줄 useState 를 지정해주고, 파일을 업로드하는 버튼에 onChangeFiles 함수를 만들어 줍니다. const onChangeFiles: ChangeEventHandler = (e) => { e.p.. 2024. 2. 12. 이전 1 2 3 4 다음
