수민's 개발 이야기

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 Recoil같은 상태 관리 라이브러리를 사용해야 하는 경우1️⃣ 여러 컴포넌트에서 동일한 상태를 공유할 때 ex) 로그인 상태 , 사용자 정보 , 테마 설정 등❌ useState 사용 : 여러 컴포넌트에서 상태 공유 어려움                              : *prop drilling 이 발생할 수 있음 *prop drilling  : React에서 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 때 중간 컴포넌트들이 불필요하게 prop을 전달해야 하는 문제2️⃣ 컴포넌트 간 상태를 동기화해야 할 때 ex) 필터 옵션 , 검색어, 사이드바 상태✅ 페이지 내 여러 섹션에서 동일한 데이터를 참조해야 한다면 Recoil을..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 21. 16:55

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 💻첫 상태관리 라이브러리를 Recoil을 선택한 이유 : react랑 가장 사용법이 비슷해서 러닝커브가 제일 적어서 선택작고 React스러운: recoil이 React의 주요 철학인 선언적 UI, 컴포넌트 중심의 설계, 그리고 훅스를 사용하는 방식을 기반import React from 'react';import { atom, useRecoilState } from 'recoil';const textState = atom({ key: 'textState', default: '', });function TextInput() { const [text, setText] = useRecoilState(textState); const..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 19. 02:53

더보기프론트엔드 개발자로 성장하기 위해서 큐시즘이라는 동아리에서 개발을 달리게 되는데 당장이라도 React-Query 등 안써본 개념들을 써봐야하기에 공부를 시작! 🖌️React-Query란?: fetching , caching, 서버 데이터와의 동기화를 지원해주는 라이브러리 ➡️ *ContextAPI를 기반으로 동작 *ContextAPI란 ?  : 리액트의 내장 API / 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 쉽게 공유할 수 있게 해줌     ➡️ 모든 컴포넌트에서 사용할 수 있는 데이터를 전달하는데 유용 ➡️ React-Query를 활용해 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결해줌🖌️Caching : 캐싱React-Query는 캐싱을 통해 동일한 데이터에 대한 ..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 18. 02:02

💡기본 정보유형: DP풀이 날짜: 2025년 01월 31일 풀이방법 한줄 요약: i번째 날의 일을 선택하는지 안하는지에 맞춰 최댓값 확인 💡문제에서 구해야 할 것상담원으로 일하고 잇는 백준이는 퇴사를 하고자 함오늘부터 N+1일 째 되는 날 퇴사를 하기 위해서 남은 N일 동안 최대한 많은 상담을 하려고함 백준이는 비서에게 최대한 많은 상담을 잡으라고 부탁했고 비서는 하루에 하나씩 서로 다른 사람의 상담을 잡아둠 Ti : 상담을 완료하는데 걸리는 기간Pi : 상담을 했을 때 받을 수있는 금액 N=7인 경우에 다음과 같음1일에 잡혀있는 상담은 총 3일이 걸리며 상담했을 때 받을 수 있는 금액은 10 , 5일에 잡혀있는 상담은 총 2일이 걸리며 받을 수 있는 금액은 15상담을 하는데 필요한 기간은 1일보다 ..

밀라 알고리즘 스터디 2025. 2. 2. 00:01

💡기본 정보유형: DP풀이 날짜: 2025년 01월 31일 풀이방법 한줄 요약: bottom-up형식으로 점화식을 활용해서 범위 동안 반복문 사용 💡문제에서 구해야 할 것기타리스트 강토는 다가오는 공연에서 연주할 N개의 곡을 연주하고 있음 . 공연이 시작하기 전에 각각의 곡이 시작하기 전에 바꿀 수 있는 볼륨의 리스트를 만들었음. 이 리스트를 V라고 했을 때 V[i]는 i번째 곡을 연주하기 전에 바꿀 수 있는 볼륨을 의미. 항상 리스트에 적힌 차이로만 볼륨을 바꿀 수 있음현재 볼륨이 P이고 지금 i번 째 곡을 연주하기 전이라면 i번 곡은 P+V[i] 나 P-V[i]로 연주해야함 하지만 0보다 작은 값으로 볼륨을 바꾸거나 M보다 큰 값으로 볼륨을 바꿀 수 없음곡의 개수 : N시작 볼륨 : S최댓값 : ..

카테고리 없음 2025. 1. 31. 23:47

💡기본 정보유형: DP풀이 날짜: 2025년 01월 30일 풀이방법 한줄 요약: bottom-up형식으로 점화식 세워서 구현 💡문제에서 구해야 할 것2*n 크기의 직사각형을 1*2 , 2*1 타일로 채우는 방법의 수를 구하는 프로그램- 입력 : 첫째 줄에 n이 주어짐- 출력 : 첫째 줄에 2*n크기의 직사각형을 채우는 방법의 수를 10,007로 나눈 나머지 출력 💡알고리즘 설계- Bottom-up 방식으로 반복문 구현- dp[1] = 1- dp[2] = 2- dp[3] = 3- dp[4] = dp[3] + dp[2] = 5     => dp[N] = dp[N-1] + dp[N-2] : 점화식💡CODEconst fs = require("fs");const N = Number(fs.readFileSy..

밀라 알고리즘 스터디 2025. 1. 30. 21:14

프론트엔드 개발을 해봤다면 한번 쯤 만나봤을 Cors Error .. 맨날 아 코스 .. ;; 라고만 하지 왜 Cors Error가 나는지 궁금해서 찾아봤는데 CORS Error : Cross-Origin Resource Sharing - 교차 출처 리소스 공유 에러  🤓CORS Error의 동작 과정1. HTTP 요청을 하면 브라우저는 요청 헤더에 Origin 이라는 필더를 추가2. 이후 서버는 응답을 내려줄 때 응답 헤더에 access-control-allow-origin* 이라는 필드를 내려줌3. 브라우저는 응답을 반환하기 전에 Origin 과 access-control-allow-origin 값을 비교하여 유효성을 검증 *access-control-allow-origin : 해당 리소스를 접근..

🔫Trouble Shooting 2025. 1. 29. 23:24

💡기본 정보유형: DP풀이 날짜: 2025년 01월 29일 풀이방법 한줄 요약: 각 계산을 1을 빼는 것과 비교해서 더 적은 횟수인 것을 출력 💡문제에서 구해야 할 것정수 X에 사용할 수 있는 연산은 다음과 같이 세가지   - X가 3으로 나누어 떨어지면 3으로 나눔   - X가 2로 나누어 떨어지면 2로 나눔   - 1을 뺌정수 N이 주어졌을 때 위와 같은 연산 세 개를 적절히 사용해서 1을 만들려고 함 연산을 사용하는 횟수의 최솟값 출력- 입력 : 첫째 줄에 1보다 크거나 같고 10^6 보다 작거나 같은 정수 N이 주어짐- 출력 : 첫째 줄에 연산을 하는 횟수의 최솟값 출력 💡알고리즘 설계- Bottom-up 방식으로 반복문 구현- 1일때는 0- 2의 배수면 2로 나눔=> dp[N] = min(..

밀라 알고리즘 스터디 2025. 1. 29. 22:43