StudyYeong

AWS AppSyncAWS AppSync는 AWS의 Managed GraphQL 및 Pub/Sub API 서비스이다. 서버리스 WebSocket을 통해 이벤트 소스의 데이터를 구독해 실시간 환경을 만들 수 있다.단일 엔드포인트를 통해 애플리케이션 개발을 간소화하는 서버리스 GraphQL 및 게시/구독 API를 생성하여 데이터를 안전하게 쿼리, 업데이트 또는 게시한다. 실시간으로 데이터를 업데이트해 항상 최신의 데이터를 보여주는 모니터링 대시보드를 만들게되어 AppSync를 활용해보기로 했다. 특징 GraphQL로 구동되는 간소화된 데이터 액세스 및 쿼리 GraphQL 구독 및 게시 / 구독 채널을 위한 서버리스 Websocket Javascript 및 Typescript 지원 내장된 보안, 모니터링, 로깅 및 추적을 활용하고 지연 시간을 줄이기 위한 선택적 캐싱을 활용 (캐싱은 추가 요금 부과) 여러 소스 GraphQL API를 하나의 병합된 GraphQL API로...

node 설치 후 아래와 같은 에러가 발생할 때가 있다. 123456node: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.27' not found (required by node)node: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)node: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)node: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)node: /lib/x86_64-linux-gnu/libc.so.6: version...

MacOS에서 관리자권한으로 앱을 실행하는 방법은 Windows에 비해 까다롭다. 나의 경우 Eclipse 실행을 관리자권한으로 해야 했다. 시스템 자체에서 root 계정으로 로그인 후 사용하는 방법도 있으나 아래 방식은 한 가지 앱만 superuser 권한으로 실행하는 방법이다. Run an app with superuser privileges just once Finder에서 실행하고자하는 애플리케이션의 위치로 이동한다. (Users/sychoi/eclipse/java-2023-06/Eclipse) 앱 아이콘에 우클릭 후 메뉴에서 ‘패키지 내용 보기’를 선택한다. Contents 폴더 내부에서 MacOS 폴더를 찾아 들어간다. 앱 실행 파일을 찾는다. Terminal을 열고 sudo를 입력 후 앱 실행 파일을 Terminal에 끌어놓으면 파일 path가 자동으로 입력된다. root 비밀번호를 입력하면 앱이 실행된다. 참고 How to run Outlook as...

페이지 로드 속도는 매우 중요한 요소이다. 페이지 컨텐츠가 전부 그려지지 못하더라도 무언가 화면에 그려지는 first paint 작업은 최대한 빠르게 처리되어야 유저 이탈률이 줄어든다.webpack을 사용해 bundle을 페이지에 붙이는 경우 bundle의 사이즈가 페이지 성능에 큰 영향을 주게 된다. 따라서 bundle 사이즈를 관리하는 것이 매우 중요하다.Webpack Bundle Analyzer를 사용해 webpack output 파일을 분석해 각 요소의 크기를 시각화하여 볼 수 있다. Github: Webpack Bundle Analyzer 페이지에서 자세한 사용 방법을 볼 수 있다. 설치12# yarnyarn add -D webpack-bundle-analyzer 사용1234567const BundleAnalyzerPlugin =...

점점 더 지저분해지는 import 경로를 도저히 볼 수 없어서 절대경로를 추가하기로 했다. 1import Logo from '../../../../../assets/images/logo.svg'; 우우.. 👎 리팩토링을 진행하면서 컴포넌트를 더 잘게 쪼개다보니 path level이 너무 깊어졌다. 이대로는 안되겠다 싶었다. 적용 방법babel-plugin-module-resolver를 설치한다. 1yarn add --dev babel-plugin-module-resolver 프로젝트 root 경로에 있는 babel.config.js 파일을 열어 아래와 같이 수정한다. 123456789101112131415161718192021module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ // other plugins... [...

각종 리액트 변수 및 함수들을 파라미터로 넘기려는 데 type을 알 수 없어서 몇 번 검색하다가 자주쓰는 건 정리해놓기로 했다. setState React.Dispatch<React.SetStateAction<any>> 123const funcA = (setStateParam: React.Dispatch<React.SetStateAction<string>>) => { // something} onClick Event Handler MouseEventHandler<HTMLButtonElement> 123const funcB = (onClick: MouseEventHandler<HTMLButtonElement>) => { // something} onClick Event React.MouseEvent 123const onClickHandler =...

OAuth(Open Authorization)는 클라이언트 디벨로퍼가 다양한 환경에서 개발할 때 더 간단한 인증 플로우를 가질 수 있도록 고안된 개념으로 인증 프레임워크이다. 데스크탑 애플리케이션, 모바일 애플리케이션, 각종 가정용 디바이스 등 클라이언트 환경이 다양해졌기 때문에 공통의 인증 서버를 두게 되면 훨씬 간편해진다. 개념OAuth는 제 3의 애플리케이션이 제한된 권한으로 접근 가능한 HTTP 서비스에 대해 리소스의 주인 또는 그를 대신하여 인가를 관장하는 인증 프레임워크이다.타 웹 서비스에서 구글이나 페이스북 계정을 사용해 계정을 생성하고 그 계정으로 서비스를 이용할 수 있는 것이 OAuth 라고 볼 수 있다.사용자 정보의 인증을 내 서비스가 아닌 타 서비스에 위임하는 것이다. OAuth 1.0은 consumer, service provider, user로 구성되는데, 여기서는 리소스 서버와 인증 서버의 롤이 정확히 구분되어 있지 않다. OAuth 2.0은...

React에서 setInterval를 사용했는데 설정한 것 보다 여러번 실행되었다. 문제를 찾아보니 컴포넌트가 리로드 될 때마다 hook으로 감싸지지 않은 코드들이 재실행되기 때문이었다. 예를들어 아래와 같이 코드를 작성하는 경우에 그렇게 된다. 12345678910111213141516import React, {useState} from 'react';import AppRouter from './Router';import {authService} from '../fbase';function App() { const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser); console.log(authService.currentUser); setInterval(() => { ...

외부 라이브러리를 다운받아 쓰다보니 class 컴포넌트를 쓸 일이 있어서 한 번 정리하기로 했다. lifecycle 순서DOM이 그려질 때 컴포넌트들은 아래의 순서로 생성되고 소멸한다. Mounting -> Updating -> Unmounting MountingDOM에 인스턴스가 처음 생성될 때의 과정이다. constructor() static getDerivedStateFromProps() render() componentDidMount() 이전에는 componentWillMount(), componentWillReceiveProps() 도 있었으나 이제는 레거시 기능으로써 새로 작성하는 코드에서는 쓰지 않는 것이 권장된다. Updatingprops나 state에 갱신 작업이 발생할 때 일어난다. 즉 컴포넌트가 re-render 될 때 발생한다. static...

Next.js란 풀스택 애플리케이션을 만들 수 있게 해주는 React 프레임워크이다. React를 사용해 프론트를 개발한 뒤 Next.js의 추가 기능을 사용해 더욱 간편하게 개발을 하거나 최적화를 할 수 있다. Next.js는 자동으로 React에 필요한 번들링, 컴파일링 등의 작업들을 수행해준다. 따라서 사용자는 개발에만 집중할 수 있는 환경이 만들어진다. 주요 특징파일 시스템 기반 라우팅실제로 사용하면서 가장 편리하다고 느꼈던 기능이다. 파일 시스템 기반의 라우팅으로 nested routing을 구현하는 것이 굉장히 쉬웠다. Client-side와 Server-side 렌더링을 모두 사용두 가지 컴포넌트를 모두 사용함으로써 Static, dynamic 렌더링을 최적화 한다. Data fetching서버 컴포넌트에서 data fetching을 간편하게 구현할 수 있다. fetch API를 확장한 기능으로 memoization이나 Data caching 등을 사용할 수...