neda의 블로그

230809 React Zustand Modal 전역 상태 관리하기 Zustand Store: 모달 컴포넌트 정보를 Map 객체로 저장 커스텀 훅: Modal을 open,close하는 함수를 만들어서 제공 사용자: 커스텀 훅의 open 함수와 close 함수를 사용해 모달을 조작 1. Zustand로 useOverlayStore 생성 overlays 변수: {id:itemElement} 형식으로 오버레이할 모달 컴포넌트를 맵 객체로 저장 addOverlay 함수: 추가할 오버레이 컴포넌트와 id값을 받아 overlays에 추가 deleteOverlay 함수: 오버레이한 컴포넌트 id값을 인자로 받아 delete 메서드로 overlays에서 제거 const useOverlayStore = create()(..

230808 useViewport()로 미디어 쿼리 없이 반응형 만들기 이번 프로젝트는 처음부터 반응형을 고려하고 만들기로 했다. Ant Design 라이브러리를 사용하기 때문에 전체 레이아웃은 Ant Design의 Layout 컴포넌트를 사용했다.Ant Disign에서는 Layout 컴포넌트를 import 한 다음 구조분해할당을 통해 다시 빼는 방식을 사용했다. 이렇게 사용하기 때문에 Header 컴포넌트를 자동완성으로 가져올 수는 없다 import { Layout } from 'antd'; const { Header, Content, Footer, Sider } = Layout; Layout 컴포넌트를 반응형으로 이러한 Layout 컴포넌트에는 style props를 통해 직접 스타일 지정해 줄 수도..

230807 새로운 프로젝트 시작 프로젝트 제목: 시간이 금이다 프로젝트 설명: 시간 관리를 위한 일정 관리와 할일 목록 관리를 위한 웹 기술스택 타입스크립트 사용하는 모든 라이브러리들이 이미 타입스크립트를 지원한다. 정적 타이핑을 통해 안전성을 높일 수 있다 리액트 쿼리 서버 상태를 쉽고 효율적으로 다룰 수 있다. useInfiniteQuery를 통해 무한 스크롤을 쉽게 구현할 수 있다 Zustand 기존에 사용하던 Redux보다 보일러 플레이트가 적고 쉽다는 이야기가 많아 한번 써보기로 했다 React-Router 클라이언트 측 라우팅을 지원하여 페이지를 나눌 수 있다. 여러 페이지가 필요해서 사용 Supabase 백엔드를 직접 구축하지 않기 때문에 백엔드 서비스를 사용. sql 기반의 백엔드를 경험..

230806 내일배움캠프 12주차 WIL Facts AWS 서비스에 대한 이론 공부 및 실습 리액트 쿼리 심화 강의 듣기- 리액트 쿼리 취소, 프리페칭, 인피니트 스크롤쿼리 등 Feelings aws에는 정말 다양한 서비스가 많이 있었다. 하지만 aws는 뭔가 진입하기 어려운 느낌이 있다. 홈페이지에서부터 알 수 없는 말들이 화면을 꽉채우고, 유료임을 계속 염두해야 하다 보니 신경 쓸 게 많다. 그리고 UI 뭔가 딱딱하고 오래된 느낌이 들었따. 그럼에도 ec2나 s3 같은 클라우드 서비스는 별도의 세팅없이 그냥 바로 사용할 수 있어서 편했다. 리전 별로 나뉘는 서비스는 리전까지 고려해야 한다... Findings 웹서버를 구동하기 위한 EC2, 웹 서비스에서 필수적인 파일 업로드 기능을 가능하게 해주는 ..

230804 AWS RDS(Relational Database Service) 클라우드에서 관계형 데이터베이스를 관리하는 AWS의 데이터베이스 관리 서비스 특징 다중 AZ를 사용한 가용성, 내결함성 지원 읽기 전용 복제본을 사용하여 기존 인스턴스 확장없이 성능 향상 자동 백업과 스냅샷 기능 지원 데이터 베이스 엔진 Amazon Aurora MySQL 호환 버전, Amazon Aurora PostgreSQL 호환 버전, MySQL, MariaDB, PostgreSQL, Oracle, Microsoft SQL Server 다중 AZ(Multi AZ) 기존의 데이터베이스 인스턴스를 복제하여 가지고 있는 보조 데이터베이스 역할 고가용성: 기본 인스턴스 장애 발생 시 대기 인스턴스를 사용하여 고가용성 지원 Ama..

230803 AWS Elastic Load Balancing 로드 밸런서는 네트워크 트래픽(부하)을 여러 서버로 균등하게 분산시켜 안정성을 높인다. 장점 가용성 (Availability), 내결함성 서버 장애와 같은 문제로 인해 서버 중지 시 다른 가용한 서버로의 리디렉션을 통해 서비스를 지속 확장성(Scalability) 서버의 트래픽 상태에 따라 탄력적으로 서버를 확장하고 축소하여 병목을 방지하고 안정적인 서비스를 지속 애플리케이션 보안 사용자와 서버 그룹 사이에 위치한 로드밸런서는 보안 계층을 추가하여 대량의 트래픽 공격이나 악성 콘텐츠로 부터 서버를 보호 로드 밸런싱 하나의 서버에 트래픽이 몰리지 않도록 여러 서버에 부하를 나누는 방법 정적 로드 밸런싱 현재 서버 상태와 무관하고 고정된 규칙에 의..

230802 AWS EC2(Elastic Compute Cloud) AWS EC2는 클라우드 컴퓨팅을 위한 서비스로, 온디맨드로 다양한 컴퓨터 용량을 제공하고 원하는 시간만큼 사용하여 비용을 조절할 수 있다. 가상 서버를 대여함으로써 서버 구축을 하지 않고 빠르게 애플리케이션을 제작하고 배포할 수 있다. 지원 운영 체제 리눅스 배포판부터 윈도우즈까지 다양한 운영 체제를 지원 Amazon Linux 2 Red Hat Enterprise Linux CentOS SUSE Debian Ubuntu Windows 등 인스턴스 EC2에서는 가상 서버 단위를 인스턴스라 부른다. 인스턴스 별로 다른 설정이 가능하다 인스턴스 유형 서버 인스턴스 유형은 규칙에 따라 알파벳의 조합으로 분류된다. 각각 컴퓨팅 스토리지 메모리..

230801 AWS IAM(Identity and Access Management) aws 2주차 IAM 학습 내용 정리 IAM 이란 Identity and Access Management AWS 리소스에 대한 인증과 액세스 권한을 제어를 담당하는 AWS 제품(서비스) AWS에는 수백개의 다양한 제품이 존재한다. IAM은 이 제품과 리소스에 대해서 최소 권한을 보장한다. 사용자에게 작업에 필요한 권한만 최소한으로 부여함으로써 사용자의 권한 남용을 방지하고, 계정 유출과 같은 사고 발생 시에 피해를 줄일 수 있다. 자격 증명은 단시간만 사용할 수도 있고, 장기간 동안 사용할 수도 있다 자격증명 IAM 역할을 통한 임시 보안 자격 증명 IAM 사용자를 통한 장기 자격 증명 IAM 3요소 - 사용자 · 그룹 ..

230731 알고리즘 4-합계 자바스크립트 문제풀이 문제 정수 배열 nums와 정수 값 target이 주어질 때, 배열 nums에서 4개의 원소를 선택하여 합 했을 때, target과 같은 값이 되는 모든 부분 배열을 출력하라 4Sum - LeetCode Can you solve this real interview question? 4Sum - Given an array nums of n integers, return an array of all the unique quadruplets [nums[a], nums[b], nums[c], nums[d]] such that: * 0 a - b); // 결과 배열 초기화 const results = []; //첫 번째 원소 탐색 for (let i = 0; i..

230730 내일배움캠프 11주차 WIL Facts 새로운 팀과 함께 타입 스크립트 1주차를 시작했다 이번에는 매일 알고리즘을 풀기로 했고 풀었다 기존의 TodoList 프로젝트를 자바스크립트에서 타입스크립트로 마이그레이션했다. Feelings 타입스크립트를 기존의 프로젝트에 적용하니 신경 써야 할 게 더 많아졌다. 타입을 항상 고려해야 하고, 코드 여기저기에 타입스크립트 문법이 추가되어 코드를 읽고 이해하는 시간이 더 길어지는 것 같다. 알고리즘 문제를 다 함께 푸는 것은 좋은 방법이다. 자기가 생각한 방법이 아닌 다른 사람들의 생각을 공유할 수 있고, 더 좋은 코드를 발견할 수도 있다. Findings 공통으로 쓰는 타입과 관련된 코드는 import하기 편하도록 따로 폴더를 만들어 관리하는 것이 좋을..