본문 바로가기

전체 글

댓글 및 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 생.. 더보기
entity 생성하기 전체적인 ERD npm install bcryptjs class-validator class-transformer --save npm install @types/bcryptjs --save-dev Base Entity 생서 모든 엔티티에 id, createdAt,updatedAt이 필요하다. 그래서 공통 요소를 상속받아 다른 엔티티를 생성 User Entity 생성하기 Subs Entity 생성하기 @JoinColumn() - @JoinColumn을 통해서 어떤 관계쪽이 외래 키(Foreign Key)를 가지고 있는지 나타낸다. - @JoinColumn을 설정하면 데이터베이스에 propertyName + referencedColumnName이라는 열이 자동으로 생성. - 이 데코레이터는 @ManyToOn.. 더보기
프로젝트 세팅 https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A0%88%EB%94%A7/dashboard 따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS) - 인프런 | 강의 이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다., NextJS, Typescript, ExpressJS, Postgres가장 핫한 풀스택 조합으로 레딧을 클론코딩해요! 👨‍💻 이 강의에서는?[사진] www.inflearn.com Next.js, nod-exoress, typeorm, postgres,docker의 전반적인 흐름을 파악하기 위한 클론 코딩 NextJS Typescript를 이용한 ᄑ.. 더보기
Next.js 오리엔테이션 및 강의 수강 필요사항 정리 패스트캠퍼스의 next.js 강의를 토대로 기록을 하며 공부 https://fastcampus.co.kr/dev_online_nextjs Next.js 완전 정복 : 확장성 높은 커머스 서비스 구축하기 | 패스트캠퍼스 확장성 높은 커머스 서비스를 구축하며 30가지 이상의 기능을 익히는 Next.js 딥다이브 강의! 토스증권 프론트엔드 리드 강사님께 배우고, 실무 노하우와 프론트엔드 개발자 취업&이직 꿀팁까지 fastcampus.co.kr next12.1.6 버전으로 강의 진행 create next-app 으로 만든 프로젝트의 버전이 13으로 업데이트되어 혼란을 느낄 수 있어 깃허브 코드를 보며 학습. 12 버전과 13 버전의 차이점은 next/image 와 next/link 의 사용방식 관련링크 crea.. 더보기

티스토리툴바