Postman22 자바 웹 공부 64 - SpringBoot(새로 만들기16 / 게시판) + Axios 나머지 남은 것들을 차근차근 만들어보자 회원가입 페이지 1. 입력값 미 입력 시 붉게 표시 안됨. front - board -> views-> SignUpCardView -> index 아래 SignUpCardView 아래에 만들어주고 아래로 내려와서 해주고 properties로 받아와야 한다. FirstPage로 가서 추가해 주고 바로 아래 return 쪽에 다음 단계를 눌렀을 때 체크해 주게 만들어줘야 한다. onNextButtonHandler로 가서 FirstPage와 똑같이 만들어주자 다음 단계를 눌렀을 때 빨갛게 변한다. 이메일 주소만 바뀌는 게 보이니 input에 넣었던걸 FormControl로 변경 비밀번호 확인에도 변경 브라우저에서 확인해 보면 모두 바뀌는 것을 확인이 가능하다. 이제 Se.. 2023. 4. 5. 자바 웹 공부 63 - SpringBoot(새로 만들기15 / 게시판) + Axios 오늘은 마무리 작업을 할 거 같다 똑같이 Back-end와 Front-end 서버를 켜고 수정하는 기능을 구현해 보자 front에서 board -> views -> boardUpdateView -> index 아래로 내려와 이쪽에서 이렇게 만들어주고 (input은 복사해서 붙여 넣자) 위로 올라가서 아래로 내려가 onUpda~위에 작성 위로 가서 getBoardResponseHandler위에 아래로 내려와서 추가 위에 minRows를 5로 다시 올라가서 getBoardErrorHandler아래에 적어주자 patchBoard로 가서 넣어줘야 하는 값을 만들어야 하니 api로 가서 만들어주고 돌아와서 onUpdateHandler로 가서 변경하고 브라우저에서 수정을 하면 에러가 뜬다. BoardUpdateVi.. 2023. 4. 3. 자바 웹 공부 62 - SpringBoot(새로 만들기14 / 게시판) + Axios board에서 이미지 추가하는 기능을 구현해 보자 이 버튼을 눌렸을 때 이미지를 추가할 수 있게 만드는 것 views -> BoardWriteView 아래로 내려가면 IconButton이 있는데 이렇게 해주고 새로고침을 하면 생기게 된다. 위로 가서 hidden을 넣게 되면 다시 클릭이 안됨 onImage~를 만들어주자 이렇게 만들고 버튼을 눌러보자 뜨게 된다. 아무거나 사진을 넣고 열기를 하면 뭐가 뜨지를 않는다 그래서 이렇게 만들어주고 위로 가서 event의 타입을 보고 이렇게 만들어 준 뒤 브라우저를 새로고침하고 이미지를 넣고 f12를 켜서 보면 파일에 대한 정보가 보인다. 파일이 들어가져 있는 것을 알았으니 back-end로 보내줘야 한다. Postman에서 body -> form-data 형태로.. 2023. 3. 31. 자바 웹 공부 61 - SpringBoot(새로 만들기13 / 게시판) + Axios 이어서 front-end와 back-end를 합치는 것을 해보자 front -> board -> src -> views -> MyPageView -> myPageContents -> index 주석 해제 시켜주고, 쿠키를 상수로 들고 오고 굳이 return이 필요 없으므로 지워주자 총 코드 constants -> api로 가서 추가해 줘야 위에 에러가 안 걸림 hooks -> paginghooks로 가서 추가 MyPageContent로 와서 아래에 에러가 뜨는데 수정 BoardListItem 가서 추가를 해주고 실행을 하면 에러가 사라져 있다. 로그인하고 마이페이지를 눌러보면 내가 쓴 글이 나온다. 하지만 새로고침을 하게 되면 cookie가 있지만 에러가 걸려서 로그아웃이 되어버린다. MyPageCont.. 2023. 3. 30. 자바 웹 공부 60 - SpringBoot(새로 만들기12 / 게시판) + Axios front-end(React), back-end board를 각각 켜주고 오늘 공부를 시작해 보자 React(front)에 있는 LoginCardView, SignUpCardView index를 보자 SignUpCardView index로 가서 axios 만든 곳 아래 return 사이에 코드를 넣어줄 건데 이렇게 해주고 axios then에 있는 것을 빼주자 그렇게 하고 만든 signUpResponseHandler를 넣어주자 {}, ;을 지우고 위처럼 만들어주자 signUpErrorHandler도 만들어주고 위처럼 똑같이 넣어주자 LoginCardView index로 가서 복사 후 아래 사진처럼 만들어주고 코드를 수정해 주자 utils -> index로 가서 빨간 걸 넣어주는데 빨간 건 바로 위 사진에.. 2023. 3. 29. 자바 웹 공부 59 - SpringBoot(새로 만들기11 / 게시판) + Axios 우리가 이때까지 만든 Spring과 React를 합쳐 버릴 것이다. (Front-end와 Back-end를 합치는 것) 우선 board에서 터미널 하나, front에 있는 board 터미널을 두 개 켜고 (board - spring / front board - React) React에 있는 board에서 npm install axios 실행 여기 가서 axios가 찍혀있으면 설치가 완료된 것이다. axios는 Node기반 js 프로젝트 http 통신이다. 회원가입 처리 React board에 있는 view -> AuthenticationView -> signUpCardView -> index.tsx 여기 줄 그은 것을 지우자 코드를 채워주고 front-end(React) 켜져 있는 터미널에 가서 ctrl.. 2023. 3. 27. 이전 1 2 3 4 다음
