neda의 블로그

230820 내일배움캠프 14주차 WIL 새로운 프로젝트의 시작과 기획 월요일에는 프로젝트 발표, 화요일에는 광복절, 수요일부터는 마지막 프로젝트가 시작되었다 이번 프로젝트는 마지막 프로젝트이거 프로젝트 기간이 긴 만큼, 기획부터 탄탄하게 하기로 했다. 주제 선정부터 필요한 기능, 기술 선택까지 다 함께 천천히 고민했다. 특히 이번에는 디자이너분과 협업이 이루어지는 만큼, 기획을 잘 해놓아야 디자인 잡기가 편하다고 생각했다.

230818 React Hydration SSR을 사용하면 정적인 HTML 페이지를 서버에서 렌더링할 수 있다. 하지만 이벤트와 같은 상호작용을 할 수 없는 정적인 페이지일 뿐이다.이때 서버에서는 상호작용을 위한 자바스크립트 파일을 같이 내려 보낸다. 클라이언트에서는 내려받은 정적인 페이지에 상호작용을 추가하는 Hydration을 수행한다. Hydration 서버에서 렌더링된 정적인 HTML 파일을 클라이언트에서 상태와 상호작용을 추가하는 단계 처음 한 번만 수행되고, 이후로는 다시 Hydration하지 않고 클라이언트에서 상태를 통해 관리 장점: 서버에서 HTML을 렌더링하여 페이지 로딩 시간을 줄일 수 있다 SSR을 사용하여 SEO 최적화가 유리하다

230817 CPU와 메모리 CPU와 메모리 CPU 컴퓨터에서 처리를 담당하는 “중앙 처리 장치”. 계산을 잘하지만 다른 지능적인 행위를 하지 못한다 CPU - ALU “산출 처리 장치(arithmetic logic unit)” : 산술이나 논리같은 수학적 연산 AU (산술 장치) + LU (논리 장치)를 합친 디지털 회로 정수 산술 연산: 더하기, 빼기, 부호 뒤집기, 증가, 감소 등 비트 논리 연산: OR AND NOT 등 CPU - CU “제어 장치(control unit)” : 프로세서의 작업을 제어(=지시를 받아서 명령어로 디코딩)하는 회로 BUS 컴퓨터에서, 컴퓨터 간에 데이터를 전송하는 통로 물리적(하드웨어), 추상적(소프트웨어)인 요소를 모두 포함 “내부 버스”: 메인보드에 연결된 메모리 ..

230816 supabase data types 수파베이스 사용을 위한 기본 타입 이름과 설명, 범위 정리 자세한 설명은 www.postgresql.org을 참고 이름 설명 범위 int2(smallint) 부호가 있는 2바이트(16비트) 정수 타입 -32,768 ~ 32,767 int4(integer) 부호가 있는 4바이트(32비트) 정수 타입 -2,147,483,648 ~ 2,147,483,647 int8(bigint) 부호가 있는 8바이트(64비트) 정수 타입 -9,223,372,036,854,775,808 ~ 9,223,372,036,854,775,807 float4(real) 단일 정밀도 부동 소수점 형식으로 32비트를 사용하므로 float32,Single로도 부른다 ±1.175494351 E -..

230814 react 모달이 열릴 때 포커스를 주고 닫을 때 원래대로 돌려주기 모달을 열 때 현재 포커스 중인 엘리먼트를 저장 모달 컴포넌트로 포커스를 이동 const modalRef = useRef(null); const previousFocusRef = useRef(null); useEffect(() => { const focusedElementBeforeModal = document.activeElement as HTMLElement; previousFocusRef.current = focusedElementBeforeModal; if (modalRef.current) { modalRef.current.focus(); } }, []); return( {children} ) 모달을 닫을 때 useE..

230814 KPT 회고 Keep PR 코드 리뷰 열심히 하기 매일 회의와 적극적인 의사소통 문제가 생기면 다같이 의논하고 돕기 알고리즘 문제 풀기 Problem 새로운 라이브러리 사용법을 배우는 시간 소요 react query 심화 주차지만 심화하지 않게 쓴… trouble shooting을 그 때 그 때 잘 요약해서 정리해두지 않았다. 나중에 생각해내기가 너무 어려웠음 반응형 디자인 전체 구현에는 실패.. Try 다음에는 라이브러리 안쓰고, 직접 다 만들어보기 (라이브러리 들어가서 참고, 꼭 필요할 때만 쓰기) 중요(좋아요, 북마크)버튼에 debouncing, optimistic update 처리해주기 새로운 기능을 쓰는 경우 많은 자료로 학습 후 도전하기 클린코드 기반으로 PR 리뷰 조금 더 자세히..

230813 내일배움캠프 13주차 WIL 230813 내일배움캠프 13주차 WIL Facts 리액트 심화주차? 팀 프로젝트를 진행했다. 이번 프로젝트의 백엔드는 firebase가 아닌 supabase라는 PostgreSQL를 사용하는 백엔드 서비스를 이용했다. 또한 Ant Design UI 라이브러리를 사용하여 기본적인 컴포넌트를 구현하지 않고 사용했다. Feelings 파이어베이스에서는 보안과 관련해 별로 신경쓰지 않았는데 supabase에서는 행수준 보안 규칙이라고 해서 행동별로 보안 규칙을 설정할 수 있었다. 또한 테이블끼리 관계를 설정할 수 있어 쉽게 연결하여 다른 테이블 간에 데이터를 함께 사용할 수 있었다. UI 라이브러리는 직접 구현한 게 아닌 만큼, 구현하는 시간은 줄어들지만, 기본 사용법..

230812 ant design을 쓰면서 느낀 점 이번 프로젝트에서는 공용 컴포넌트를 따로 만들지 않고 UI 라이브러리를 사용하기로 했다. MUI와 Ant Design에서 고민하던 중 Ant Design의 작은 크기의 Calendar이 마음에 들어 Ant Design을 선택했다. Ant Design을 사용하기 시작하면서 Button같이 단순한 컴포넌트는 사용하기 어렵지 않았다. 문제는 Select와 같은 복잡한 컴포넌트였다. Ant Design은 선택할 수 있는 값을 options라는 props로 받는다. 반면 MUI는 children을 통해 MenuItem을 받는다. 하위 요소가 노출되어 있는 MUI에 반해 Ant 에서는 볼 수가 없는데, Select 컴포넌트의 Option 요소를 커스텀마이징하려 했을..

230810 React에서 FullCalendar 기본 사용법 fullcalendar 라이브러리를 react에서 조작하는 방법. API 사용법 FullCalendar 컴포넌트를 ref로 참조하여 getApi()를 호출하여 api를 사용할 수 있다 next -> 다음 페이지로 이동 prev -> 이전 페이지로 이동 today -> 오늘로 이동 gotoDate -> 해당 날짜로 이동 const calendarRef = useRef(null); const goToNext = ():void => { if (!calendarRef.current) return; const api = calendarRef.current.getApi(); api.next(); }; return( goToNext()}>다음 페이지로 이..

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()(..