전체 글

Some Thinking, Jake's Archive

[Two pointers] BJ1644 - 소수의 연속합 python

문제 1644번: 소수의 연속합 1644번: 소수의 연속합 첫째 줄에 자연수 N이 주어진다. (1 ≤ N ≤ 4,000,000) www.acmicpc.net 풀이 에라토스테네스의 체 알고리즘 + two pointer 유형 에라토스테네스의 체는 table을 설정함으로써 time complexity를 줄일 수 있음 N이하의 소수 리스트를 구한 뒤 two pointer적용 연속된 소수 리스트는 slicing을 통해 sum이 N이 되는 경우 count++ 코드 from sys import stdin input = stdin.readline N = int(input()) primeList = [] def main(): count = 0 def getPrimeList(N): # N이하의 소수 리스트 구하기 siev..

[Implemetation] BJ18406 - 럭키 스트레이트 python

문제 18406번: 럭키 스트레이트 18406번: 럭키 스트레이트 첫째 줄에 점수 N이 정수로 주어진다. (10 ≤ N ≤ 99,999,999) 단, 점수 N의 자릿수는 항상 짝수 형태로만 주어진다. www.acmicpc.net 풀이 문자열을 절반씩 슬라이싱해서 first,second로 나눔 각 문자열을 list 형변환 list요소를 int로 mapping sum(firstArr),sum(secondArr) 비교 후 print 코드 from sys import stdin input = stdin.readline N = input() def main(): middle = len(N)//2 first = N[:middle] # 첫 번째 부분은 middle까지 포함 second = N[middle:] # 두 ..

렌더링 시리즈 3 - SPA & SSR

지난 시간에는 리액트의 렌더링 원리에 대해 알아보았습니다. Single Page Application(SPA) 리액트는 Single Page Application(SPA)를 만들기 위한 라이브러리로써, 초기 페이지 요청시 빈 형태의 HTML 문서를 받아 렌더링하고, 브라우저 돔의 업데이트를 가상 돔 형태로 관리하며 변경 요소를 한번에 모아 대부분의 상황에서 성능이 좋은 UI 업데이트를 보장합니다. 이러한 리액트의 동작은 클라이언트 사이드에서 이뤄지는데요, 따라서 클라이언트 사이드 렌더링 방식을 취하고 있다고 할 수 있습니다. 그렇다면 클라이언트 사이드 렌더링(CSR)이란 무엇일까요? 클라이언트 사이드 렌더링 (CSR) 이란 Javascript를 이용하여 브라우저 DOM을 수정, 조작하는 형태의 렌더링 방..

렌더링 시리즈 2 - 리액트의 렌더링

지난 포스트에서는 Critical Rendering Path에 대해 알아보며 브라우저의 렌더링 원리를 정리해보았습니다. 하지만 우리는 주로 React와 같은 Single Page Application을 위한 UI 라이브러리를 사용하여 웹 페이지를 개발합니다. 브라우저 렌더링 원리에 이어 리액트의 렌더링이란 무엇인지 알아보면서 SPA의 렌더링 방식에 대해 깊게 이해해봅시다. React의 역할 우선 리액트가 어떤 역할을 하는지에 대해 알아볼까요? 리액트의 역할은 다음과 같습니다. 1. DOM 업데이트 요청 발생 2. 동시에 발생한 업데이트들을 모음 3. 모아서 한번에 수정 4. DOM에 반영 즉, 리액트란 내부적으로 동시에 발생한 업데이트를 모아 최소한의 횟수로 돔을 수정할 수 있도록 자동화시킨 도구라고 볼..

렌더링 시리즈 1 - 브라우저의 렌더링 원리

Intro 모던 웹 프론트엔드 개발의 복잡성은 날이 갈수록 증가하고 있습니다. 다양한 패키지 의존성 없이 개발하는 것이 어려워진 만큼 그 복잡도를 제어하기 위해서는 메인 라이브러리&프레임워크인 React, Nextjs 의 동작 원리를 더욱 깊게 이해하는 것이 중요하다고 생각합니다. 따라서 렌더링 시리즈를 시작하게 되었는데, 이 시리즈에서는 다음의 세 가지 주제를 순차적으로 다룹니다. 1. 브라우저의 렌더링 원리 2. 리액트의 렌더링 3. SPA와 서버 사이드 렌더링의 비교 세 주제를 순차적으로 정리하며 React, Nextjs의 단순한 사용법을 넘어 그 동작 원리를 면밀히 이해함으로써 예측 가능한 웹 프론트엔드 개발 지식을 확보할 수 있다고 생각합니다. Critical Rendering Path : 브라..

JakeTheMaverick