[React] 무거운 연산 최적화 : 일반 계산 vs useMemo
·
Library & Runtime/React
React를 사용하다 보면 컴포넌트가 리렌더링될 때마다 불필요하게 무거운 계산이 반복 실행되어 앱 성능이 저하되는 경우가 많다.이 문제를 해결하기 위한 최적화 기법 중 하나가 useMemo이다.useMemo와 일반 계산을 비교하는 예제를 통해 언제 useMemo가 필요한지 알아보자. 🧩 예제 코드import { useMemo, useState } from 'react';const heavyCalculation = (num: number) => { console.log('💥 무거운 계산 실행'); let result = 0; for (let i = 0; i { const [count, setCount] = useState(0); const [input, setInput] = useState..
[React] 자식 컴포넌트 렌더링 : 일반 함수 vs useCallback
·
Library & Runtime/React
컴포넌트에서 자식에게 함수를 props로 넘길 때, 그 함수가 일반 함수인지 useCallback으로 감싼 함수인지에 따라 자식 컴포넌트의 렌더링 여부가 달라진다. 🎯 실험 목표 부모 컴포넌트에서 자식에게 함수를 전달할 때, 일반 함수를 전달했을 때와 useCallback으로 메모이제이션한 함수를 전달했을 때를 비교하고자 예제 코드를 준비했다.어떤 경우에 자식 컴포넌트가 불필요하게 렌더링되는지 확인해 보자. 🧩 예제 코드ChildRaw: 일반 함수를 props로 받는 자식ChildMemo: useCallback 함수를 props로 받는 자식 👉 두 자식 모두 React.memo로 감싸져 있음import { memo, useCallback, useState } from 'react';const Chi..
[React] 컴포넌트 생명주기 : useEffect, 마운트, 언마운트
·
Library & Runtime/React
🔨 마운트 (mount)컴포넌트가 처음 화면에 나타나는 시점JSX로 만든 컴포넌트가 실제 DOM에 "붙는" 순간초기화 작업(데이터 불러오기, 이벤트 리스너 등록 등)을 주로 이 시점에 처리useEffect(() => { ... }, [])의 본문이 실행되는 타이밍 🧩 예시{isVisible && }isVisible가 true가 되는 순간 → MyComponent가 마운트됨 🧹 언마운트 (unmount)컴포넌트가 화면에서 사라지는 시점React가 필요 없어진 컴포넌트를 DOM에서 제거하는 시점useEffect의 cleanup 함수가 실행되는 타이밍 (타이머 제거, 이벤트 해제 등)useEffec의 return 함수가 이 시점에 실행됩 🧩 예시{isVisible && }isVisible가 false..
[네트워크] 서브넷 마스크 & 서브넷팅 쉽게 계산하는 법 (+ 연습 문제 제공)
·
CS/Network
서브넷팅이란 하나의 큰 네트워크를 여러 개의 작은 네트워크(서브넷)로 나누는 작업이다.네트워크를 효율적으로 관리하고, IP 자원을 절약하기 위해 사용한다. 서브넷팅 계산은 호스트 범위, 네트워크 주소, 브로드캐스트 주소, CIDR, 호스트 수 등을 구하게 된다.정석적인 계산법은 처음 보면 머리가 아프다..진짜 쉽게 계산하는 법을 알게 되어서 글로 정리해 본다. [1] 네트워크 주소, 브로드캐스트 주소, 유효 호스트 범위네트워크 주소: IP가 속한 서브넷의 시작 주소브로드캐스트 주소: 서브넷 안에 있는 모든 호스트에게 한 번에 데이터를 보내기 위한 마지막 IP 주소유효 호스트 범위: 유효하게 쓸 수 있는 IP 주소 범위 (네트워크 주소 +1 ~ 브로드캐스트 주소 -1) 🧮 계산법255.255.255.25..
SQLD 공부법 : 전공자 하루 벼락치기 합격 후기
·
Computer/자격증
또 벼락치기ㅠ 변명을 하자면.. 시험 접수할 때만 해도 벼락치기하려는 건 아니었는데..어쩌다 보니 시험 접수일과 시험일 사이에 라섹을 하게 됐어요..ㅋㅋㅋㅋㅋㅋㅋㅋ그래서 아프고 잘 안 보여서 공부를 못함... 회복도 느린 편이었음 ㅠ시험 볼 때도 내 시험지 빼곤 잘 안 보였음 ㅎ;;라섹하고 일주일 조금 넘어서 시험 봤는데 시험 볼 때도 인공눈물 넣어가면서 봤답니다..(감독관님께 미리 여쭤봄) 일단 제 상황은여..기본적인 SQL은 어느 정도 짤 수 있었고.. 이론은 거의 까먹은 상태아프고 안 보인다고 미루고 미뤄서 희망이 있을까 싶었지만 sqld 접수비 5만 원ㅜ아ㅜ까ㅜ워ㅜ서ㅜ 몇 시간이라도 공부해 봄 ✏️ 공부법당일 새벽에 공부 시작해서 밤새고 시험 보러 갔으니까.. 공부시간은 대충 4시간 ~ 6시간쯤일..
[Python] 백준/BOJ 9084번: 동전 (Gold 5)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 우리나라 화폐단위, 특히 동전에는 1원, 5원, 10원, 50원, 100원, 500원이 있다. 이 동전들로는 정수의 금액을 만들 수 있으며 그 방법도 여러 가지가 있을 수 있다. 예를 들어, 30원을 만들기 위해서는 1원짜리 30개 또는 10원짜리 2개와 5원짜리 2개 등의 방법이 가능하다.동전의 종류가 주어질 때에 주어진 금액을 만드는 모든 방법을 세는 프로그램을 작성하시오. 💡 Approachdp 배열에서 index는 현재 금액이고 value는 N가지 동전으로 현재 금액을 만들 수 있는 방법의 수이다. 예를 들어, 2원과 4원으로 8원을 만든다고 하겠다.N=2, coins=[2, 4], M=8우리가 간단히 생각해 본다면 2+2+2+2, 2+2+4, 4+4 세 가지 ..
[Python] 백준/BOJ 10844번: 쉬운 계단 수 (Silver 1)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 45656이란 수를 보자.이 수는 인접한 모든 자리의 차이가 1이다. 이런 수를 계단 수라고 한다.N이 주어질 때, 길이가 N인 계단 수가 총 몇 개 있는지 구해보자. 0으로 시작하는 수는 계단수가 아니다. 💡 Approach이게 실버 문제라니! DP 너무 어려웡ㅠ처음 접근할 때는 수의 첫 번째 자리를 기준으로 생각했다.맨 처음에는 9개의 숫자가 올 수 있고.. 그다음 자리는 2개의 숫자가 올 수 있고..0이나 9일 때를 고려해야 하고.. 너무....복잡햇......... 이 글을 보고 이해할 수 있었다.음음.. 가장 끝 자리에 오는 숫자를 기준으로 했어야 하는 거구나 i는 자릿수이고 j는 끝자리 숫자이다.예를 들어, i=2, j=4, dp[2][4]=2이면 두 자릿수..
[Python] 백준/BOJ 15966번: 군계일학 (Silver 1)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 효빈이는 어떤 수열에서 군계일학 수열을 뽑아내고자 한다. 단, 뽑은 항의 순서는 기존 수열에서의 순서를 유지해야 한다. 군계일학 수열은 각 항이 서로 연속적인 수열을 의미한다. 정확한 정의는 다음과 같다.수열 중에 어떤 임의의 항 i에 대해서, ai=a1+(i-1)을 만족해야 한다.길이가 N이고 정수로 이루어진 수열이 주어진다. 효빈이는 가장 긴 군계일학 수열을 가져가서 김승호 선생님께 자랑하려고 한다. 효빈이가 뽑아낼 수 있는 가장 긴 군계일학 수열의 크기를 출력하라. 💡 Approach문제에서 a[i] = a[1] + (i - 1)를 만족해야 한다고 나와있다.이 식은 등차가 1인 등차수열이다.즉, a[i] = a[i - 1] + 1을 만족하면 된다. 해당 문제의 시..