개발이야기 (27) 썸네일형 리스트형 Learning React | 4장 ~ 5장 리액트 작동 원리 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리이다. 리액트 엘리먼트 HTML을 브라우저가 문서 객체 모델(Document Object Model)인 DOM을 구성하기 위해 따라야 하는 절차라고 간단히 말할 수 있다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어들이면 DOM 엘리먼트가 되고, 이 DOM이 사용자 인터페이스를 화면에 표시한다. 전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어졌다. 사용자가 페이지 사이를 내비게이션 함에 따라 브라우저는 매번 다른 HTML 문서를 로딩할 수 있었다. AJAX(Asy.. 소프트 스킬 | 1 ~ 10장 정리 책 중요 문장 정리. 백종원씨가 예전에 TV에서 음식 장사가 성공하려며 "맛이 30 퍼센트,나머지가 70퍼센트"라는 말을 한 적이 있다. 맛은 있는데 손님이 많지 않은 식당이나 손님은 많은데 그리 맛이 뛰어나지 않은 식당을 경험한 적이 있을 것이다. 개발자 세계에서도 비슷한 원칙이 적용된다. 많은 개발자가 처음 사회생활을 시작할 때 개발자 세계에서는 실력만 갖추면 될 거라고 착각한다. 많은 시행착오를 겪은 저자는 지금에 이르러서는 실력의 비중이 생각보다 크지 않다는 사실을 깨달았다고 한다. 여전히 가장 중요한 요소라고 생각하지만, 실력만 좇다보면 더 큰 부분을 놓칠수 있다는 것이다. 이 책의 저자는 그 큰 부분을 가르켜 "소프트 스킬"이라고 했다. 소프트 스킬은 핵심 업무 능력을 의미하는 "하드 스킬"과.. Why useEffect is a bad place to make API calls 아래 글을 번역한 글 입니다. Why useEffect is a bad place to make API calls The design choices react team have made in useEffect hook are still a heated debate. Some people like it and some don’t. articles.wesionary.team React 팀이 useEffect hook에서 선택한 디자인 선택은 여전히 열띤 토론입니다. 어떤 사람들은 그것을 좋아하고 어떤 사람들은 그렇지 않습니다. 여러분이 React 세계에서 오지 않았다면 기본 동작이 두려운 무한렌더 루프이기 때문에 확실히 이상하게 들릴 것입니다. (의존성 배열에 아무것도 없으면 매 렌더마다 실행) 예를 들어 .. How to useMemo and useCallback: you can remove most of them 원문: https://www.developerway.com/posts/how-to-use-memo-use-callback React가 처음이 아니라면 적어도 useMemo 및 useCallback 훅에 익숙하실 것입니다. 중대형 애플리케이션에서 작업하는 경우 앱의 일부가 읽고 디버그 할 수 없는 useMemo, useCallback들로 도배되어 있는 것을 볼 수 있습니다. 이러한 훅은 제어할 수 없을 정도로 코드 주위에 퍼져있습니다. 또한 주변 동료들이 모두 작성하고 있다는 이유만으로 작성하는 자신을 발견하게 됩니다. 이 모든 것은 완전히 불필요합니다. 지금 바로 앱에서 모든 useMemo 및 useCallback을 90% 제거할 수 있으며 앱은 문제가 없고 약간 더 빨리질 수 있습니다. 오해하지 마세요.. 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를 .. GraphQL In Action | GraphQL 작업 수정 및 구성 GraphQL 작업 수정 및 구성 서버로 부터 받아온 요청을 재분류하거나 재구성하는 일이 있다. 그래프QL은 기본 탑재된 기능을 사용해서 모든 것을 해결할 수 있다. 인수를 사용해서 필드 변경하기 그래프QL의 필드는 함수와 같다. 함수는 입력과 출력을 매핑하며, 입력은 여러개의 인수를 통해 받는다. 함수처럼 그래프QL필드에서도 여러 인수값을 전달할 수 있다. 백엔드 상의 그래프QL스키마는 이 인수값에 접근할 수 있으며 인수를 사용해서 응답을 변경할 수도 있다. 변경된 응답은 해당 인수를 지정한 필드로 반환한다. 단일 레코드를 요구하는 모든 API 요청은 해당 레코드용 식별자를 지정해야한다. 보통 식별자로는 데이터베이스에서 해당 레코드를 식별할 수 있는 고유 ID를 사용하는 것이 일반적이지만, ID외에도 .. GraphQL In Action | GraphQL API GraphQL API 그래프QL서버에 데이터를 요청할 때는 그래프QL 쿼리 언어로 작성된 요청을 보낸다. 그리고 이 요청에는 트리형 필드가 포함된다. 그래프QL 커뮤니케이션의 핵심은 요청 객체이다. 그래프QL 요청은 문서(Document)라고도 불린다. 문서는 쿼리, 변경, 구독과 같은 작업 요청을 텍스트로 가지고 있다. 또한, 이런 주요 작업 외에도 기타 작업을 구성할 때 사용하는 조각도 텍스트로 저장된다. 요청 그래프QL 요청에는 변수의 값을 나타내는 객체도 포함되며, 처리와 관련 메타 정보도 포함될 수 있다. 요청 문서에 작업이 하나만 포함돼 있다면 서버는 해당 작업을 알아서 실행한다. 이 경우 작업에 이름을 붙일 필요가 없지만, 일반적으로는 모든 작업에 이름을 붙이는 편이 좋다. 만약 내가 3가지.. 이전 1 2 3 4 다음
