삼바의 성장 블로그

새로운 어플리케이션을 개발할때, 렌더링을 언제 어디서 어떻게 할지 결정하는 것은 매우 중요합니다. 웹 서버, 빌드 서버, 클라이언트의 환경에서 렌더링을 할 것인지 그리고 렌더링을 한 번에 할 것인지, 부분적으로 할 것인지, 점진적으로 할 것인지 결정해야합니다. 이러한 결정은 매우 중요합니다. 적절한 렌더링 패턴을 고르는 것은 DX(Developer Experience), UX(User Experience) 측면 모두에게 중요합니다. 최근에는 렌더링 패턴중 CSR(Client Side Rendering), SSR(Server Side Rendering)이 주로 이야기되고 있으며 이 두 렌더링 패턴은 각각 장단점을 가지고 있으며 같은 웹페이지에서 특정 패턴이 유익할 수도 해로울 수도 있습니다. Static ..

Deno 진형에서 “The next-gen web framework.”라는 슬로건을 앞세운 Fresh가 어떤 아키텍쳐를 가지고 있고 어떤 방향성을 가지고 생겨났는지 알아봅시다. Fresh Fresh는 JS, TS 개발자를 위한 모던 웹 프레임워크입니다. Fresh는 높은 질, 성능을 가지고 웹 어플리케이션을 만들도록 디자인되었습니다. 여느 다른 모던 웹 프레임워크와 같이 홈페이지, 블로그, 웹 어플리케이션등 무엇이든 만들 수 있습니다. Fresh의 Core는 서버에서 라우팅 프레임워크와 템플릿 엔진(페이지를 렌더링 하는데 초점을 맞춘)을 조합하여 사용합니다. 또한 서버에서 JIT(Just-in-time) 렌더링이 가능하여 클라이언트에서 컴포넌트를 거의 동일하게 렌더링할 수 있도록 합니다. Fresh 에서..

자바스크립트는 기본적으로 C 스타일의 for(;;) 와 for ... in이 있다. 하지만 ES6에서 반복문으로 for ... of 를 추가하였다. for(;;) 과 for ... in 의 어떤 단점때문에 for ... of 를 사용하는지 알아보자. for(;;) for ([initialization]; [condition]; [final-expression]) statement 우리가 익히 알고있는 for(;;) 에는 단점 두 가지가 존재합니다. 인덱스를 사용해야만 한다. (;;) 의 코드가 길다. for ... in for (variable in object) { ... } for ... in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복..

리액트를 사용해 앱을 개발하다보면 “리액트는 언제 또는 왜 컴포넌트를 렌더링하는지 궁금증을 갖게 됩니다. 렌더링이 언제, 왜 일어나는지 모른다면 리액트 컴포넌트들을 조합하여 사용자가 원하는 UI를 보여주기 어려울 것이고 원하지 않는 렌더링 때문에 사용자에게 좋지 않은 경험을 심어줄 수 있습니다. 따라서 리액트가 언제 컴포넌트를 렌더링 하는지 공부하며 이 글을 적습니다. “렌더링"이란 무엇입니까? 리액트 컴포넌트의 렌더링은 props 와 state 의 조합으로 리액트가 특정 구역의 UI 를 어떻게 보여줄지 설명하는 것을 이야기합니다. 렌더링 프로세스 리액트는 컴포넌트 트리의 Root부터 시작하여 업데이트가 필요한 것으로 보이는 모든 컴포넌트를 찾아 아래쪽으로 순환합니다. 플래그가 지정된(flagged) 컴..

자바스크립트는 본질적으로 “덕 타이핑” 기반으로 사용자는 타입이 무엇인지 신경쓰지 않게 합니다. 그리고 타입스크립트는 이를 “구조적 타이핑” 기반으로 모델링합니다. 따라서 덕 타이핑과 구조적 타이핑을 이해하지 못한다면 예상하지 못한 결과와 마주할 수 있습니다. 이 두 타이핑을 이해해보도록 합시다. 덕 타이핑 (Duck Typing) 만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용합니다. 이 말이 조금 어렵게 느껴진다면 덕 타이핑은 아래의 문구로 쉽게 이해할 수 있습니다. “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면, 나는 그 새를 오리라고 부를 것이다.” 어떤 새가 오리로 태어났는지, 정말 오리인지는 중요하지 않습니다. ..

프로토타입 기반의 언어인 JS는 클래스가 존재하지 않았었습니다. 따라서 이는 클래스 기반의 다른 언어에 익숙한 많은 사용자를 혼란스럽게 했고 많은 개발자들은 JS에서 클래스와 유사하게 흉내내는 여러 기법들을 만들어냈습니다. 이러한 니즈를 바탕으로 결국 ES6에서 클래스 문법이 추가되었습니다. 클래스란 무엇인지 알아보고 개발자들이 ES5이하의 환경에서 클래스를 구현했던 방법을 예제를 통해 함께 해보려합니다. 클래스와 인스턴스 클래스라는 개념의 기원을 알아보고 그 시각을 가지고 클래스와 인스턴스는 무엇인지 함께 알아봅시다. 클래스라는 개념의 기원 서양철학사의 시작 서양철학사가 어디서부터 시작했느냐에 대해 여러가지 의견이 있겠지만, 일반적으로 서양철학사의 시작으로 철학자 ‘탈레스’를 이야기합니다. 탈레스가 어..

올해는 프론트엔드를 공부하는데 90%이상의 시간을 사용한 한해였다. Vanilla JS로 특정 기능들을 구현하기도 하고 Angular 레거시를 보기도했지만 React 프로젝트 속에서 React를 공부하고 이해하며 많은시간들을 보냈다. 새로운 회사에 하는 다양한 일에 참여해보고 그 안에서 나를 돌아보고 더 나아갈 방향을 생각할 수 있는 한해였다. 회사 올해동안 내가 회사에서 했던 일을 되돌아보면 회사의 서비스에서 사용자들에게 갖추지 못했던 것을 파악하고 이를 제공해주는 일을 했었다. 큰 규모의 서비스지만 아직 사용자들에게 불편한 점이 많고 업계 1위인 회사에게 항상 비교당하기 일쑤였다. 사실 올해동안 했던 일은 그 사용자들의 불편함을 잠시 가려두기 위해 진행했던 프로젝트가 대다수였다. Django temp..

모든 언어에서 프로그래밍을 하기 위해서는 메모리 공간을 사용해야합니다. 그리고 그 메모리 공간에 데이터는 할당하고 사용한 후에 해제해야합니다. JS에서 데이터를 할당한 후에 사용하는 것은 개발자가 코드에서 명시적으로 작성합니다. 하지만 해제하는 행위는 Garbage Collection(GC)라는 자동 메모리 관리 기법을 사용합니다. Reference Counting 레퍼런스 카운팅은 메모리 할당과 해제가 한 블럭 이내에서 이뤄질 수 없는 경우 사용합니다. GC를 구현하는 방법중 원리가 어렵지 않고 간단하며 프로세스에 연산 / 메모리 부하를 많이 주지 않아 초기버전의 GC나 Rust의 Rc/Arc 객체등에서 사용하고 있습니다. 레퍼런스 카운트는 동적으로 할당된 메모리를 참조하는 객체의 수를 의미합니다. 레..

useEffect 완벽 가이드(A Complete Guide to useEffect)를 읽으며 모든 렌더링은 고유의 이펙트를 가진다는 것을 알 수 있었습니다. 그리고 그 이펙트는 React가 기억해놨다가 DOM 업데이트 후에 실행한다는 것을 알게되었습니다. useEffect에 대해 어느정도 이해했다고 생각했지만 useEffect sometimes fires before paint라는 글의 제목을 보고 혼란에 빠졌고 이를 해결하기 위해 위의 글을 공부해보기로 했습니다. useLayoutEffect "Updating state in useLayoutEffect makes every useEffect from the same render run before paint" 두괄식으로 useLayoutEffect ..

서론 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render. React를 사용하여 App을 만들던 도중 위와 같은 오류를 만나게 되었고, 이를 useCallback Hook API를 사용하여 해결하였습니다. 해결은 했지만 위와같은 Warning이 왜 발생했는지 그리고 어떻게 해결할 수 있는지 이해를 하지 못하여 공부하며 이 글을 적어봅니다. 제가 공부한 흐름에 따라 정리해놓은 부족한 글..