🍒 Chae-ri Dev 🍒

교내 개발 동아리 디자인 시스템의 Snackbar 컴포넌트 개발을 진행하면서 고민하고 개선해나간 과정에 대해 정리하고자 한다. 처음에 작성했던 Snackbar 코드다.처음 코드를 작성했을 때 정말.. 잘못 설계했다는 것을 깨달았다. 이유는 다음과 같다.import { useCallback, useEffect, useRef, useState } from 'react';import { IcAlertTriangleFilled, IcCloseFilled } from '@/style';import { StyledErrorIc, StyledIcMessage, StyledMessage, StyledSnackbar } from './Snackbar.style';import { SnackbarHeightType, Sna..

연휴가 끝났다... 너무 슬프다...현실로 다시 돌아왔다...몸이 연휴에 너무 익숙해져서 밤낮이 바뀌고 늦게 자고 얼마 못자고 월요일 시작.....다시 갓생 살기 스타또!2025-02-03-MON이 날 강의실에 딱 들어갔는데 다들 얼굴이 어두웠다. ㅋㅋㅋㅋㅋㅋㅋㅋ나만 힘든게 아니구나... 생각했다.힘을 내서... 수업을 들었다... 오전에는 cypress 테스트 도구에 대해 배워보았다.테스트 도구는 여기와서 vitest만 써봤고 두번째로 배우는 테스트 도구였다.자동으로 테스트 코드 짠대로 화면에서 직접 테스트 도구가 실행해주는 거다.뭔가.... 매크로 돌리는 거 같다.... 짱빠르고 짱 신기했다.너무 빠른 것 같으면 시간도 직접 코드로 조절할 수 있다. 테스트 도구에 대해서도 공부 좀 많이 해야겠다! 이..

프론트엔드 기술세미나를 준비하면서 React.memo, useMemo, useCallback 이 3가지에 대해 꼭 블로그에 따로 정리를 해둬야지 싶었다. 오픈소스를 직접 뜯어보며 이 세 가지가 어떤 원리로 돌아가는지 알아간 것을 정리해보겠다. 먼저 브라우저 및 리액트 렌더링 과정에 대해 알아볼 필요가 있다. [React] 브라우저 + 리액트 렌더링 과정에 대해 알아보자기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있yonyoni824.tistory.com 아무리 리액트에서 변경된 사항을 모아서 한 번에 반영한다고 해도 불필요한 리렌더링이 계속 일어난다면 이는 브라우저에게 심각..

기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있었다.이에 대해 확실하게 정리하고 넘어가고자 포스팅으로 남기려고 한다. 브라우저는 어떻게 HTML, CSS로 작성한 웹페이지를 화면에 렌더링 하는걸까?🤔브라우저 렌더링 과정브라우저는 Critical Rendering Path(CRP)라는 과정을 통해 렌더링이 진행된다.상세 과정은 다음과 같다.1단계 - HTML, CSS 변환(DOM, CSSOM 생성)2단계 - Render Tree 생성3단계 - Layout 과정4단계 - Painting 과정HTML 파싱을 통한 DOM 생성CSS 파싱을 통한 CSSOM 생성DOM 트리와 CSS..

NextJS와 프로젝트에 매진한 4주차...이번주는 너무 정신없었어서 학습일지 정리도 많이 밀렸다.. 흑흑그래도 회고 글은 놓칠 수 없지... 2025-01-20-MON 저번주 React에 이어 이번주는 요즘 다시 급부상하고 있는 NextJS에 대해 공부했다.NextJS왜 풀스택 프레임워크라고 소개한걸까? => 리액트와는 다르게 서버 측 프로세스 코드를 작성할 수 있다.Image 태그 Link 태그 등 로우레벨의 태그들을 NextJS에서 최적화된 컴포넌트로 지원해준다. => 잘 활용하도록 하자. NextJS는 라우터 방식이 두 가지가 있다.pages router => pages 디렉토리 내의 파일 구조 기반의 라우팅app router => app 디렉토리 내의 폴더 구조 기반의 라우팅 Error: Rou..

리액트의 주차였던 3주차!!! 이번주 너무 빠르게 지나갔다..바로 회고 포스팅 시작하겠다.2025-01-13-MONReact 기본 개념 정리✏️다양한 기능이 추가되면서 자바스크립트 파일이 커지게 되어 브라우저가 부담되는 부분이 커져감MPA일 때는 첫 페이지에서 두번째로 갈때 새로고침되면서(깜빡이면서) 이동됨SPA일 때는 새로고침 없이 페이지 이동(사용자 경험 개선)dom을 직접 조작하면 성능 저하 발생=> 리액트에서 이를 해소하기 위해 가상dom을 활용함CSR => React서버로부터 받아온 json을 클라이언트에서 변화해서 쓸 수 있도록 한다ex) 구글 지메일 => 처음 실행할 때 로딩하고 페이지 보여줌(로딩할 때 html이랑 자바스크립트 번들 파일을 불러오는 것)SSR => NextJS요즘은 다시 서..

nginx 관련해서 들어가기 전에 먼저 웹 서버에 대해 간단히 정리하면서 시작해보겠다.웹 서버 웹 서버란 하드웨어와 소프트웨어 측면으로 나누어서 볼 수 있다.하드웨어웹 서버는 웹 서버의 소프트웨어와 website의 컴포넌트 파일들을 저장하는 컴퓨터컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript 파일들이 있다.웹 서버는 인터넷에 연결되어 웹이 연결된 다른 기기들이 웹 서버의 데이터를 주고 받을 수 있도록 한다.소프트웨어기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리HTTP 프로토콜을 사용하여 클라이언트의 요청 처리 및 응답대표적으로 Apache와 Nginx가 있다. nginx nginx는 대표적인 상용 웹 서버 중 하나로, 클라이언트..

Portal이란?부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링을 해준다.즉, 컴포넌트의 상하 관계 구조를 가지고 있는 DOM 상에서 자식 컴포넌트를 부모 컴포넌트의 외부에 있는 다른 컴포넌트에 전달할 수 있도록 해준다. 리액트 프로젝트에서 해당 컴포넌트를 어디에 렌더링 시킬지,사전에 DOM을 선택하여 부모 컴포넌트 바깥에 렌더링해주는 기능이라고 생각하면 된다.ReactDOM.createPortal(child, container) ReactDom의 createPortal 메서드를 활용하여 포탈을 사용해 계층 밖으로 보낼 컴포넌트(child), 포탈로 이동할 목적지, DOM Element(container)를 인자로 넣어준다. 1. 모달이  렌더링할 위치 지정하기index.htm..

useReducer란?상태를 관리하고 업데이트하는 훅인 useState의 대체 함수.useState의 업그레이드 버전이라고 생각하면 된다.다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 useState가 아닌 useReducer 사용을 통해 컴포넌트의 성능을 최적화시킬 수 있다고 한다.(callback 대신 dispatch를 전달하기 때문) useReducer는 다음과 같이 사용된다.const [state, dispatch] = useReducer(reducer, initialArg, init);  state현재 상태 값. useReducer로 관리되는 상태의 현재 값이며, reducer 함수의 반환 값에 의해 업데이트 된다.초기 상태는 in..

2주차 시작!!! 이번주는 JS 주차였는데 꽤나 정리할게 많았다.. 후...실습 정리하고.. 프로젝트하고 하느라 다소 정신 없는 한 주 였지만 그래도 주차별 회고는 빠질 수 없으니 정리를 빠르게 해보도록 하겠다.6일차 2025-01-06-MON미니 프로젝트 발표를 시작으로 JS의 기본 문법을 쭈욱 나간 날이다. JS란 어떤 특징을 가진 언어인지부터 실습과 함께 기본 문법들을 다져볼 수 있었다. 발표 FISA에서 처음한 날인데... 안떨어야지 안떨어야지 하면서 말하다보면 갑자기 목이 파르르 떨릴 때가 있다. 왜그러냐 서채연.원래 발표할 때 안떤다고 생각했는데 요근래 들어서 말을 많이 안해서 그런가(노트북만 보고 있으니...) 깔끔하게 말하는 연습을 해야겠다. 유창하게 말하는 사람이 되고 싶다. 연습을 많이..