본문 바로가기

TIL

 (53)
CSR 과 SSR CSR과 SSR에 대해서 정리를 한번 하고 가야겠다. 두 개를 비교한 글들이 많아서 특징을 정리하기는 수월했다. 근데 뭔가 렌더링 과정에 대해 내가 정확히 알지를 못해서 두 특징들이 와닿지 않은 거 같다. 따라서 렌더링부터 보자. 그리고 공부하면서 당연하다고 생각했던 script의 위치와 CSR과 SSR에서는 어떤 차이를 가져오는지 내 생각을 정리해 보겠다. 일단 내가 헷갈렸던 부분부터 정리하고 넘어가자. 먼저 SSR 말고 CSR이 나오게된 간단한 이유는 페이지상에 제공되는 데이터들이 많아지니 문제점들이 많아져서 져서 CSR이 나온 거 같다. CSR과 SSR의 차이를 보면 SSR은 서버에서 렌더링 해서 그냥 브라우저에서 띄울 수 있게 넘겨준다는데 그럼 이미 DOM이 만들어진 상태인가? 이거는 명확하지 않..
JS. 자바스크립트 히든 클래스 자바스크립트를 공부하긴 했는데 JS라는 친구에 대해 내가 너무 몰랐던 거 같다. 그래서 면접을 준비하며 구글에 존재하는 정보들을 수집해 나가면서 노션에 정리했었다. 그래서 자바스크립트 동작 구조에 대해 이야기할까 아니면 자바스크립트 코드가 돌아가는 실행 콘텍스트에 대해서 이야기할까 고민하다가 그냥 자바 스크립트 히든 클래스에 대해서 정리하려 한다 왜냐면 위의 두 내용은 너무 양이 많아서 잘 정리하신 분들의 글들을 공유하려고 한다. 자 그럼 히든 클래스 만나러 가자 히든 클래스는 자바스크립트 엔진의 최적화 기법 이야기하면서 언급된다. 먼저 왜 히든 클래스를 사용하는지 이유부터 알고 가자 자바스크립트는 동적 타이핑 언어로 코드를 실행할 때의 상황에 따라 데이터 타입이 정해진다고 한다. 그래서 문제가 동적으로..
DOM 안다고 생각했는데 말하려고 하니 생각이 안 났다. 즉 모르고 있었다는거.. 그래서 정리해본다. 면접 준비 내용들은 notion에 기록해서 나중에 옮겨야겠다. DOM을 구글에 검색해보면 위키피디아에서 다음과 같이 정의한다 문서 객체 모델 (DOM; Document Object Model)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C의 표준이다. W3C의 표준화한 API들의 기반이 된다.... (생략) 뒤에 이어지는 내용은 여기로 https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8 문서 객체 모델 - 위키백과, 우리 모두의 백과사전 문..
프로그래머스 풍선 터트리기 문제 https://programmers.co.kr/learn/courses/30/lessons/68646 코딩테스트 연습 - 풍선 터트리기 [-16,27,65,-2,58,-92,-71,-68,-61,-33] 6 programmers.co.kr 풍선 값들이 주어지고 인접한 풍선 2개를 골라서 터트리면서 남을 수 있는 마지막 한 개의 풍선의 개수를 찾는 문제입니다. 조건으로 두 가지가 있는데, 일단 두 풍선에서 무조건 큰 값을 가진 풍선을 터트릴 수 있습니다. 거기에 또 다른 조건은 전체 배열에서 인접한 풍선 2개를 선택했을 때 딱 한 번만 작은 값을 가진 풍선을 터트릴 수 있습니다. 주어진 예시에서 가능한 경우의 수들을 먼저 찾는게 우선인 것 같습니다. 최종으로 남을 수 있는 풍선의 경우의 수를 찾는 것..
백준 합분해 2 13707 (c++) 문제 https://www.acmicpc.net/problem/13707 13707번: 합분해 2 첫째 줄에 두 정수 N(1 ≤ N ≤ 5,000), K(1 ≤ K ≤ 5,000)가 주어진다. www.acmicpc.net 오랜만에 c++로 문제 풀려고 풀어봤다. dp로 풀었기 때문에 점화식만 구하면 쉽게 풀 수 있는 문제였다. 재귀로 풀어서 좀 오래 걸린 것도 있고, 다른 사람들 코드 보니까 더 간단하게 풀기도 했다. 점화식은 다음과 같다. arr [k][n]으로 놓고 k개를 사용해서 n을 만들 수 있는 경우의 수를 구하면 된다. arr [k][n] = arr [k-1][0]+ arr [k-1][1].... arr [k-1][n] 이런 식으로 되는데 더하는 경우가 각각 마지막에 n, n-1, n-2.....
백준 21610 마법사 상어와 비바라기 문제 https://www.acmicpc.net/problem/21610 21610번: 마법사 상어와 비바라기 마법사 상어는 파이어볼, 토네이도, 파이어스톰, 물복사버그 마법을 할 수 있다. 오늘 새로 배운 마법은 비바라기이다. 비바라기를 시전하면 하늘에 비구름을 만들 수 있다. 오늘은 비바라기 www.acmicpc.net 마법사 상어와 파이어 볼을 풀고 심심해서 풀어봤는데, 단순한 구현 문제였다. 문제에서 말하는 조건만 잘 지키면 된다. 파이어 볼 때랑 비슷하게 체크해야 될 부분은 N행 또는 N열을 넘으면 다시 첫번째 열과 행으로 올 수 있으니까 나머지를 계산해서 바꿔 주면 된다. 소스코드 import sys input = sys.stdin.readline N, M = map(int, input().s..
Red–black tree 오랜만의 글, 자가 균형 이진트리의 한 종류로 색을 나눠서 그 균형을 잡는다. 내가 구현한 방식은 이 분의 영상을 기반으로 작성하였다. https://www.youtube.com/user/leejaku Jake Lee Digital Dynamics ~ http://ddmix.blogspot.com C++로 배우는 알고리즘, 스케치업 등의 동영상 강의를 싣고 있습니다. www.youtube.com 구현 과정이 다른 방식과 다른 점은 노드를 삽입하거나 삭제 하는 과정에서 RB 트리의 조건에 맞게 맞춰가면서 진행 한다는 점이다. 자세한 과정은 위의 강의에서 참고 할 수 있다. 또한 다른 접근은 밑의 페이지에서 확인 할 수 있다. https://en.wikipedia.org/wiki/Red%E2%80%93bla..
백준 2098 외판원 순회(python) 문제 https://www.acmicpc.net/problem/2098 2098번: 외판원 순회 첫째 줄에 도시의 수 N이 주어진다. (2 ≤ N ≤ 16) 다음 N개의 줄에는 비용 행렬이 주어진다. 각 행렬의 성분은 1,000,000 이하의 양의 정수이며, 갈 수 없는 경우는 0이 주어진다. W[i][j]는 도시 i에서 j www.acmicpc.net 외판원 순회 2 문제와 다르게 시간과 메모리 조건이 달랐기 때문에 비트 마스크 개념과 dp개념을 사용하여 접근한 문제입니다. 순회하면서 방문하는 노드의 상태를 비트의 형태로 표현해 주었습니다. 과정은 다음과 같습니다. 순회하면서 메모이제이션할 값들을 현재의 노드와 상태를 기준으로 저장해 주었습니다. 순회하면서 기존에 저장한 값이라면 dp 리스트에 저장된 ..

티스토리툴바