🤍EC2에 프로젝트 Cone 받기 먼저 깃허브에 코드를 받아올 수 있게 깃을 설치하고 git clone으로 프로젝트를 저장할 디렉토리를 생성한다. sudo yum install git //EC2에 깃 설치 git --version //설치 상태 확인 mkdir ~/app && mkdir ~/app/step1 //프로젝트 저장할 디렉토리 생성 깃허브 https 주소를 복사해와서 git clone을 진행한다. git clone 복사한 주소 ll 명령어로 프로젝트 코드 전체 clone 받아졌는지 확인. 코드들이 수행되는지 테스트 해보기 ./gradlew test 이 gradlew test에서 정말....많은 고생을 했다....ㅠㅠㅠㅠㅠㅠ 처음엔 될 것 처럼 희망 고문을 하더니... 상쾌한 Build faile..
🤍RDS 웹 서비스의 백엔드에서 코드 작성만큼 중요한 것이 데이터베이스를 다루는 일임. RDS는 앞서 구축해둔 AWS에서 지원하는 클라우드 기반 관계형 데이터베이스이다. 🤍RDS 인스턴스 생성하기 AWS 검색창에 RDS를 입력한 다음 RDS 대시보드에서 [데이터베이스 생성] 버튼을 클릭한다. MariaDB(이유 : 가격, Amazon Aurora 교체 용이성) / 표준 생성 선택 템플릿은 프리티어(무료)로 선택!! ✅상세 설정 할당된 스토리지 : 20 으로 DB 인스턴스 식별자 지어주고 마스터 사용자 이름&암호 이건 따로 메모해두거나 꼭 기억해야 함! 퍼블릭 엑세스 가능 : 예 조금 기다리면 생성이 완료됨. ✅파라미터 설정 파라미터 그룹 생성 버튼 클릭, 앞에서 생성한 Maria DB와 같은 버전으로 맞..
앞서 진행한 게시판 프로젝트에 이어 본격적으로 서버 배포를 진행해 보도록 한다. 외부에서 본인이 만든 서비스에 접근하기 위해서는 24시간 작동하는 서버가 필수임. => 그중 클라우드가 가장 유리함. AWS는? 첫 가입 시 1년간 대부분 서비스가 무료임. 클라우드에서 기본적으로 지원하는 기능(모니터링, 로그관리, 백업, 복구...)이 많아 개인 및 소규모일 때 개발에 좀더 집중할 수 있음. 많은 기업이 AWS로 이전 중이기 때문에 AWS 사용 경험은 취업, 이직에 도움이 됨. 사용자가 많아 국내 자료와 커뮤니티가 활성화 되어 있음. 🤍AWS 회원가입 이메일주소, 암호, 영문 주소 등등 입력하고 카드도 등록하고~~ 지원 플랜은 기본 플랜(무료) 선택. 가입 완료! 🤍EC2 인스턴스 생성하기 EC2는 AWS에..
지난번에 만든 구글 로그인에 이어 이번에는 네이버 로그인을 추가해 보도록 한다. 1. 네이버 오픈 API 홈페이지로 이동 애플리케이션 - NAVER Developers developers.naver.com 2. 애플리케이션 이름을 입력하고 네이버 아이디로 로그인 선택 3. 서비스 URL 등록.(=구글에서 등록한 리디렉션 URL 같은 역할) 여기까지 마치면 끝! 클라이언트 ID와 비밀번호가 발급된다. 4. application-oauth.properties에 네이버api 관련 키값들을 수동으로 등록한다. 구글과 달리 네이버에서는 스프링 시큐리티를 공식 지원하지 않아 수동으로 입력 필요. user_name_attribute = response : 네이버 회원 조회 시 반환되는 JSON 형태이기 때문에 res..
위와 같이 페이지 중에서는 아무나 진입 가능한 페이지, 로그인한 회원만 진이 가능한 페이지, 로그인한 회원은 진입하지 못하는 페이지가 있다. 또는 관리자만 진입 가능한 Admin Page도 있다. 이렇게 인증이 이루어져야만 하는 페이지, 혹은 댓글 작성,파일 전송, 파일 업로드 등 인증이 필요한 작업들이 있는데 이러한 인증은 어떻게 할 수 있을까? => higher-order component function을 사용하면 된다. 🔍Auth (HOC) higher-order component function 은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다. 서버에 응답받은 유저의 상태 정보(로그인 여부, 관리자인지 회원인지)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지..
🤍회원가입 만들기 회원가입에는 전에 만들어둔 register.js를 활용할 것이다. 이 화면을 회원가입으로 바꿔보도록 한다. 로그인 화면과 거의 유사하다. onChange 이벤트도 로그인과 거의 유사한데, 한 가지 추가된 것은 비밀번호 확인 이벤트이다. 비밀번호와 비밀번호 확인에 입력한 내용이 같아야 하기 때문이다. const onSubmitHandler = (event) => { event.preventDefault(); if (Password !== ConfirmPassword) { return alert('비밀번호와 비밀번호 확인은 같아야 합니다.') } types.js 에 REGISTER_USER 타입을 추가해 주고 export const REGISTER_USER = "register_user";..
현재 Boiler Plate는 로그인과 회원가입 부분을 Formik과 Yupdlfk이라는 라이브러리를 사용하여 좀더 복잡하게 만들었으나 기본강의이기 때문에 기본 기능만 가진 로그인 페이지를 만들어 보도록 한다. 로그인 이메일 비밀번호 확인 1. 로그인 화면 생성 앞서 언급했던 props, state 중에서 로그인 화면 안에서 데이터 변경 시에는 state에 변화를 주어서 data의 변화를 줄 수 있음. 2. React Hook에서 state 만들 때에는 useState를 사용한다. const [Email, setEmail] = useState("") const [Password, setPassword] = useState("") initialState는 처음 값이 어떻게 되는지 설정하는 것이라 "" 빈칸..
🔍리덕스(Redux)란? state 상태 관리 library 리덕스는 자바스크립트 app을 위한 예측 가능한 (predictable) state container 이다. 리액트뿐만 아니라 Angular, jQuery, vanila JavaScript 등 다양한 framework와 작동되게 설계되었다. 즉, 리액트만을 위한 Library는 아니다. 🔍리액트에 리덕스가 필요한 이유? 리액트로 프로젝트 진행 시 Component 는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다. ✅local state : 각각의 Component가 가지는 state. ✅global state : 어플리케이션 전체에서 global state는 유지, 즉 local state는 glob..