FrontEnd
![[React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAaJk9%2FbtsGBgtgXsE%2F0RZyjKKd2Lz2F0yOBxcR1K%2Fimg.png)
[React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)
리액트는 보통 부모 -> 자식 방향의 단방향 정보전달의 구조를 이루고 있다. 따라서 자식 컴포넌트에서 정보가 변하지 않고 부모 컴포넌트에서만 값이 변해도 자식 컴포넌트가 같이 렌더링 되는 불필요한 과정이 있다. 이를 해결하기 위해서 memo, useMemo, useCallback 등을 사용할 수 있는데 실제로 리랜더링을 얼마나 막아줄 수 있는지와 props로 객체가 전달되었을 경우에 대한 이해를 여러가지 케이스들을 실험해 보며 정리해 보자. 1. 세팅 먼저 간단한 프로젝트를 CRA를 활용해서 만들어 보았다! npx create-react-app react-render --template typescript components라는 폴더를 만들고 간단하게 부모 컴포넌트, 자식 컴포넌트를 만들어준다. //Ap..
![[JS] 지형 이동](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlSmTW%2FbtsF9CLdyBg%2Fc9pJgqgxwI6XrFA8tGAz80%2Fimg.png)
[JS] 지형 이동
union-find를 응용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/62050 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 사실 어느정도 문제에서 힌트(?)가 있다. 아래와 같이 일종의 팀을 짜는 것이 중요하다. 즉, 서로 건너건너서 사다리 없이 갈 수 있는 공간을 한 팀이라고 생각했다. 이런경우 바로 떠오르는 방법이 유니온-파인드 알고리즘이었다. 따라서 문제푸는 방법자체는 아래와 같이 간단하게 정리되었다. 1. 유니온-파인드로 팀분리하기 2. 팀에서 다른팀으로 넘어가는 최소..
[JS] 트리 트리오 중간값
트리 구조의 특징을 활용하여 해결하였다!! https://school.programmers.co.kr/learn/courses/30/lessons/68937 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제를 잘 읽어보면 정답이 "트리에서의 최장거리" 혹은 "트리에서의 최장거리 - 1"임을 알 수 있다. 1. 최장 거리의 두 점을 A,B라고 두고 A와 B사이에서 A혹은 B와 가장 인접한 점을 C로 두면 중간값이 최장거리 -1이 된다. 2. 최장거리가 여러 경우로 나오는 경우 3개의 점이 서로 최장거리가 되므로 중간값이 최장거리로 만들 수 있다. 즉, 해..
![[JS] 지형편집](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGyLWO%2FbtsFYsh7VmW%2FamBOXyJc4Kv1g7y7B1P3wK%2Fimg.png)
[JS] 지형편집
이분탐색을 응용한 방식으로 해결하였다! https://school.programmers.co.kr/learn/courses/30/lessons/12984 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 제한사항을 처음 읽고 든 생각은 이분탐색이었다. 모든 층을 검사하는건 10억이라는 수치상 말이 안되었기 때문이다. 이분탐색을 사용하려면 정렬된 데이터가 필요했다. 층수 자체는 정렬된 데이터긴 하지만 우리가 원하는 건 최소 비용이다. 이는 정렬되어 있지 않다. 여기서 아래 특징들을 짚고 넘어가면 좋을 것 같다. 1. 특정층 n에 도달하기 위한 비용을 계산할때는..
![[JS] 동굴탐험 (2020 카카오인턴십)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7m16R%2FbtsFWkQ43Ob%2F4zseaYHmcb5Txbw9nt9WaK%2Fimg.png)
[JS] 동굴탐험 (2020 카카오인턴십)
어렵고 까다로운 그래프 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/67260 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제부터가 길고 복잡하기에 문제를 간략화할 필요가 있다. 결국 문제의 핵심은 "모든 노드를 방문할 수 있는가?"이다. 또다른 핵심은 A->B처럼 B노드에 방문하기 위해 A를 먼저 방문해야 하는 경우가 있지만 "중첩되지 않는다" 가 중요 포인트이다. 즉 특정 노드 N은 아무것도 아니거나, 방문하기 위해 선방문해야하거나, 후방문 해야한다. 문제를 해결한 방법을 설명하..
![[JS] 블록 게임 [2019 카카오]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNz1NZ%2FbtsFQrYd74U%2FScIfZfdKs4TWRquKVJNyB1%2Fimg.png)
[JS] 블록 게임 [2019 카카오]
까다로운 2차원 빡구현문제였다. 개인적으로 이런 2차원 문제를 좋아하기에 나름 재밌게 풀었다. https://school.programmers.co.kr/learn/courses/30/lessons/42894 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드는 꽤나 복잡하지만 내가 푼 방법을 정리하면 아래와 같다. 1. 12개의 퍼즐이 있다고 생각하고 각 퍼즐의 정보를 배열로 저장했다. (dR,dC 활용) 이때 통일성을 주기 위해서 시작점은 최상단 중에서 가장 왼쪽에 있는 것으로 했다. 그래야 탐색할때 첫지점을 찾기 편하다. 2. 모든 타일의 dR,dC..