🍒 Chae-ri Dev 🍒

개인 블로그를 개설하여 블로그 이전합니다:) https://chae-ri.dev/ https://chae-ri.dev/안녕하세요:)"Frontend"를 좋아하는개발자 방문해주셔서 감사합니다! 이곳은 매일의 배움과 깨달음을 차곡차곡 기록하는 공간입니다. Legacy 블로그는 여기에서 확인하실 수 있습니다.chae-ri.devhttps://github.com/seocylucky/chaeri.dev-astro-blog GitHub - seocylucky/chaeri.dev-astro-blog: astro 기반 개인 블로그 레포지토리입니다🍒astro 기반 개인 블로그 레포지토리입니다🍒. Contribute to seocylucky/chaeri.dev-astro-blog development by creati..

프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr banned_id의 요소 패턴에 맞춰 user_id 중 매칭되는 경우의 수를 구하는 문제.banned_id와 user_id 요소 서로 길이가 같아야 함.순서 다른 것도 중복 처리, 중복 제거해야 함.dfs와 백트래킹을 이용하면 되는 문제. 📌 접근 방법1. banned_id를 돌면서 user_id를 방문처리해가면서 banned_id 요소와 user_id 요소 비교(비교는 check 함수를 통해 진행)2. check 함수에서 예외 케이스 boolean으로 처리. (각 두 요소의 길이가 다를 때, * 제외한 나머지 문제 다를 때)3. true인 user_id 요소(매..

프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 연산자 우선순위를 변경해가며 최대값을 구하는 문제.우선순위 자유롭게 변경 가능.단, 같은 순위에 여러 연산자가 들어갈 수 없음.📌 접근 방법1. 주어진 문자열을 하나하나 쪼개서 숫자와 연산자를 배열로 저장2. 총 6가지의 연산자 우선순위 경우의 수를 돌면서 연산 수행3. 구한 값들 중 최대값 구하기💟 전체 코드// 연산자 기준 분리 함수function divideExpression(str) { let dividedArr = []; let s = ""; for (let i = 0; i { const currentDividedes = [...divi..

tweenGSAP이 생성하는 애니메이션 정의 객체. 변수로 저장하면 애니메이션을 직접 제어하거나 재사용할 수 있다.const tween = gsap.to(".tiger", { x: 500, rotation: 360, duration: 3, scrollTrigger:{ trigger:'.tigerSection', start:'10% center', // top | center | bottom => 첫 번째: 트리거가 시작되는 기준, 두 번째: 뷰포트에서의 스크롤 위치 (뷰포트의 어느 지점에 왔을때 실행해라) end:'30% 10%', markers:true, // 스크롤이 시작(start)하고 끝나는(end) 시점 마킹 id:'tiger' }}); trigger: 트리거..

요즘 부트캠프에서의 디자인 시스템 프로젝트 개발 작업 스퍼트가 시작돼서 정신 없이 작업 중이다. 그 중 내가 궁금했던 부분이기도 했고 잘 몰랐던 부분에 대해 삽질한 여정을 기록하고자 포스팅을 남긴다. 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 아무리 리액트에서 변경된 사항을 모아서 한 번에 반영한다고 해도 불필요한 리렌더링이 계속 일어난다면 이는 브라우저에게 심각..