민규의 개발일지

• React

  [React] 리액트 19 beta 변경점 알아보기

  리액트 19 Beta 버전이 4.25일 이틀전에 나왔다! 리액트 팀에서 19에 어떤 변경사항을 적용할지 알아보자.     본 글은 리액트 팀블로그를 참고했다.https://react.dev/blog/2024/04/25/react-19#improvements-in-react-19 React 19 Beta – ReactThe library for web and native user interfacesreact.dev    먼저 크게 보면 아래 항목들을 중점적으로 개발한 것 같다. 1. 비동기 작업의 편의성 ( 동시성에 초점을 둔게 느껴진다 )2. ref 개선3. 성능 개선     1. useTransition에서 비동기 함수 지원useTransition은 startTransition으로 감싼 상태변화의 우선..

  →2024.04.27
• React

  [React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)

  리액트는 보통 부모 -> 자식 방향의 단방향 정보전달의 구조를 이루고 있다. 따라서 자식 컴포넌트에서 정보가 변하지 않고 부모 컴포넌트에서만 값이 변해도 자식 컴포넌트가 같이 렌더링 되는 불필요한 과정이 있다. 이를 해결하기 위해서 memo, useMemo, useCallback 등을 사용할 수 있는데 실제로 리랜더링을 얼마나 막아줄 수 있는지와 props로 객체가 전달되었을 경우에 대한 이해를 여러가지 케이스들을 실험해 보며 정리해 보자. 1. 세팅 먼저 간단한 프로젝트를 CRA를 활용해서 만들어 보았다! npx create-react-app react-render --template typescript components라는 폴더를 만들고 간단하게 부모 컴포넌트, 자식 컴포넌트를 만들어준다. //Ap..

  →2024.04.12
• 프로그래머스

  [JS] 블록 게임 [2019 카카오]

  까다로운 2차원 빡구현문제였다. 개인적으로 이런 2차원 문제를 좋아하기에 나름 재밌게 풀었다. https://school.programmers.co.kr/learn/courses/30/lessons/42894 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드는 꽤나 복잡하지만 내가 푼 방법을 정리하면 아래와 같다. 1. 12개의 퍼즐이 있다고 생각하고 각 퍼즐의 정보를 배열로 저장했다. (dR,dC 활용) 이때 통일성을 주기 위해서 시작점은 최상단 중에서 가장 왼쪽에 있는 것으로 했다. 그래야 탐색할때 첫지점을 찾기 편하다. 2. 모든 타일의 dR,dC..

  →2024.03.18
• Deep Dive

  [React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트

  리액트 서버 컴포넌트 리액트 18에서 도입된 리액트 서버 컴포넌트는 서버 사이드 렌더링과는 완전히 다른 개념이다. 둘다 '서버'라는 단어가 들어있는데 어떤게 다른 것인지 알아보자! 리액트의 컴포넌트라는 개념에 대해 한번 더 생각해보자. 리액트의 모든 컴포넌트는 클라이언트에서 작동하며, 브라우저에서 JS 코드 처리가 이루어진다. 웹사이트를 방문하면 리액트 실행항 코드를 다운로드하고 리액트 컴포넌트 트리를 만든 후 DOM에 렌더링한다. 서버 사이드 렌더링의 경우 서버에서 DOM을 만들어오고, 클라이언트에서 만들어진 DOM을 기준으로 하이드레이션을 진행한다. 이런 구조는 지금까지 Next.js,리액트에서 제공하는 서버사이드 렌더링 흐름이었다. 해당 구조의 한계점은 무엇일까? 1. JS번들크기가 0인 컴포넌트를..

  →2024.02.17

• 프로그래머스

  [JS] 행렬과 연산

  Deque를 활용하여 해결하였다.  https://school.programmers.co.kr/learn/courses/30/lessons/118670 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  문제 자체는 단순했다. 행렬을 밑으로 밀어내거나 시계방향으로 회전하는 기능을 구현하면 되었다.단, 시간복잡도를 생각해야 하는 문제이다. 행렬을 밑으로 밀어내는 것 자체는 어렵지 않다. Deque로 쉽게 구현할 수 있다. 시계방향으로 회전하는 기능또한 Deque로 구현할 수 있다. 이 두가지를 동시에 할 수 있게 하기 위해 Deque를 아래와 같이 조금은 특이하게..

  →2024.05.03
• 프로그래머스

  [JS] 매출하락 최소화 (2021 카카오)

  tree + dp로 해결할 수 있는 문제였다.  https://school.programmers.co.kr/learn/courses/30/lessons/72416 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr   트리구조와 DP를 활용하면 해결할 수 있는 문제이다. 문제를 처음 읽었을때의 생각은 선택을 했거나, 안했거나를 나누어서 계산을 하는 거였다.(결과적으로 완전 틀린 접근은 아니었음) 다만 완전탐색으로 이를 해결하기에는 300,000명까지 사원이 있기에 불가능 했다. 주의를 둘 점은 트리구조이기 때문에 1번노드에서 단방향으로 퍼져나가는 구조라고 생각할 ..

  →2024.04.30
• React

  [React] 리액트 19 beta 변경점 알아보기

  리액트 19 Beta 버전이 4.25일 이틀전에 나왔다! 리액트 팀에서 19에 어떤 변경사항을 적용할지 알아보자.     본 글은 리액트 팀블로그를 참고했다.https://react.dev/blog/2024/04/25/react-19#improvements-in-react-19 React 19 Beta – ReactThe library for web and native user interfacesreact.dev    먼저 크게 보면 아래 항목들을 중점적으로 개발한 것 같다. 1. 비동기 작업의 편의성 ( 동시성에 초점을 둔게 느껴진다 )2. ref 개선3. 성능 개선     1. useTransition에서 비동기 함수 지원useTransition은 startTransition으로 감싼 상태변화의 우선..

  →2024.04.27