Frontend

React patterns 🤔

아래 출처의 글을 보고 번역 및 주요 내용을 정리한 글입니다. 어떻게 하면 다양한 경우에 적합한 재사용 가능한 컴포넌트를 build할 수 있을까? 어떻게 하면 사용하기 쉽게 단순한 API와 컴포넌트를 만들 수 있을까? 어떻게 하면 UI와 기능적으로 확장 가능한 컴포넌트를 만들 수 있을까?? 에 대한 고민으로 이 글은 시작합니다. 5가지의 패턴을 제시하고 장점, 단점을 리스트업 해줍니다. 그리고 두개의 기준을 명시해 주었습니다. 제어의 역전 : 컴포넌트를 사용하는 사람들에게 제공되는 유연성과 주도권의 정도 구현의 복잡도 : 해당 패턴을 구현하는데 복잡도 1. Compound Components Pattern 이 패턴은 prop drilling을 피하면서 선언적으로 컴포넌트를 구성할 수 있게 해줍니다. 이..

비동기 에러처리 🤔

문득 setTimeout에 전달된 함수는 어떻게 에러처리를 해야하난 궁금해져서 이 문서를 작성합니다. 살펴볼 예시는 4가지 입니다. try/catch setTimeout with try/catch Promise의 catch async/await with try/catch try/catch try/catch는 예외상황을 다뤄야 할때 주로 사용합니다. javascript가 런타임에서 에러가 나면 이후의 코드는 실행되지 않고 멈추어 버리기 때문에 예외처리는 중요합니다. 예외가 발생할 수 있는 곳에 보험을 들어서 이후의 동작을 수행할 수 있도록 하는 것이 중요하다고 생각합니다. 아래의 코드가 있습니다. 하나는 try/catch로 감싼것, 감싸지 않은 것입니다. 감싸지 않은 것에서는 에러가 발생하여 이후의 동작을..

React 공식문서 주요개념 살펴보기

3. 엘리먼트 렌더링 React에서 엘리먼트는 최소 단위 입니다. 이런 엘리먼트가 모여서 컴포넌트를 이루고 컴포넌트들이 모여서 프로덕트가 완성됩니다. 엘리먼트는 화면에 표시해줄 내용을 가지고 있습니다. const element = Hello, world; 이러한 엘리먼트를 화면에 렌더링하려면 ReactDOM.render()를 이용하면 됩니다. ReactDOM.render에는 엘리먼트와 루트 DOM 노드가 들어가게 됩니다. const element = Hello, world ReactDOM.render(element, document.getElementById('root')) // ReactDOM.render(엘리먼트, 루트 DOM 요소) React에서 엘리먼트는 불변객체 입니다. (엘리먼트가 생성된 이후..

Javascript 프론트엔드 MV* 아키텍처 (원글 + 생각)😉

아래 출처의 글을 정리하고 약간의 생각을 가미하려 합니다. 허락해주신 테오님께 갑사합니다 ㅎㅎ MVC패턴 MVVM패턴 등등이 많이 언급되고 사용된다 하지만 저는 MVC 패턴만 간략하게 이해가 되고 다른 것들은 쉽게 이해가 되지 않았습니다. 그러던 와중 좋은 글을 읽게 되었고 저자의 허락을 얻어 저의 언어로 정리하고 인사이트를 작성해 보고자 합니다. 1. 아키텍쳐란 무엇일까요? 2. 웹 프론트엔드 아키텍쳐 이야기 3. 현대 웹 프론트엔드의 아키텍쳐 방향성 1. 아키텍쳐란 무엇일까요? 아키텍처란 영어로는 '건축학'이라는 뜻입니다. 이 단어가 개발분야로 유입되면 조금 다른 뜻을 가지게 됩니다. 아래 사진들은 옷장에 대한 사진들 입니다. 두개의 옷장은 전부 같은 양의 옷을 보관하고 있다고 가정하겠습니다. 그리고..

React what is JSX? (번역글) 🤔

이 글은 아래 출처의 글을 번역한 글입니다. 오역과 의역을 자주 사용합니다. 글 상단의 강의 영상들은 가져오지 못했습니다. embed 되어있는 강의 영상 자체는 가져올 수 있는데 사이트에 css가 tailwind로 적용되어있어 overhead가 커질것 같아 가져오지 않았습니다. 이제 블로그 포스트로 넘어가겠습니다. React를 효과적으로 사용하는 방법을 이해하는데 있어 중요한 부분은 자바스크립트와 자바스크립트 표식을 이해하는 것이라 생각합니다. 그래서 JSX의 일부 예제를 보여드릴거고 JSX가 컴파일된 버전은 어떻게 동작하는지 도움을 줄것 입니다. 머릿속에서 JSX를 컴파일 할 수 있다면 추상화를 좀 더 강력하게 사용할 수 있습니다. 간단한 예시가 있습니다. 모든 예제들은 변수에 할당할 수 있는 정규 J..

React One Simple trick to optimize React re-renders (번역글) 🤔

이 글은 아래 출처의 글을 번역한 글입니다. 오역과 의역을 자주 사용합니다. 리액트 리렌더와 관련된 블로그 포스트를 준비하고 있었는데 우연히 작은 React 지식을 발견했고 여러분께 도움이 되리라 생각합니다. HTML 삽입 미리보기할 수 없는 소스 이 블로그 포스트를 읽은 후에 Brooks Lybrand는 이 트릭을 구현했고 아래는 그 결과 입니다. HTML 삽입 미리보기할 수 없는 소스 흥미롭나요? 단순한 예제와 함께 살펴보고 여러분의 앱을 위한 실용적인 예제에 대하여 이야기 해봅시다 An example // play with this on codesandbox: https://codesandbox.io/s/react-codesandbox-g9mt5 import * as React from 'react..

Javascript Colocation (번역글) 🤔

이 포스트는 아래 출처의 글을 번역한 글입니다. 의역과 오역을 자주 사용합니다. 우리 모두는 유지보수가 쉬운 코드를 원합니다. 그래서 우리는 코드를 유지보수가 쉽고 이해하기 쉽게 만들기 위한 최선의 의도와 함께 시작을 합니다. 시간이 지나고 코드가 커질수록 의존성을 관리하기는 어려워 집니다. 프로젝트가 커질 수록 코드가 '사소한 지식'이 되고 '기술 부채'에 기여하는 코드의 양은 증가해져 갑니다. 저는 제 코드를 저 뿐만 아니라 동류, 미래의 코드 관리자, 6개월 뒤에 저를 위해 관리가 수월하게 하고 싶었습니다. 모두가 동의할 수 있다고 생각합니다. 이것은 좋은 생각이고 우리가 우리의 코드에서 갈구해야 하는 것이라는 것을. 이것을 성취하기 위한 기술과 다양한 도구 들이 많이 존재합니다. Let's tal..

React The State Reducer Pattern with React Hooks (번역글) 🤔

얼마전, React 컴포넌트를 향상시키기 위한 state reducer pattern이라고 불리는 새로운 패턴을 개발했습니다. 이것을 downshift 내부 상태를 업데이트 하고 싶어하는 사람들에게 훌륭한 API 사용을 가능하게 하기 위해 downshift에서 사용하였습니다. 만약 downshift에 익숙하지 않다면, 접근 가능한 autocomplete/typeahead/dropdown 컴포넌트들과 같은 것을 만들 수 있는 '향상된 input' 컴포넌트 라는 것만 알면 됩니다. `isOpen`, `selectedItem`, `highlightedIndex`와 `inputValue와 같은 상태를 관리한다는 것을 아는것은 중요합니다. Downshift는 현재 prop component를 render하도록 구..

Javascript Don't Use Javascript Variables Without knowing Temporal Dead zone (번역글 + 생각) 💀

아래 출처의 글 중 일부를 번역하고 제 생각을 넣은 글입니다. 의역과 오역을 자주 사용합니다. 아래의 코드중 어떤 코드가 에러를 발생시킬 것 같나요??? 아래의 코드는 인스턴스를 생성합니다. 그리고 사용된 클래스를 정의합니다. new Car('red'); // 동작할까요?? class Car { constructor(color) { this.color = color; } } 두번째는 호출을 한후에 함수의 정의를 합니다. greet('World'); // 동작할까요? function greet(who) { return `Hello, ${who}!`; } 첫번째 코드는 ReferenceError를 발생시킵니다. 두번째는 정상적으로 동작하구요 만약 답변하지 못했거나 틀렸다면 Temporarl Dead Zone..

React theStateReducerPattern (번역글) 🤔

이 포스트는 아래 출처의 글을 번역한 글 입니다. 오역과 의역이 있을 수 있습니다. 이 포스트는 기록을 남기기 위한 이유로 이곳에 존재합니다. an updated version of this blog post with React Hooks 이 글을 읽어주세요! 또한 보다 일반적인 개념인 "제어의 역전"에도 관심이 있을 수 있습니다. 지난주 @notruth(downshift 프로젝트의 새로운 컨트리뷰터)는 "closeOnSelection" 속성(박스에서 복수 선택을 했을시) 이슈를 추가해주었습니다. 여러분이 진정으로 알아야 할 것은 특정 시나리오에서 유저의 동작에 기초하여 downshift가 어떻게 상태를 업데이트하는지에 대한 결정이 @notruth가 구현에 대해 원하는 것과 일치하지 않는다는 것입니다. ..