개발의변화

SSR 하이드레이션(hydration) 서버 측에서 생성한 HTML페이지에 클라이언트 측에서 실행하는 자바스크립트 코드를 추가해서 애플리케이션을 관리하고 렌더링하는 기법 즉, 서버 측에서 생성한 HTML 페이지를 구성하는 각각의 DOM 객체에 필요한 자바스크립트를 추가해서 클라이언트단에서 동적으로 렌더링 장점: 웹 사이트 호환성, SEO(웹 크롤러 같은 검색 엔진 웹 문서 수집기가 페이지를 렌더링할 필요가 없음) 단점: 클라이언트가 요청할 떄마다 페이지를 다시 렌더링할 수 있는 서버가 필요 -> SSR 애플리케이션이 더 많은 자원을 소모하고 더 많은 부하를 보이며 유지보수 비용도 증가, 페이지에 대한 요청을 처리하는 시간이 길어짐 항상 주의해야 하는 점은 Next.js가 빌드 시점에 정적으로 페이지를 만..

https://leetcode.com/problems/find-the-longest-valid-obstacle-course-at-each-position/description/?envType=study-plan-v2&envId=dynamic-programming 아직도 문제를 직관적으로 해결하지 못하는 것 같다. 한시간만에 풀긴 했으나 아직도 이분탐색의 디테일한 조건처리를 헷갈리는 것 같다. 또한 전형적인 LIS 알고리즘 문제였지만 LIS를 그저 외우기만 할 뿐 활용하는 능력이 없었기에 애를 먹은 것 같다. import java.util.*; class Solution { public int[] longestObstacleCourseAtEachPosition(int[] obstacles) { int []..

https://leetcode.com/problems/create-maximum-number/ 스택을 활용한 그리디 문제였다. 배열의 0부터 해당 인덱스까지에서 최대 수를 구하는 것으로 생각해야 하는 부분들이 많았다. public static int [] findMaxArray(int length, int [] nums) { int maxPop = nums.length - length; Stack s = new Stack(); int [] result = new int [length]; for (int i = 0; i 0 && !s.isEmpty() && s.peek() < nums[i]) { s.pop(); maxPop--; } s.ad..

https://leetcode.com/problems/3sum-closest/ 투포인터를 활용하여 이분탐색을 해야했다. 먼저 정렬을 하고 양 끝 점의 투포인터 아이디어를 떠올렸으나 정렬을 안하고도 풀 수 있는 방식이 있는지에 대한 고민을했다. 하지만 딱히 다른 방도가 없었고 정렬을 한다음 움직이기 시작하기로 했다. 아이디어는 다음과 같다. start로 반복문을 순회하면서 인덱스를 올리고 end는 배열의 끝 인덱스 mid는 start의 바로 앞에 두어서 3개의 값을 구하면서 만약 값이 target보다 크다면 end를 줄이고 작다면 mid를 올리는 방식으로 구현했다. class Solution { public int threeSumClosest(int[] nums, int target) { Arrays.so..

https://leetcode.com/problems/count-vowels-permutation/description/?envType=study-plan-v2 전형적인 탑다운 문제였던 것 같다. 정해진 규칙에 맞게 진행하면서 마지막 배열의 값을 리턴하면 되는 문제였다. 특히 DP를 사용할 때는 항상 초기 설정이 중요한 것 같다. 1차원 배열을 쓸지, 2차원 배열을 쓸지 row,col의 값으로 어떠한 값을 넣어서 기준을 잡을지 조금 더 깊은 고민을 해봐야 겠다. class Solution { public int countVowelPermutation(int n) { long [][] arr = new long[n+1][5]; long N = (int)Math.pow(10,9) + 7; for (int i..

자바스크립트는 싱글스레드에서 동작한다. -> 자바스크립트는 한 번에 하나의 작업만 동기 방식으로만 처리할 수 있다. 싱글 스레드의 동기방식을 활용하게 되면 결국 많은 이벤트를 순차적으로 동작하기에 시간의 효율성이 떨어진다. -> 그렇기에 비동기 작업형태를 활용하여 싱글 스레드의 자바스크립트 구조를 보완을 하고 있다. 리액트는 또 어떠한가 -> 렌더링 스택을 비우는 방식으로 구현했던 동기식의 렌더링이 16버전에 접어들어 비동기식으로 작동하는 방법이 소개됨 프로세스는 무엇인가 -> 프로그램을 구동해 프로그램의 상태가 메모리상에서 실행되는 작업단위 스레드는 무엇인가 -> 하나의 프로세스에서는 여러 개의 스레드를 만들 수 있고, 스레드끼리는 메모리를 공유할 수 있어 여러가지 작업을 동시 수행 그렇다면 멀티스레드..

https://leetcode.com/problems/maximum-value-of-k-coins-from-piles/description/ DP에 대한 더욱 더 깊은 이해를 위해 리트코드의 문제들을 풀려고 한다. 해당 문제는 메모리제이션을 활용하여 풀었어야 했던 문제였다. 1. 다음 동전주머니로 이동시킨다. 2. 다음 동전주머니로 이동시키지 않을 떄 2-1. 0부터 뽑아야 하는 동전개수 만큼 반복문을 돌린다. 2-1-E. 동전개수보다 동전주머니의 길이가 작을 수도 있기에 반복문의 끝조건을 MIN(동전개수, 동전주머니의 길이)로 잡는다. 2-2. 반복문에 순회하는 동전주머니의 인덱스에 해당하는 값을 더한다. 2-3. 더하면서 해당 DP[pile][coin] = MAX(DP[pile][coin], DP[p..

자바스크립트 동등비교 리액트로 코드를 짜다보면 렌더링의 문제가 골치 아픈데 특히 props의 변화를 체크하는 일이 쉽지 않았다. props의 동등비교는 객체의 얕은 비교(Shallow Copy)를 기반으로 이뤄지는데, 이 얕은 비교를 리액트가 어떻게 이해하는 지를 알아야 렌더링 문제를 잡을 수 있다. 1.1 자바스크립트 데이터 타입 자바스크립트는 총 7개의 원시타입과 1개의 객체타입을 가지고 있다. underfined : 변수를 선언한 후 값을 할당하지 않은 변수에 자동으로 할당되는 값 let foo; typeof foo === undefined; // true function bar(hello) { return hello; } typeof bar() === &#39;undefined&#39; // tr..