분류 전체보기 89

[Programmers / Level3] 불량 사용자 (JavaScript)

프로그래머스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 요소(매..

[Programmers / Level2] 수식 최대화 (JavaScript)

프로그래머스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..

[GSAP] ScrollTrigger 활용 - 스크롤 기반 좌우 슬라이드(Scrub)

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: 트리거..

GSAP 2025.06.24

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

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

프로젝트 2025.04.12

[Docker] Docker를 통해 NextJS 프로젝트 띄우기

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

Cloud/Docker 2025.04.01

[Algorithm/Python] 슬라이딩 윈도우 알고리즘 정리

최근 기업 코테를 보며 자주 접했던 슬라이딩 윈도우에 대해 정리를 해보겠다.(여태 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. 구간합 ..

[React/디자인시스템] 선언적으로 Snackbar 구현하기

교내 개발 동아리 디자인 시스템의 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.16

[우리FIS아카데미 4기] 클라우드 서비스 개발 과정 5주차 회고

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

[React] 오픈소스와 함께 알아보는 React.memo, useMemo, useCallback

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

React 2025.02.09

[React] 브라우저 + 리액트 렌더링 과정에 대해 알아보자

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

React 2025.02.09