목록전체 글 (36)

`프론트엔드 개발자` 개형이의 벽돌집

AWS Amplify 기본도메인, 프로덕션 브랜치 URL 접근 암호화하기

현재 회사에서 int 배포를 amplify를 통해서 하고 있다. amplify로 생성된 기본 프로덕션 브랜치 URL이 존재하는데, 이 URL로의 접근을 차단하고 Route 53을 통해 딴 도메인으로만 접근이 가능하게 하고 싶었다. 그래서 이 기본 도메인의 접근만 차단하는 방식을 기록해두고자 한다. 위 이미지에서 보이는 프로덕션 브랜치 URL로의 접근을 차단할 것이다. 1. 액세스 제어 메뉴 액세스 제어에 처음 접근하면 엑세스 설정이 "공개적으로 허용"이라고 되어있을 것이다. 액세스 관리를 눌러 사용자이름과 암호를 추가해주어야 한다. 그렇게 설정하고 나면! 기본도메인, 프로덕션 브랜치 URL로 접근 시 사용자이름과 비밀번호를 입력하라는 alert가 뜨며 접근이 제한될 것이다. 그런데, 액세스 제어를 걸고 ..
AWS 2023. 8. 5. 22:03
프론트엔드 학습 일지 Day 3 - 팝오버(popover) API

이번에는 Chrome 114 에서 팝오버 Popover API 브라우저에서 제공해준다고 하여 이 것에 대해 알아볼 계획이다. 새로운 팝오버 API는 어떻게 사용할 수 있을까? Day 3 ㄱㅂㅈㄱ~! 팝오버 Popover 란? What is popover? 1. 팝오버는 "메뉴, 토글 팁, 대화 상자(dialog)에서 볼 수 있으며, 계정 설정, 정보 표시 위젯, 제품 카드 미리 보기 등의 형태로 나타나는 컴포넌트" 이다. 팝오버를 구현하기 위해서는 꽤 많은 것을 신경써야 한다. "포커스, 열기 및 닫기 상태, 컴포넌트에 액세스 가능한 훅, 진입 및 종료를 위한 키보드 바인딩" 등등.. 팝오버 기능을 제공하는 라이브러리나 UI 라이브러리 (Material UI, antd, etc..)가 있긴 하지만, 브라..
학습일지 2023. 8. 3. 22:08
Next.js 와 Svg, Material UI SvgIcon 다루는 방법 알아보기

디자이너가 직접 만들어준 아이콘을 Material UI SvgIcon에 넣어 사용하고 싶었다. 차근차근 진행했던 방법을 기록해보고자 한다. 1. Material UI SvgIcon 디자이너는 나에게 svg 아이콘을 파일로 제공했다. 그래서 이 파일을 컴포넌트로 만들어 Material UI SvgIcon에 넣고 싶었다. 관련한 예제는 Material UI SvgIcon Component Prop 에서 확인할 수 있는데, import ArrowIcon from './Arrow.svg'; 위처럼 바로 적용해서 되면 참 좋겠지만, 그렇지 않았다. Svg 파일을 리액트 컴포넌트처럼 사용하기 위해서는 svgr 라이브러리가 필요했다. 끙 2. Svgr 다행히 공식문서 를 보면 쉽게 적용이 가능하다. Next.js 메..
Next.js 2023. 8. 2. 22:13
프론트엔드 학습 일지 Day 2 - 리액트 동시성 React Concurrency

리액트 18 버전과 함께 등장한 동시성 적용에 대해 학습해보고자 한다. 아직 실무에서 적용해본 적은 없는 내용이라 배움에 상당한 기대가 된다. Day 2 스탓뚜! 리액트 동시성 (Concurrency) 살펴보기 1. 동시성이란? 리액트는 기본적으로 다음 뷰를 렌더링할 때 UI를 Blocking 했었다. UI를 블로킹.. 말 그대로 다음 뷰를 렌더링하는 동안 블로킹이 걸려 현재 뷰의 어떤 동작을 수행할 수 없는 것이다. 만약 어떤 컴포넌트 Rendering에 시간이 오래 소요된다면, 기다리는 동안 다른 것을 클릭할 수 없을 것이다. 오래 걸린다고 해서 중단하고 싶어도 중단할 수도 없을 것이다. 하지만 동시성이 적용된다면?! 다음 뷰를 렌더링하는 동안 현재 뷰의 반응성을 유지가 가능해진다. 이를 통해 오래걸..
학습일지 2023. 8. 2. 13:38
Prev 1 2 3 4 5 6 7 ··· 9 Next