🍒 Chae-ri Dev 🍒

[Vite/디자인시스템] React / NextJS 빌드 테스트 삽질 여정기..

요즘 부트캠프에서의 디자인 시스템 프로젝트 개발 작업 스퍼트가 시작돼서 정신 없이 작업 중이다. 그 중 내가 궁금했던 부분이기도 했고 잘 몰랐던 부분에 대해 삽질한 여정을 기록하고자 포스팅을 남긴다. Woori Design System의 목표안정성호환성보안성원래 목표는 우리 금융 그룹에서 (혹시나 하는 마음으로...) 우리가 제대로 만들면 디자인 시스템을 인수해서 사용해주지 않을까 하는 설레발로 프로젝트를 시작했다. 금융권에서의 기본은 보안이기에, 우리 디자인 시스템에서는 각종 라이브러리들의 의존성을 다 끊어내고 독립적인 디자인 시스템을 만들고자 하였다. (우리 금융 그룹 내에 이미 디자인 시스템을 만들고 있다는 걸 현직자 분을 통해 알게 되어서.. 설레발은 이렇게 끝이 났지만...) 타겟을 우리FIS..

Docker컨테이너 기술을 제공하는 컨테이너 런타임 기술 중 하나로, 컨테이너를 생성하고, 컨테이너에 자신만의 표준화된 실행 환경을 구성할 수 있다. 컨테이너 엔진(Container Engine)인 Docker Engine을 통해 호스트 운영체제(Host OS)의 커널을 공유하여 CPU나 메모리 등의 자원을 격리한 가상의 공간인 '컨테이너(Container)'를 생성한다. 따라서 Docker로 컨테이너화된 애플리케이션은 어느 환경에서든 똑같이 실행된다. 여기서 컨테이너(Container)란? 도커 이미지로부터 만들어진 실행 중인 인스턴스로, 독립된 환경에서 애플리케이션이 동작하도록 한다. 애플리케이션의 소스 코드 및 Application이 동작하는 운영 체제(OS) 및 라이브러리, 종속 항목(Depend..

최근 기업 코테를 보며 자주 접했던 슬라이딩 윈도우에 대해 정리를 해보겠다.(여태 3월 내 기업 코테에서 3번 정도 본 듯...) 슬라이딩 윈도우란?일정한 크기의 윈도우를 배열이나 리스트 위에서 이동시키며 문제를 해결하는 기법이 기법은 주로 연속된 부분 배열에서 최대 및 최소값, 특정 조건을 만족하는 구간 등을 찾는데 사용된다.전체를 매번 계산하지 않고, 이전 값에서 변경된 부분만 계산해 효율을 높인다는 것을 기억하자! 기본 구조누적합과 함께 쓸 때arr = [3, 2, 1, 4, 5]n = len(arr)# 1. 누적합 배열 만들기prefix_sum = [0] * (n + 1)for i in range(n): prefix_sum[i+1] = prefix_sum[i] + arr[i]# 2. 구간합 ..

교내 개발 동아리 디자인 시스템의 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는 대표적인 상용 웹 서버 중 하나로, 클라이언트..