본문 바로가기

전체 글

 (214)
[번역] JavaScript Promises: an introduction JavaScript Promises: 소개 Promise는 지연 및 비동기 계산을 단순화합니다. Promise는 아직 완료되지 않은 작업을 나타냅니다. web.dev 프로미스는 지연(deferred) 및 비동기 연산을 간소화한다. 프로미스는 아직 완료되지 않은 연산을 나타낸다. -> 비동기 처리의 상태(pending, fulfilled..)와 결과를 나타내는 객체 개발자 여러분, 웹 개발의 역사에서 중요한 순간을 맞이할 준비를 하세요. 자바스크립트에 Promise가 생겼습니다! Browser support and polyfill 완전한 프로미스 구현이 없는 브라우저 사양을 준수하도록 만들거나 다른 브라우저 및 Node.js에 프로미스를 추가하려면 폴리필을 확인하세요. What's all the fuss ..
2020 KAKAO BLIND RECUITMENT 괄호 변환 이 문제에 적힌 그대로 구현하는게 중요하다. 간단한 조건도 잘 체크하자. 먼저 '(', ')'로만 이루어진 문자열이 있을 경우 '('의 개수와 ')'의 개수가 같으면 이를 균형잡힌 괄호 문자열이라 한다. 그러면 일단 여기서 체크할 부분은 빈 문자열은 균형잡힌 괄호 문자열이 아니다. 균형잡힌 괄호 문자열을 판별하는 함수를 작성해보자. 함수 이름은 checkIsBalancedString이 좋은 것 같다. 만약 균형잡힌 문자열이라면 true, 아니라면 false를 반환한다. function checkIsBalancedString(s) { if (s === "") return false // 빈 문자열은 균형잡힌 문자열이 아니다. let left = 0 // 왼쪽 괄호의 개수 let right = 0 // 오른..
[번역] UI is a function of state UI is a function of state My very own corner of the web www.kn8.lt React는 UI 개발에 혁명을 일으켰습니다. 이것이 최종 패러다임이 아닐 수도 있고 새로운 아이디어를 탐구하지 말아야 한다는 뜻은 아닙니다. 하지만 어쨋든 React는 멋지고 사용하기 매우 재밌습니다. React의 핵심 원칙은 전체 UI가 일부 상태 (또는 단순히 데이터)를 취하고 렌더링된 전체 사용자 인터페이스를 반환하는 함수라는 것입니다. UI = fn(state) 이 아이디어를 적용하기 위해 React가 필요하지도 않습니다. React를 도입하지 않고 좀 더 자세히 살펴봅시다. 이러한 UI 함수를 구현하고 렌더링된 콘텐츠를 페이지에 삽입해 봅시다. const Header = ()..
Islands Architecture https://jasonformat.com/islands-architecture/ Islands Architecture - JASON Format I’ve struggled to find references to this online, but heard the name used multiple times this year when describing the approach outlined here. To the best of my knowledge, the "Component Islands" pattern was coined by Etsy's frontend architect Katie Sylo jasonformat.com 위 글을 번역 했습니다. 온라인에서 이에 대한 자료를 찾기 어려웠지만, 올해 이 ..
[번역] 웹 사이트 크기가 14KB보다 작아야 하는 이유 Why your website should be under 14kb in size Having a smaller website makes it load faster — that's not surprising. What is surprising is that a... dev.to 크기가 작은 웹 사이트일수록 로드하는 시간이 줄어든다는 것은 놀랍지 않은 일입니다. 하지만 정말 놀라운 것은 14kB의 페이지가 15kB의 페이지보다 훨씬 빠르게 로드된다는 것입니다.(아마 612ms 정도 빠를 것입니다.) 반면에 15kB 페이지와 16kB의 페이지의 차이는 아주 사소합니다. 이는 TCP의 slow start 알고리즘 때문에 발생하는 차이입니다. 이 아티클에선 이 알고리즘이 무엇인지, 어떻게 동작하는지, 그리고 왜..
[번역] useImperativeHandle useImperativeHandle – React The library for web and native user interfaces react.dev useImparativeHandle은 ref로 노출된 handle을 사용자 정의할 수 있는 React Hook이다. useImperativeHandle(ref, createHandle, dependencies?) 컴포넌트 최상위 레벨에서 useImperativeHandle을 호출하여 노출되는 ref 핸들을 커스터마이징 할 수 있다: import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperati..
[번역] ErrorBoundary Catching rendering errors with an error boundary 기본적으로 애플리케이션이 렌더링 도중 에러를 발생시키면 React는 화면에서 UI를 제거한다. 이를 방지하기 위해 애플리케이션의 UI의 일부를 에러 바운더리로 감싸면 된다. 에러 바운더리는 충돌한 부분 대신 오류 메시지와 같은 폴백 UI를 표시할 수 있는 특수 컴포넌트이다. 에러 경계 컴포넌트를 구현하려면 에러에 대한 응답으로 상태를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 getDerivedStateFromError를 제공해야한다. 또한 선택적으로 componentDidCatch를 구현하여 로그를 기록할 수 있다. class ErrorBoundary extends React.Component { cons..
Backends for Frontends pattern 아래 글을 번역했습니다. Backends for Frontends pattern - Azure Architecture Center Explore the Backends for Frontends pattern, which creates separate backend services to be consumed by specific frontend applications or interfaces. learn.microsoft.com 특정 프론트엔드 애플리케이션이나 인터페이스에서 사용할 별도의 백엔드 서비스를 만듭니다. 이 패턴은 여러 인터페이스에 대해 단일 백엔드를 사용자 지정하지 않으려는 경우에 유용합니다. 이 패턴은 샘 뉴먼이 처음 설명했습니다. Context and problem 애플리케이션은 처음에 데..

티스토리툴바