List (225) 썸네일형 리스트형 [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - Profile Page 이번에는 프로필을 구성해 보자. 프로필 페이지에서는 이미지 수정, 유저네임 수정, 해당 유저의 글 목록이 필요하다. user 정보 가져오기 프로필 페이지는 현재 접속한 유저의 정보들을 보여주어야 한다. 접속한 user의 정보를 먼저 가져와 보도록 하자. 반환에 필요한 정보를 담은 dto부터 생성해 준다. MemberInfoResponseDto.javapackage com.example.nweeter_backend.dto;import com.example.nweeter_backend.modle.Member;import lombok.Data;@Datapublic class MemberInfoResponseDto { public MemberInfoResponseDto(Member member) { .. [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - spring의 static 폴더에 저장된 파일이 바로 적용되지 않는 문제점 이미지의 파일을 받아서 static폴더에 저장을 했지만, 정적요소를 불러오기 위해선 서버를 재시작해야지만 해당 이미지들이 나타났다. ResourceHandler를 추가로 등록해 주어야 static에 저장된 이미지를 바로 볼 수 있다. WebConfig.java 생성package com.example.nweeter_backend.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcCon.. [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - 글쓰기 및 수정 후 리랜더링 문제 React에서 글 작성, 수정, 삭제가 이제 원하는 대로 잘 이루어졌다. 데이터 베이스에도 해당 정보들이 잘 반영이 되었지만 몇 가지 사소한 문제점들이 있었다. React에서 게시글을 작성, 수정 및 삭제한 후에 백엔드에는 잘 전달되고 데이터 베이스의 영속화는 잘 되었지만, React에서는 실시간으로 반영이 되지 않았다. 처음에는 무식하게 새로고침을 이용해 확인을 했지만, 근본적인 문제해결이 아닌 것 같아 더 공부해 보았다. Props React를 rerendering 시키시 위해서는 state값의 변화를 주는 것이 일반적이다. 하지만 문제는 글을 쓰는 post의 컴포넌트와 글을 불러오는 timeline의 컴포넌트 그리고 글 수정 및 삭제의 tweet의 컴포넌트가 각각 달랐다는 점이다. 큰 구조를 보면.. [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - Board Post board 로그인이 되었으니 이제 글 쓰기를 만들어 보자. 글쓰기에서 서버로 보내주어야 하는 정보들을 한번 체크해 보면 글쓴이, 내용, 사진이다. 기존에 있었던 createdAt이나 부가적인 요소들은 서버에서 처리하도록 한다. 데이터를 받아줄 컨트롤러부터 만들어 본다. 데이터는 String과 file을 같이 받아야 하기 때문에 @ModelAttribute 어노테이션을 사용해서 받아준다. BoardApiController.javapackage com.example.nweeter_backend.controller;import com.example.nweeter_backend.dto.BoardRequestDto;import com.example.nweeter_backend.service.BoardSe.. [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - ReactJS + Spring login test 백엔드의 로그인 구성이 끝났기 때문에 이제 React와 연결을 해서 잘 작동하는지 체크해 보자. 통신을 하기 전에 spring과 react의 주소값이 다르기 때문에 CORS설정을 추가해 주어야 한다. 또한 로그인 형식은 formlogin을 사용할 것이기 때문에 SecurityConfig를 다음과 같이 수정했다.package com.example.nweeter_backend.config;import com.example.nweeter_backend.handler.CustomAuthenticationFailureHandler;import com.example.nweeter_backend.handler.CustomAuthenticationSuccessHandler;import lombok.RequiredAr.. [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - Authentication / Spring Security 기본적인 것들이 준비되어 있으니, 스프링에서의 인증을 구현해 보겠다. 인증은 Spring Security를 사용할 것이다.https://docs.spring.io/spring-security/reference/getting-spring-security.html Getting Spring Security :: Spring SecurityAs most open source projects, Spring Security deploys its dependencies as Maven artifacts, which makes them compatible with both Maven and Gradle. The following sections demonstrate how to integrate Spring Secu.. [React + Spring boot]트위터 클론의 백엔드를 만들어 보자 - model, controller, service https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co 위의 영상을 보고 react를 이용한 트위터 클론코딩을 해보았다. back-end 서버를 사용하지 않고 firebase를 이용해 요청을 처리하였다. 이제 spring을 이용해 firebase가 아닌 back-end server를 직접 만들어보자.현재 react git : https://github.com/leesulgi66/nwitter-reloaded프로젝트 생성https://start.spring.io/ spring boot를 시작해 보자. dependencies는 우선 spring web, lombok, mySQL.. [노마드 코더] ReactJS 트위터 클론 코딩 - Pfofile page 이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co Profile Image 이제 텅 비어있는 프로필 페이지를 만들어보자. 프로필 페이지는 사용자의 프로필 이미지와, 사용자 이름 그리고 마지막에는 사용자가 쓴 트윗내용들이 정리돼서 보일 것이다. export default function Profile() { return ( Wrapper> AvatarUpload> AvatarImg /> AvatarUplo.. 이전 1 2 3 4 ··· 29 다음
