웹 프로젝트75 [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 5. 회원가입 Controller 작성 및 HTTP Post Request 보호되어 있는 글 입니다. 2023. 6. 5. [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 4. React 폴더 구조 세팅 및 Axios로 Spring boot와 통신 보호되어 있는 글 입니다. 2023. 6. 5. [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 3. Entity 및 Repository 생성 보호되어 있는 글 입니다. 2023. 6. 4. [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 2. 데이터베이스 테이블 설계 및 생성 보호되어 있는 글 입니다. 2023. 6. 3. [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 1. 프로젝트 설명 및 개발 환경 설정 보호되어 있는 글 입니다. 2023. 6. 3. [React/Spring Boot/MySQL] 리액트+스프링부트 OAuth2 Google, Facebook, Github 소셜로그인 구현 일지 (스프링 구현x, 리액트 구현o) 완성화면 현재 회원가입 되어 있는 구글 아이디로 로그인하는 과정. DB에 사용자 정보가 저장되어 있지 않을 시 회원가입을 자동으로 진행한다. 오른쪽 상단은 mysql workbench, 오른쪽 하단은 인텔리제이 ide이다. 아직 회원가입되어 있지 않은 구글아이디로 회원가입+로그인을 진행 후 mysql workbench의 user 테이블을 확인하면 새로운 사용자 정보가 DB에 성공적으로 입력되어 있었음을 알 수 있다. 참고 사이트 리액트와 스프링부트를 모두 사용해 본 적이 없어서 로그인 구현부터 난감했다. 구글링을 해서 다양한 솔루션을 따라해보기는 했지만 모두 실패하고 소셜로그인은 포기할까 하던 중 아래 블로그를 발견했다. https://www.callicoder.com/spring-boot-securit.. 2023. 5. 26. [오류해결] git push 오류 (! [remote rejected] main -> main (failure)error: failed to push some refs to ... ) 오류 상황 깃 사용 시 git add . git commit -m "커밋메시지" 위 과정까지 별 이상없이 진행되었는데 git push origin main 입력하자 다음과 같은 오류가 떴다. ! [remote rejected] main -> main(failure) error: failed to push some refs to "레파지토리 주소" 해결노력 1. 원격저장소와 내 컴퓨터 동기화 git pull origin main 2. git pull --rebase origin main 3. 강제 push (파일 꼬일 각오를 하고 강제로 push) git push -f origin main 4. 깃허브 사이트의 오류가 해결될 때까지 기다리기 위의 과정 모두 실행했는데도 해결이 안 되면 gitHub 자체의 .. 2023. 3. 27. [오류해결] Netlify Page Not Found 에러 해결(바닐라JS / React) 오류 상황 Netlify 배포 후 Page Not Found라는 창이 뜨고 웹사이트가 실행되지 않는 오류 바닐라JS 해결 나의 경우 바닐라 자바스크립트를 이용해 웹페이지 구축 중이었는데, index.html을 다른 이름으로 변경해버려서 문제가 생겼다. index.html을 다시 생성해 주었더니 문제가 해결되었다. netlify의 url로 들어가면 가장 먼저 index.html 파일을 띄워주기 때문에, index.html파일이 반드시 있어야 한다. React Router 아래 두 가지 방법 중 편한 방법을 선택하면 된다. 이후 프로젝트를 저장하고 재배포하면 오류가 사라질 것이다. 해결1 리액트 프로젝트의 public 폴더에 _redirects 파일을 생성한 뒤 파일 내에 다음 내용을 입력 /* /index.. 2023. 3. 26. [React/JavaScript/Nodejs/Express] 채팅 기능을 포함한 가계부 프론트 웹 프로젝트 ⭐️ 프로젝트 소개 기존 가계부에 친구 초대, 채팅 기능을 추가한 소셜 가계부 제작 프로젝트 🎢 개발 기간 2022.03.20 ~ 2022.06.06 (1차) ⚙️ 개발환경 및 라이브러리 서버를 두지 않고 리액트로만 CRUD를 작업하였으며, 채팅을 위해서는 nodejs와 express + socke.io를 사용하였다. 추가로, 로그인 구현을 위해 스프링 부트와 mysql을 이용했다. 🚲 동작 방법 1. 인텔리제이 서버 on (서버를 켜지 않을 시 구글 로그인 동작하지 않음) 2. 채팅 서버 on (채팅을 위해 서버를 켜야 함. server 폴더 열고 yarn start) 3. 리액트 서버 on (frontend 폴더를 열고 yarn start) 🚨 'xxx'은(는) 내부 또는 외부 명령, 실행할 수 있는.. 2022. 6. 27. [React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-3. 달력 페이지 구현 가계부 웹 사이트인 만큼 수입, 지출 내역 페이지와 수입 지출을 한 눈에 보여줄 달력 페이지가 메인으로 사용될 것이다. 그래서 서칭을 하다 보니 달력 라이브러리가 있다고 해서 사용해 보기로 했다. https://velog.io/@khy226/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%B1%EC%97%90-%EB%8B%AC%EB%A0%A5react-calendar-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 리액트 앱에 달력(react-calendar) 적용하기 react-calendar 라이브러리로 react 앱에 달력을 적용하는 방법 velog.io 위 블로그 글을 참고했다. CalenderPage.jsx import React, { useState } from.. 2022. 5. 29. [React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-2. 페이지 간 이동 구현 (a href와 Link to의 차이점) 페이지 만들기 우선 대시보드에 연결할 페이지를 여러 개 만들어 준다. CalendarPage.jsx import React from "react"; import styled from "styled-components"; export default function CalendarPage() { return 캘린더; } const Section = styled.section` margin-left: 18vw; padding: 2rem; height: 100%; @media screen and (min-width: 280px) and (max-width: 1080px) { margin-left: 0; } `; 안의 내용은 대강 이 페이지가 어떤 페이지인지 인식만 가능할 정도로 채워준다. 태그를 이용해 내용만 .. 2022. 4. 9. [React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-1. 대시보드 만들기 대략적인 구상도 (구현 전) 완벽하게 똑같지 않더라도 대략 이런 식으로 구현하려고 생각 중이다. 구현 중에 많이 달라질 것 같기는 하다. (구현 후) 최종 구현 이미지는 초기와 완전히 달라졌다. 참고한 UI 소스가 마음에 들어서 거의 그대로 따라갔다. 색상 팔레트 출처: https://www.design-seeds.com/ Design Seeds for all who love color | inspiration & color palettes www.design-seeds.com 바이올렛 베이스의 웹 사이트를 만들고 싶어서 위 색상과 인터넷에서 서칭한 여러 색깔을 사용했다. 구현 UI의 기본 틀은 아래 동영상을 따라하며 구성했고, 바꾸고 싶은 부분은 따로 커스텀했다. styled-components 사용 .. 2022. 4. 8. 이전 1 ··· 3 4 5 6 7 다음 반응형
