가장 긴 증가하는 부분 수열의 응용버전이다. 이전 문제를 풀었다면 어렵지는 않은 문제일 것 같다. 11054번: 가장 긴 바이토닉 부분 수열 첫째 줄에 수열 A의 크기 N이 주어지고, 둘째 줄에는 수열 A를 이루고 있는 Ai가 주어진다. (1 ≤ N ≤ 1,000, 1 ≤ Ai ≤ 1,000) www.acmicpc.net from sys import stdin N, A = int(stdin.readline()), list(map(int, stdin.readline().split(" "))) T_L, T_R = [1] * N, [1] * N def get_table_left(ind: int): m = 0 for i in range(ind, -1, -1): if A[ind] > A[i] and m < T_L..

Mock Data의 필요성 프론트엔드 개발을 하는 입장에서는 백엔드 API가 이미 다 준비되어 있고, 인터페이스도 공유가 된 상태에서 작업을 시작하는 게 최고의 상황일 것이다. 그러나 세상일이 늘 그렇듯 상황이 원하는 대로 흘러가지는 않는 법. 꽤나 빈번한 상황에서 프론트 개발자는 백엔드의 인터페이스만 공유받거나, 혹은 그마저도 공유받지 못한 상황에서 개발을 시작해야 한다. 필자는 이런 상황에서 미리 Mock API를 만들어 내부적인 테스트를 먼저 진행하고, 추후 백엔드 API가 나오면 Mock API와 교체하는 방식으로 프로젝트에 소요되는 시간을 최대한 아끼려고 노력하였다. 다행히 Typescript를 사용하면서 API의 요청과 응답 값을 미리 Typing 해 놓을 수 있었기 때문에 요청 값과 응답 값..

Shadow Dom 이란? > 웹 컴포넌트 캡슐화를 위해, lite 버전의 dom을 생성하는 것 실제로 흔하게 사용되는 shadow dom을 보고 싶다면? 개발자 도구 → Settings → Preferences → Elements → Show user agent shadow DOM 체크 range input이 shadow dom으로 이루어져 있다는 걸 볼 수 있다. 하나의 html element가 자체 스코프를 가진 shadow root을 생성하고, 그 안에서 div들로 구현된 range 가 실제로 구현된다. (shadow dom 자체가 하나의 dom이기 때문에, id="track", id="thumb"는 상위 dom의 id와 무관하게 선언해서 사용이 가능하다) 위 예시는 shadow DOM을 포함하는..

왜 매번 Dropdown 구현에 시간을 낭비하고 있습니까!? (ㅠㅠ) 완전한 custom style 적용이 가능한 headless ui Component library들을 사용하여 제품에 집중하고 시간을 아끼십쇼. 귀찮은 각종 접근성 처리 및 사용자의 인터렉션을 고려한 각종 부가기능을 공짜로 누려봅시다. Primitives — Radix UI An open-source React component library for building high-quality, accessible design systems and web apps. www.radix-ui.com

어떤 기술을 맨날 사용하다보면, 스스로가 잘 알고 있다고 착각을 하기 쉽다. 늘 경계하고 '정말 잘 알고 사용하고 있는가? 누구에게 설명할 수 있을 정도로 알고 있는가?' 에 대한 질문을 스스로에게 던지는게 중요한 것 같다. 스스로가 잘 알고 있다고 생각하는 부분은 공부를 소홀히 하게 되기 마련이니까... 오늘은 react hooks 를 간단하게 직접 만들어봤다. 단일 state 및 effect deps를 관리하는 singleton 방식의 react, hooks 배열을 통해 조금 더 실제 react hooks와 비슷하게 구현한 방식으로 만들었다. 첫 번째 예제는 hook의 작동방식과 closer의 연관성에 대해 이해하기에 좋은 것 같고, 두 번째 예제는 'hooks는 마법이 아니라 배열일 뿐' 이라는 말..

v8 엔진에서 사용중인 컴파일 방식. JIT + interpreter 의 장점을 합친 방식이다. 현재 v8엔진에서는 소스코드 파싱 -> AST생성 -> Ignition 컴파일러로 byte code(중간언어) 컴파일 이후 실행한다. 실행 중 런타임 프로파일러를 통해 사용 빈도(반복횟수 등)를 측정한다. 이에 따라 최적화가 필요한 코드(자주 반복 사용되는)를 TurboFan으로 보낸다. TurboFan에서는 컴파일을 통해 최적화 작업을 진행한다. (실제 엔진에서 터보팬이 추력을 더해주면서 동시에 배출공기를 통해 냉각 효과를 가져온다는 점을 생각하면 네이밍이 기가막히다) Sneak peek into Javascript V8 Engine Ever since I started my programming journ..