합니다, 개발공부📝 합니다, 개발공부📝

ec2에 서버 배포하고 나서 실행하고 나니 프로젝트는 정상적으로 실행되는 것 같은데, 화면에 Invalid host header 오류가 발생하며 화면 표시가 되지 않았다. 검색해보니 webpack-dev-server 2.4.4 에서부터 host check 기능을 넣어 해당문제가 되는 것을 알게 되었고 그러다 다음의 글을 보고 문제를 해결할 수 있었다! https://bytrustu.tistory.com/73 Invalid host header 오류 Invalid host header 오류 토이프로젝트를 하면서 Nodejs + React 로 프로젝트를 하였습니다. 로컬환경에서는 문제가 되질 않았지만 AWS-EC2에서 프로젝트를 실행해서 주소로 들어가면 "Invalid host header" 라.. bytr..

node js를 통해서 oauth2를 구현하는 방법도 있지만, 라이브러리를 통해서 react(프론트엔드)단에서 바로 구글 로그일을 구현하는 방법도 있다. React Google Login 라이브러리 설치 npm install react-google-login 먼저 해당 라이브러리를 설치해준다. 사용하기 import React from 'react'; import ReactDOM from 'react-dom'; import GoogleLogin from 'react-google-login'; // or import { GoogleLogin } from 'react-google-login'; //로그인 성공했을 떄 처리 함수 const successGoogle = (response) => { console...

리액트에서 onClick 이벤트를 발생시키는데 infinite loop에러가 발생하였다. React Infinite Loop Error onClick={handleOnClick(데이터)} 리액트에서 발생하는 이 무한루프 에러는 onClick 이벤트 렌더링시에 state를 상태를 변경시키는 함수가 있다면 리렌더링이 계속 발생하면서 발생하게 된다. 해결방안 onClick={()=>handleOnClick(데이터)} 다음과 같이 화살표 함수형으로 변경해주면 오류가 해결된다. (참고한 사이트) https://born-dev.tistory.com/4 [React] Too many re-renders. React limits the number of renders to prevent an infinite loop...

프로젝트 진행중 canvas를 통해 화면캡쳐한 이미지로 미리보기를 생성하고 저장할 때는, dataURI형식으로 캡쳐가 되어 데이터를 파일 형식으로 저장히기 위해서 이 데이터를 blob으로 데이터 디코딩을 진행하여 이미지를 저장하도록 설정하였다. 이미 저장된 이미지를 화면에 표시하려고 할 때는, 이미지 타입체크를 하는 함수를 만들어 이미지 타입을 보고 video 인지 img인지 판단할 수 있도록 설정하였다. Data URI Data URI란 이미지 데이타를 base64인코딩을 하여 이미지를 생성하는 것으로 외부 데이터를 파일형태로 저장하지 않고 사용가능하다는 장점이 있으나 인코딩시에 크기가 증가하게 도므로 img파일의 용량이 큰 경우에는 사용하지 않는 것이 좋다. 다음과 같은 형태를 나타낸다. data:i..

리액트와 스프링부트 프로젝트를 진행중에 List를 보내고 싶은데, 단순히 배열을 append하는 것으로는 진행이 되지 않았다. 다음과 같이 이미지하나씩 모두 추가해주어야 전달이 된다. Frontend const bodyFormData = new FormData() images.forEach(image=> bodyFormData.append("multipartFile", image)) deletedImages.forEach(image=>bodyFormData.append("deletedImages",image)) 위와 같이 모든 이미지에 대해서 foreach를 통해서 append해주어야만 multipartFile과 deletedImages에 각각의 이미지 리스트들이 잘 들어가게 된다. Backend @Po..

리액트 학습하는 가장좋은 방법이라는 클론코딩 강의를 보면서 따라하기 시작! 강의는 유튜브를 참고했다. 트위터, 틱톡, 페이스북, 인스타그램등 많이 접해본 앱을 바탕으로 강의를 진행해서 컨텐츠가 매우 다양하고 좋다! https://www.youtube.com/watch?v=B-kxUMHBxNo&t=1424s npm create-react-app fb-clone을 하고, npm start 해서 코딩을 시작하면 되는데, 불필요한 파일들은 강의에 따라서 지우면 된다. 이 클론 코딩은 firebase(구글)을 이용하니 강의에 따라 만들면 되고, firebase구성을 가져다가 복사 붙이기 하면 된다. http://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈..

홈페이지의 맨 아랫부분에 적용될 footer를 만든다. 1. Footer.js components폴더에 파일 생성한다. import React from 'react' import { Link } from 'react-router-dom'; import {Button} from './Button'; import './Footer.css'; function Footer() { return ( Join the Adventure newsletter to receive our best vacation deals You can unsubscribe at any time. Subscribe About Us How it works Testimonials Careers Investors Terms of Service C..

홈페이지에서 products, services, signup 파트를 누르면 나올 홈페이지를 구현한다. 1. Products.js, Services.js, SignUp.js components폴더의 pages폴더에 각각의 파일을 만들고 구현해 놓는다 . import React from 'react'; import '../../App.css'; export default function Products() { return PRODUCTS; } import React from 'react' import '../../App.css'; export default function Services() { return SERVICES; } import React from 'react' import '../../App...