clone toy projects 썸네일형 리스트형 배포 아래와 같이 배포하는 방법에서는 여러가지가 있다. 최종적으로 배포할 방법은 아래와 같다. 1. ec2 인스턴스 생성 2. 보안그룹 설정 3. 키페어 생성 4. 인스턴스에 연결 1~4 까지는 이미 많이 해봄 5. 도커 설치 https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04 위 링크 진짜 개 맛있다 ! 직빵이네 얌얌굿 5-1 , sudo apt install docker-compose 6. ec2로 리액트 파일 가져가기 깃 클론으로 가져옴 ㅇㅇ 7. 도커 pg 실행 sudo docker-compose up 클라이언트 배포를 위한 소스 코드 변경 이젠 로컬 호스트가 아닌 위 aws url 로.. 더보기 유저 페이지 생성 유저 데이터 가져오기 유저 데이터 가져오는 api 생성 더보기 무한 스크롤 [useSWRInfinite, Intersection observer] SWR은 페이지 매김 및 무한 로딩과 같은 일반적인 UI 패턴을 지원하기 위해 전용 API useSWRInfinite를 제공한다. https://swr.vercel.app/ko/docs/pagination#useswrinfinite api 생성 리스트 나열하기 Intersection observer Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차 점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보 이는 요소인지 아닌지를 구별하는 기능을 제공한다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌 더링 성능이나 이벤트 연속 호출 같은 문제없.. 더보기 댓글 및 vote 댓글 생성하기 로그인 시에는 코멘트 작성 input 보여주고 아닐 시에는 로그인 해야하는 문구 보여주기 handlesubmit 함수 및 api 포스트 댓글 가져오기 코멘트 리스트 가져오기 api 생성 댓글 리스트 UI 생성 useSWR mutate 포스트의 댓글을 한번 생성해보자!!! 생성했는데 바로 화면에 보이는 게 아닌 새로고침을 해야지 보이게 된다!! 그 럼 바로 보이게 하려면 어떻게 해야 하나? 댓글 생성 후 mutate 함수 실행 mutate 캐시 된 데이터를 갱신하기 위한 함수 useSWRConfig() hook으로부터 mutate 함수를 얻을 수 있으며, mutate(key)를 호출하여 동일한 키를 사용하는 다른 SWR hook*에게 갱신 메시지를 전역으로 브로드캐스팅할 수 있습니다. 포스트.. 더보기 포스트페이지 만들기 사이드바 Post Create page 생성 권한 없는 유저는 login 페이지로 이동 api 생성 getSUb 핸들러에서 sub 데이터에 posts 데이터 추가 post Data가져오기 fectch를 계속 가져오는것이 비효율적이라 한번에 넣어주기 api 생성 ui 생성 더보기 커뮤니티 UI 생성 기능생성 많은 핸들러에서 유저 정보를 필요로 하고 유저 정보나 유저의 등급에 따 라서 인증을 따로 해줘야한다. 핸들러에서 유저 정보를 필요로 하고 ====> User Middleware 유저 정보나 유저의 등급에 따라서 인증을 따로 ====> Auth Middleware 여러 곳에서 많이 쓰이는 것은 항상 재사용성을 위해서 분리해주기 (미들웨어로 분리) 프론트단의 모든 axios 요청에 true로 설정 (cors때문에) npm install cookie-parser npm i --save-dev @types/cookie-parser 백엔드 단에서도 쿠키를 받기 위해 cookie-parser 설치 커뮤니티 생성 완료 Navagation Bar * 상위 커뮤니티 생성 * 로그인 시 커뮤니티 만들기.. 더보기 로그인 withCredentials : true 로그인 시에 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인한 후에 cookie에 token을 발급한다. 하지만 백엔드와 프론트엔드의 주소가 다른 경우 로그인이 성공하더라도 별다른 에러도 없이 인증이 X. 이 이유는 도메인 주소가 다르면 쿠키가 전송이 되지 않기 때문. 이 방법을 해결하기 위해서 프론트에서는 axios 요청 보낼 때 withCrendentials 설정해주며 백엔드에서는 cors 부분에 credentials true로 해줘서 Response Header에 Access-Control-Allow-Credentials을 설정. 로그인 api 생성 npm install jsonwebtoken dotenv cookie --save npm i -.. 더보기 회원가입 npm i -D postcss-preset-env tailwindcss npx tailwind init touch postcss.config.js PostCSS CSS를 조금 더 현대적으로 바꿔주는 플러그인. POST CSS는 JS 플러그인을 사용하여 CSS를 변환시키는 툴. POST CSS는 언어가 아니라 자동으로 현대적인 CSS를 호환 가능하도록 변환시켜주는 플 러그인일 뿐이다. POST CSS는 CSS에 문제가 없는지 미리 확인해서 에러 로그를 준다. PostCSS 자체는 아무 일도 하지 않고 다양한 플러그인과, 플러그인을 추가할 수있는 환경을 제공 npm install classnames --save npm install axios --save axios 베이스 url 설정 요청에 맞는 api 생.. 더보기 이전 1 2 3 4 ··· 8 다음
