react5 [React] 서버리스 메모앱-5 해당 글은 [React] 서버리스 메모앱-4와 이어집니다. 이번 글에서는 메모 상세조회, 수정, 삭제, 보안 페이지, 배포에 대해서 작성을 하였습니다. 메모 상세조회 메모 목록을 구성했으므로 이제 사용자가 등록한 메모를 수정할 수 있는 페이지를 구성해보자. 우선 src/Routes.tsx 파일에서 /notes/new 경로 아래에 다음 경로를 추가해주자. import Notes from "./containers/Notes"; // 상단에 추가 여기서 URL에 메모 ID를 담아서 보낼 계획이기 계획이다. (React Router URL Parameter) /notes/:id 라우터에 일치하는 경로를 노트 상세 페이지로 보낼 예정이다. 여기서 주의할 점이 /notes/new 경로도 /notes/:id 에 포함.. 2022. 5. 10. [React] 서버리스 메모앱-4 해당 글은 [React] 서버리스 메모앱-3와 이어집니다. 이번 글에서는 React Custome Hook, 회원가입 구성, 메모관련 구성에 대해서 작성을 하였습니다. 백엔드 배포 시작하기전에 앞서 이제 본격적으로 API를 사용해야하므로 프로젝트 루트에서 터미널 명령어로 API를 배포해주고 시작하자 npx sst deploy --stage stage React Custom Hook 우리는 회원가입에서 로그인 페이지에서 사용하는 필드와 비슷한 기능을 필요로 한다. 따라서 이 프로세스를 단순화하고 필드 구성요소를 공유하여 사용하기 위해 공통화를 진행해보자. Custom React Hooks의 대표적인 특징으로 컴포넌트 간에 상태 로직을 재사용하는 방법을 제공한다. src/lib/hooksLib.tsx 파일을.. 2022. 5. 7. [React] 서버리스 메모앱-3 해당 글은 [React] 서버리스 메모앱-2와 이어집니다. 이번 글에서는 AWS Cognito 로그인, 세션, 로그인&로그아웃에 대해서 작성을 하였습니다. AWS Coginto로 로그인 이전에 설치해둔 AWS Amplify를 통하여 Cognito 설정에 로그인을 진행해보자. src/containers/Login.tsx 파일에서 Auth 모듈을 추가해주자. import { Auth } from "aws-amplify"; // 상단에 추가 다음은 handleSubmit() 함수를 아래처럼 변경해주자 async function handleSubmit(event: any) { event.preventDefault(); try { await Auth.signIn(email, password); alert("로그인.. 2022. 4. 24. [React] 서버리스 메모앱-2 해당 글은 [React] 서버리스 메모앱-1와 이어집니다. 이번 글에서는 리액트 라우터에, AWS Amplify, 로그인 폼에 대해서 작성을 하였습니다. React 라우터 설치 Create React App은 기본적으로 많은 것을 설정해주지만 경로를 처리하는 방법은 제공되지 않는다. 현재 구성중인 React 앱은 단일 페이지로 동작하기 때문에 React Router 를 사용하여 이를 처리해보자. React Router를 사용하면 /login 처럼 경로를 지정할 수 있으며 사용자가 해당 페이지로 이동할 때 로드되어야 하는 React Component를 지정할 수 있다. 터미널에서 frontend/ 경로가 맞는지 확인 후 아래 명령어를 실행하자 npm install react-router-dom@5.2.0 .. 2022. 4. 18. [React] 서버리스 메모앱-1 해당 글은 [AWS] 서버리스 스택-4와 이어집니다. 이번 글에서는 리액트 프론트엔드 구성에 대해서 작성을 하였습니다. 우리는 React.js를 사용하여 SPA 웹 애플리케이션을 생성할 계획이다. Create React App 프로젝트를 사용하여 기초적인 설정이 되어있는 상태에서 진행한다. Create React App은 React팀이 공식적으로 지원하며, React.js 프로젝트의 모든 의존성을 편리하게 미리 패키징 해준다. 터미널에서 프로젝트의 최상위 경로에서 아래 명령어를 실행하여 Create React App(CRA) 프로젝트를 생성해주자. npx create-react-app frontend --scripts-version 4.0.3 --template typescript --use npm cd.. 2022. 4. 17. 이전 1 다음
