IT
-
Electron JS
개요 2021년 12월부터 회사 팀을 옮기면서 메인으로 담당하고 있는 메인 프로젝트 중 하나가 Electron JS로 개발되어 운영 중에 있다. ElectronJS을 사용함에 있어 동작 방식과 구조를 파악할 필요성이 있어서 공식 문서를 읽고 중요 포인트를 정리해 보았다. Electron? Electron JS는 JavaScript, HTML, CSS를 사용해서 크로스 플랫폼(Mac, Window, Linux OS) 데스크톱 앱을 빌드하고 개발할 수 있는 프레임워크이다. Electron은 자체적으로 Chromium과 Node.js를 내장하고 있다. 이는 순수 자바스크립트 코드 베이스로만 개발자가 네이티브 언어 개발 경험 없이 보다 쉽게 데스크톱 앱을 개발할 수 있으며 프레임워크에서 개발에 필요한 다양한 도..
2022.12.21
-
[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.05.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.05.07
-
[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.04.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.04.18
