728x90 주요글 [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.. 댓글 1 2022.04.17 [AWS] 서버리스 스택-1 현재 문서는 Serverless-Stack 가이드를 기반으로 문서를 작성하게 되었습니다. 서버리스 스택 가이드를 따라 모든 과정을 진행하면 AWS 서비스를 사용하여 풀스택(full-stack) 개발자 또는 풀스택 서버리스 응용 프로그램을 빌드하는 과정에 대해 전반적으로 경험을 해볼 수 있습니다. 현재 회사에서 사용중인 주 언어가 자바스크립트, 타입스크립트 이며, 현재 작성하는 문서는 자바스크립트를 사용하시는 모든 개발자분들과 프런트엔드, 백엔드를 아울러서 전체 응용 프로그램을 빌드하는 것을 경험할 수 있는 좋은 경험이 되길 바라며 문서를 작성합니다. 프론트엔드 풀스택 웹 어플리케이션이기 때문에 기본적으로 HTML CSS Javscript Typescript에 대해 어느정도 지식이 있는 상태에서 진행하시는.. 댓글 0 2022.03.21 tistory 블로그 시작 tistory를 시작하기 전 Github Pages 호스팅을 이용해서 정적 사이트를 업로드하여 블로그를 운영중이였다. 정적 사이트를 생성하기위해 도구들을 조사하고 그중에 내게 적절한 도구를 선택해서 활용하고 있었다. 하지만, 관리 및 운영적인 측면에서 티스토리가 유리하다고 생각되어 옮기기로 생각을 바꾸었다. (이미 작성이 되어있는 글들은 현재 티스토리로 모두 옮길 예정이다.) 이전에 조사했던 정적사이트 관련 Framework는 아래 내용과 같다. Jekyll 루비 기반 가장 보편적이고 인기많은 정적 사이트 제작 프레임워크 문서가 많아지면 빌드하는데 5분이상이 소요될 수 있음 다양한 테마 Hexo 자바스크립트(Node.js) 기반 다양한 테마 명령어 한줄로 Github, Heroku 등에 배포하기가 간편 .. 댓글 1 2022.03.01 이전다음 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 more 먹방 [이천 카페] 카페 호야 이천쌀로 만든 빙수 [을지로3가 맛집] 떡볶이가 맛있는 을지분식 [숙대입구 맛집] 구복만두 (미쉐린 가이드 2022) [태안/서산 맛집] 큰마을 영양굴밥 [신촌 카페] 빙수가 정말 맛있는 호밀밭 카페 이전다음 728x90