2025/09/19 7

2025년 9월 3주차 회고

지금 할 수 있으면 해라.지금 할 수 없으면 하지마라.지금 해야하면 해라.이번주에 한 것항암치료 보조릿코드 Hard 1일 1문제 - 스트릭 기록하기리액트 기본 구조 & API 학습결국 API류는 직접 쓰고 트레이드오프를 고민해봐야 능숙해진다.리액트 튜토리얼카페 알바 이번주에 하지 못한 것코틀린 코루틴 학습쿠팡커피 원두 종류 및 맛 분석(블렌딩 or 싱글오리진)USACO Gold - DP 번역 및 문제풀이큰 의미가 없는 듯.핀잇 기능 요구사항 도출 & 백엔드 설계파드셉 분석다음주에 할 수 있는 것핀잇 프로젝트 분석기본 UI 컴포넌트 구성기능 요구사항(유스케이스) 도출요구사항에 따른 UI 컴포넌트 완성요구사항에 따른 백엔드 도메인 모델 설계요구사항에 따른 계약 완성(가능하면) UI 컴포넌트/도메인 모델 코드..

useReducer

useReducer 훅은 컴포넌트 내부에 새로운 State를 생성하는 조금 특별한 리액트 훅이다.상태 변화 함수 대신 “상태 변화 요청 함수” 를 사용한다.useState와 달리 “상태 관리 코드”(이벤트 핸들러로 쓰거나 했던 setState 함수를 사용하는 함수들)를 컴포넌트 외부로 분리할 수 있다.모든 useState는 useReducer 로 대체 가능하다.컴포넌트는 렌더링하기 위한 함수인데, 컴포넌트가 내부적으로 "도메인 로직"을 갖게 되면 책임 분리가 잘 안되게 된다.즉, State를 관리하는 코드가 컴포넌트 안에 길어지는 상황을 막기 위해 사용한다.즉, useReducer는 다음과 같은 경우에 사용한다.컴포넌트 내부에 보관해야 하는 상태가 도메인 로직과 밀접한 상태일 때컴포넌트 내부에 보관해야 ..

리액트 컴포넌트의 라이프사이클과 useEffect

상태 전이는 그 상태 전이의 발생을 알리는 방식의 설계로 무궁무진한 응용 가능성을 갖고 있다.그렇기 위에 꼭 알아둬야 하는 리액트 컴포넌트의 생명주기와, 이를 활용할 useEffect에 대해 알아보자.리액트의 컴포넌트의 생명주기Mount컴포넌트가 탄생하는 순간.화면에 처음으로 렌더링되는 순간.Update컴포넌트가 리렌더링 되는 순간.UnMount컴포넌트가 화면에서 사라지는 순간.컴포넌트가 렌더링에서 제외되는 순간.useEffect리액트에선 각 생명주기 별로 명령을 지정해둘 수 있다.이를 라이프사이클 제어 라고 하며, useEffect() 훅을 통해 구현할 수 있다.리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅.사이드 이팩트컴포넌트의 동작에 따라 파생되는 여러 효과 (생명주기 제어 등)useEffe..

State, 리렌더링, 리액트 훅과 커스텀 훅 - 리액트의 핵심 기능

리액트에서의 State모든 컴포넌트들은 State를 가질 수 있다.현재 State에 따라 렌더링 결과를 다르게 할 수 있다.State의 변화에 따라 렌더링을 다시 하는것을 Re-Rendering이라고 한다.리액트는 변수의 값의 변화로는 리렌더링 되지 않고(버퍼에 담김), State가 변화해야만 즉각적으로 리렌더링을 수행한다.“react” 에서 useState를 import 하는것으로 State를 갖게 할 수 있다.이때, “react”에는 useState만 있는것이 아니므로 다음과 같이 코드를 작성해야 한다import { useState } from "react";state의 구성요소state는 배열, useState() 함수를 통해 얻을 수 있다.state가 처음 생성됐을 땐 [ undefined, f ..

컴포넌트, jsx, 이벤트와 이벤트 객체 - 리액트의 기초 기능 사용 방법

개인 학습용 정리로, 리액트 첫 학습을 목적으로 찾아보고 계신다면 공식 문서를 강력히 권장드립니다. 자습서: React 시작하기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 컴포넌트란?js에서 html 코드를 반환하는 함수.컴포넌트들은 트리 구조로 관리되며, root 컴포넌트를 루트 노드로 삼는다.특정 컴포넌트의 리턴값 안에 들어있는 컴포넌트를 특정 컴포넌트의 “자식 컴포넌트” 라고 한다.리액트는 클래스 기반 컴포넌트와 함수 기반 컴포넌트가 있지만, 리액트에서는 주로 함수 기반 컴포넌트를 사용한다.함수 기반 컴포넌트는 반드시 첫글자가 “대문자”여야 한다.jsx에서 소문자로 시작하는 이름은 html 요소로 보고j..

리액트 소개

리액트의 특징 (추구하는 것)컴포넌트를 기반으로 UI를 표현한다.이는 재사용성이 높은 UI의 구현을 위해 적용되었다.화면 업데이트 구현이 쉽다.선언형 프로그래밍 방식(추상화된 기능) 으로 동작하기 때문에, 구현이 간편하다.선언형 프로그래밍 ↔ 명령형 프로그래밍(하나부터 열까지 전부 지시)으로 이해하면 좋다.화면 업데이트가 빠르게 처리된다. (SPA)리액트의 SPA는 Virtual DOM(버퍼 객체) 을 구성함으로써, JS로 인한 DOM의 수정 사항을 모아서 객체로 처리하다가, 마지막에 DOM을 한번만 수정하고, 그러므로 수정 시간을 단축시킨다.브라우저의 렌더링 과정HTML 을 DOM(Document Object Model)으로 변환하고, CSS를 CSSOM(CSS Object Model)로 변환한다.DO..

1301. Number of Paths with Max Score - Streak 6

DP 로 최댓값을 유지하면 풀 수 있다. 근거: 해당 지점의 최댓값이 바뀌면, 이후는 반드시 그 최댓값 경로를 따라야 한다.따라서, 비교적 간단하게 최적 부분 구조+중복 부분문제를 만족한다. 그럼 남은 문제는, "벽 의 처리를 어떻게 할 것인가?"이다.그냥 초깃값을 매우 낮은 음수로 설정해두면 된다.1만 * 9 = 최대 값 9만이니, 기본 값 초기화를 전부 -10억으로 해두면 벽을 뛰어넘는 값으로 잘못된 값을 리턴하기 어려워진다.class Solution { public int[] pathsWithMaxScore(List board) { int n = board.size(); List> dp = new ArrayList(); for(int i = 0; i tem..

PS/LeetCode 14:41:16