본문 바로가기

전체 글

 (215)
When to useMemo and useCallback 이 글은 아래 글을 번역한 글 입니다. When to useMemo and useCallback Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. Let's talk about the costs and benefits of useMemo and useCallback. kentcdodds.com 성능 최적화에는 항상 비용이 따르고, 언제나 이점을 제공하는 것은 아닙니다. useMemo와 useCallback의 비용과 이점에 대해서 이야기해봅시다. function CandyDispenser() { const initialCandies = ["snickers", "skittles", "twix", "m..
Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app 이 글은 Engineering at Meta의 Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app 글을 번역한 글입니다. - 우리는 iOS용 Messenger의 새 버전을 출시하게 되어 기쁩니다. Messenger iOS앱을 더 빠르고, 더 작고, 단순하게 만들기 위해 아키텍처를 재구축하고 전체 코드베이스를 다시 작성했습니다. 이는 회사 전체에서 매우 드문 일입니다. - 이전 iOS 버전에 비해 이 새로운 Messenger는 시작 속도가 2배 빠르며 크기는 1/4입니다. 핵심 메신저 코드를 170만줄에서 36,0000줄로 84% 줄였습니다. - 우리는 가능한 한 기본 OS를 ..
자바스크립트 완벽 가이드 | 모듈 모듈화 프로그래밍의 목표는 큰 프로그램을 코드 모듈로 분리해서 모듈 개발자가 예측하지 못한 상황에서도 코드 전체가 정확히 실행하도록 하는 것입니다. 최근까지 자바스크립트는 모듈을 지원하지 않았고 큰 프로젝트 단위로 일하는 프로그래머는 클래스, 객체, 클로저에서 파생된 미약한 모듈성을 최대한 이용해야 했습니다. 클로저 기반 모듈성이 코드 번들링 도구의 지원에 힘입어 require 함수 형태로 실용화됐으며, 노드에서 이 시스템을 도입했습니다. require()에 기반한 모듈은 노드 프르고르매이 환경에서 필수적인 부분으로 정착했지만 자바스크립트 언어에서 공식적으로 받아들이지는 않았습니다. ES6는 require() 대신 import와 export 키워드를 사용하는 모듈 시스템을 도입했습니다. 클래스, 객체, ..
자바스크립트 완벽 가이드 | 비동기 자바스크립트 과학 시뮬레이션과 머신 러닝 모델 같은 컴퓨터 프로그램은 계산이 목적이기 때문에 결과를 얻을 때까지 멈추지 않고 실행된다. 그 밖의 프로그램은 배부분 비동기적으로 실행된다. 비동기적이라는 말은 데이터가 들어오거나 어떤 이벤트가 일어날 때까지 계산을 멈추고 대기하는 일이 잦다는 뜻이다. 웹 브라우저의 자바스크립트 프로그램은 일반적으로 이벤트 주도적이다. 즉, 프로그램이 뭔가 실행하기 전에 사용자가 뭔가 클릭하거나 탭하기를 기다린다. 자바스크립트를 활용하면 이런 비동기 프로그래밍이 필요할 때가 많다. ES6에서 도입한 프라미스는 비동기 동작의 아직 사용할 수 없는 결과를 나타내는 객체이다. 키워드 async와 await는 ES2017에 도입했는데, 프라미스 기반 코드를 마치 동기적인 코드처럼 작성할 수 있게..
43. Multiply Strings 문제를 읽고 생각을 별로 안하고 답을 내면 아래와 같은 답을 제출한다. const multiply = function(num1, num2) { return String(parseInt(num1) * parseInt(num2)) }; 이렇게 내면 무조건 틀리는데 이유는 정말 큰 수를 곱하면 overflow가 나기 때문이다. 따라서 배열에 저장하면서 "잘" 곱해줘야한다. 잘 곱해준다는 의미는 아래와 같이 배열에 저장하면서 곱하는 것을 의미한다. const multiply = function(num1, num2) { if (num1 === "0" || num2 === "0") return "0" // 0이면 무조건 0리턴 const n = num1.length, m = num2.length // 배열 길이 저..
2022 KAKAO TECH INTERNSHIP | 코딩 테스트 공부 문제를 읽으면서 그리디 알고리즘의 냄새가 났다. 주어진 모든 문제들을 풀 수 있는 알고력과 코딩력을 얻는 최단 시간을 구하는 문제이다. 해결해야하는 문제는 (초기 알고력, 초기 코딩력) 상태에서 시작해 (목표 알고력, 목표 코딩력) 상태에 도달하는 최단시간을 구하는 문제이다. 이때, 목표 알고력을 넘는 알고력이나 목표 코딩력을 넘는 코딩력은 구현 방법에 따라 시간초과나 세그먼트 폴트와 같이 예상치 못한 런타임 오류를 일으킬 수 있다고 한다.(해설) 이 문제는 2차원 동적계획법 DP로 풀이가 가능하다. DP를 아래와 같이 정의한다. dp[i[j]: 알고력 i , 코딩력 j 상태에 도달하는데 필요한 최단 시간 이렇게 DP배열을 정의하면 문제에서 요구하는 답은 dp[목표 알고력][목표 코딩력]이다. dp[초기..
2022 KAKAO TECH INTERNSHIP | 두 큐 합 같게 만들기 문제는 두 큐가 주어졌을 때 enqueue, dequeue 연산만으로 두 큐의 합이 정확히 반씩 나눠지도록 연산을 수행하는 것인데, 최소로 수행해야한다고 한다. queue1의 합을 L, queue2의 합을 R이라고 했을 때, L과 R을 같게 만들기 위해서는 탐욕법을 사용하여 해결 할 수 있다. - L > R 이라면, q1의 원소를 q2으로 넘긴다. - L R인 상황에서 먼저 L을 증가시키고 R을 감소시키는 방법이 최적인 경우가 있다고 가정해보자. 이 경우 L = R을 만들기 위해서 언젠가 L을 감소시키고 R을 증가시켜야 하고 결국 q1의 원소를 q2로 넘겨주는 동작은 반드시 필요하다. 이 때 직접 큐 자료구조를 사용하지 않고 단순히 배열을 큐로 사용..
GraphQL In Action | GraphQL 작업 수정 및 구성 GraphQL 작업 수정 및 구성 서버로 부터 받아온 요청을 재분류하거나 재구성하는 일이 있다. 그래프QL은 기본 탑재된 기능을 사용해서 모든 것을 해결할 수 있다. 인수를 사용해서 필드 변경하기 그래프QL의 필드는 함수와 같다. 함수는 입력과 출력을 매핑하며, 입력은 여러개의 인수를 통해 받는다. 함수처럼 그래프QL필드에서도 여러 인수값을 전달할 수 있다. 백엔드 상의 그래프QL스키마는 이 인수값에 접근할 수 있으며 인수를 사용해서 응답을 변경할 수도 있다. 변경된 응답은 해당 인수를 지정한 필드로 반환한다. 단일 레코드를 요구하는 모든 API 요청은 해당 레코드용 식별자를 지정해야한다. 보통 식별자로는 데이터베이스에서 해당 레코드를 식별할 수 있는 고유 ID를 사용하는 것이 일반적이지만, ID외에도 ..

티스토리툴바