본문으로 건너뛰기

Amazon Cognito로 사용자 관리하기

소개

Amazon Cognito는 웹 및 모바일 앱에 대한 사용자 인증 및 승인을 처리한다. 사용자 풀을 사용하면 앱에 가입 및 로그인 기능을 쉽고 안전하게 추가할 수 있다. Identity pools를 사용하면 앱은 사용자가 익명이든 인증되었든 특정 AWS 리소스에 대한 액세스 권한을 부여하는 임시 자격 증명을 얻을 수 있다.

미국, 수술실이라는 특수한 환경에서 사용하는 애플리케이션을 개발하면서 사용자 요청을 최소화하기 위해 ML model 적용, 제스쳐 동작 등 다양한 시도를 하였다. 이번에는 사용자 인증과 관련하여 어떻게 하면 불필요한 과정을 줄이고 보다 안전하게 적용할 수 있을지 고민하며 Amazon Coginto를 적용한 내용이다.

기술 블로그 내용 공유 스터디 첫주차 리뷰

소개

매주 꾸준히 글을 작성하기 위한 동기부여 겸, 다양한 분야의 소식들을 다른 개발자분들과 공유하는 시간을 가질 겸, 다른 사람들 앞에서 발표해보는 연습도 할 겸 F-Lab dev club에서 활동중인 개발자분들을 모아 스터디를 만들었다. '제대로 진행이 될까?' 우려했던 것과는 달리 다들 열정도 있고 실력도 좋으셔서 잘 따라가기만 하면 될 것 같다.

이 글은 이번 첫 스터디 모임에서 공유한 주제들을 정리한 내용이다.

오픈소스 패키지 배포 시 고려해야할 것들

소개

Flutter 환경에서 커스터마이징 가능한 움직이는 아이콘 개발과 배포를 진행하면서 찾아본 내용들을 정리하였다. 어떻게 하면 좀 더 많은 사람들이 편하게 활용할 수 있도록 작성할 수 있을 지, 어떻게 코드를 작성해야 다른 사람들이 코드를 확인하고 수정하기 더 편할지를 생각하며 성공한 여러 오픈소스 패키지들을 참고하고 관련 글을 찾아본 내용들을 정리하였다.

퓨처 플러터 컨퍼런스 톺아보기

소개

조금 늦었지만, 2024년 9월 28일 진행된 Flutter 컨퍼런스 Future Flutter에서 들었던 내용을 정리하고, 실제 회사에 적용해보며 겪었던 이슈들에 대한 내용을 정리한 글이다.

스토리북 적용기

소개

UI Component를 문서화하여 보기 쉽게 정리하고 각 컴포넌트별로 변경사항을 따로 확인하도록 하여 디자이너와 좀 더 빠르고 명확하게 커뮤니케이션 하기 위해 회사 FrontEnd에 Storybook을 도입하였다. 이번 내용은 Storybook의 적용 방법을 간단히 작성하고 아직 해결되지 않은 문제를 정리한 내용이다.

리액트가 컴파일될 예정입니다

Korean FE Article Team 에서 번역해주는 FrontEnd 소식을 아카이브 하였습니다.

소개

최근 리액트 팀은 리액트 19의 릴리즈를 발표한 블로그 게시물에서 리액트 컴파일러를 함께 발표하여 현재 리액트 컴파일러는 프론트엔드 개발자들의 뜨거운 관심을 받고 있습니다.

이 글에서는 리액트 컴파일러가 나오기 전까지의 과정과 컴파일에 대한 의미를 소개하고 있습니다. 리액트 컴파일러가 나오기 전과 후의 과정들에 대해 관심을 가지고 계시다면 가볍게 읽어보시길 추천드립니다. 🙂

목차
  1. 컴파일된 리액트는 hooks의 주요 문제를 해결합니다
  2. 메모된 리액트
  3. 메모이제이션에 의존
  4. 우리는 항상 리액트를 컴파일 해왔습니다
  5. 컴파일은 스펙트럼입니다
  6. 자동 메모이제이션을 위한 컴파일

깜빡이는 UI를 거부하세요. useLayoutEffect, 페인팅 그리고 브라우저 이야기

Korean FE Article Team 에서 번역해주는 FrontEnd 소식을 아카이브 하였습니다.

no-more-flickering-ui_welcome

소개

이번 글은 평소 사용하는 리액트의 useEffect를 사용할 때 발생하는 깜빡인 현상을 주제로 평소 사용하는 브라우저의 주요 개념인 동기/비동기 개념을 중심으로 useEffect와 useLayoutEffect에 대해 깊이 있게 설명하는 글입니다.

자바스크립트의 관점으로 리액트에선 두 effect를 통해 어떤 방식으로 사용되는지, 쓰임새와 성능, 더불어 SSR까지 흐름으로 두 effect 훅에 대해 딥 다이브하기 좋은 글이 될 것 같습니다.

목차
  1. useEffect의 문제점이 뭘까요?
  2. useLayoutEffect로 수정하기
  3. 해결법이 효과적인 이유: 렌더링, 페인팅과 브라우저
  • useEffect와 useLayoutEffect 비교로 돌아가기
  • useEffect에 대해 좀 더 자세히 알아보기
  1. Next.js의 useLayoutEffect와 기타 SSR 프레임워크들

Refs in React - DOM 접근에서 명령형 API까지

FrontEnd에 관한 도움이 될만한 자료들을 번역

refs-from-dom-to-api

소개

목차
  1. useRef를 통한 React DOM 접근
  2. 부모 요소에서 자식 요소로 prop로 ref 전달하기
  3. forwardRef로 ref 전달하기
  4. useImperativeHandle를 사용하는 명령형 API
  5. 명령형 API에서 useImperativeHandle 제거하기

Dart 완전 정복 - 효율적이고 강력한 프로그래밍을 위한 8가지 고급 테크닉

Dart에 관한 도움이 될만한 자료들을 번역

소개

구글에서 개발한 현대적인 프로그래밍 언어 Dart는 그 간결한 문법과 강력한 기능, 특히 Flutter 프레임워크와의 연계성으로 개발자들 사이에서 상당한 찬사를 받았습니다. 이 글에서는 기술적 깊이, 영감을 주는 특성, 그리고 Dart 개발 효율성을 크게 향상시킬 수 있는 능력으로 알려진 8가지 놀라운 Dart 프로그래밍 기법을 탐구합니다.

목차
  1. 제네릭 타입 별칭 활용
  2. 스트림에 대한 고급 처리 기법
  3. isolate를 활용한 경량 병렬 컴퓨팅
  4. 열거형(Enum)
  5. const 생성자 활용법
  6. 메타데이터 주석 및 리플렉션
  7. 익명 믹스인(Mixins)
  8. 비동기 프로그래밍 기술