React

개요 디자인 시안이 변경되면 추가되거나 다른 UI지만 같은 데이터 로직을 가진 컴포넌트를 만드는 경우가 발생한다. 이럴 때 매번 새로운 컴포넌트를 만들어야 했던 귀찮은 일이 생긴다. 위와 같은 이유가 발생하는 이유는 해당 컴포넌트에 두 가지 관심사가 존재하는 문제를 잘 분리하지 못했기 때문이다. 컴포넌트를 Headless하게 만들어서 이를 해결할 수 있다. 하나의 컴포넌트에 두 가지 관심사가 존재하는 문제를 Headless하게 만들어 보자. Headless가 뭘까? 우선 Headless가 무엇일까? 말 그대로 머리(Head)가 없는 것을 의미한다. 보통 Head는 컨텐츠를 보여주는 방법을 의미하고, Body는 컨텐츠 자체를 의미한다. React에서 Head는 UI 즉, 컨텐츠를 보여주는 방법, 컴포넌트가..

엄격한 단일 상속 Mixin에 앞서서 class의 엄격한 단일 상속에 대하여 알아둬야 합니다. (클래스가 수행할 수 없는 상속의 형태를 알게 되면, 그에 맞는 함수를 구상하는 데 도움이 됩니다.) 클래스 Typescript 그리고 Javascript 클래스는 엄격하게 단일 상속만 지원합니다. 그래서 아래와 같이 할 수 없습니다. class User extends Tagged, Timestamped {// 🚨오류 : 다중 상속 불가 } interface와 class를 헷갈리지 말자. interface는 multiple extends가 가능합니다. 아래 코드에서 interface IUser는 Tagged와 Timestamped를 만족시켜야 합니다. class User는 IUser를 만족시켜야 합니다.(imp..

눈에 띄는 변화들만 정리 1. 하나의 함수 호출 시그니처(객체 형식)만을 지원 // useQuery - useQuery(key, fn, options) + useQuery({ queryKey, queryFn, ...options }) - useInfiniteQuery(key, fn, options) + useInfiniteQuery({ queryKey, queryFn, ...options }) - useMutation(fn, options) + useMutation({ mutationFn, ...options }) - useIsFetching(key, filters) + useIsFetching({ queryKey, ...filters }) - useIsMutating(key, filters) + use..

이 글에서는 react로 많이 넘어온 이유들 중 virtualDOM 등장 전후 배경에 대해서만 다룬다. virtualDOM 전의 기존 배경 1. 비효율적인 브라우저의 렌더링 과정 브라우저의 렌더링 가정을 간략화하자면 다음과 같다. 개발자가 작성한 HTML 파일을 브라우저가 받는다. 웹 엔진의 HTML/XML parser가 HTML 파일을 파싱하여 DOM node로 이루어진 DOM tree를 생성한다. 이후 css 파일도 CSS parser가 파싱하여 CSSOM tree를 생성한다. 생성된 DOM tree와 CSSOM tree를 합쳐서 render tree를 생성한다. Layout 단계 이전에 브라우저의 자바스크립트 엔진이 JS파일을 읽어 DOM API를 사용해 render tree를 변경. Layout ..

정적 웹 정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 보여주는 웹 사이트를 말한다. 주의할 점은 여기서 '움직이지 않는다'라는 것은 화면이 움직이지 않는다는 것이 아니라는 점이다. 정적 웹 사이트에 접속하면, 서버는 마치 진열대에 놓인 상품처럼 이미 프로그래머가 작성해놓은 파일들(리소스)을 그대로 클라이언트의 브라우저에 건네준다. 즉, 사용자에게 보여질 모습, 페이지의 최종본(html, css, javascript 파일 등의 묶음)이 전달된다. 최종본을 받은 브라우저는 파싱과정을 거쳐서 렌더링하여 클라이언트의 화면에 디스플레이 하게 된다. 그러면 들어갈 때마다 같은 화면이 보이는 것들이 정적 웹 사이트일까? 위에서 얘기했듯이 정적 웹의 '정적'은 간단하게 '움직이지 않는다. 다른 화..

개요 실무에서 클린코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면, 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 응집도, 단일 책임, 추상화 총 세 가지 관점으로 클린코드 방법을 알아보겠습니다. (레퍼런스의 내용을 요약한 글입니다.) 1. 실무에서 클린 코드의 의의 "그 코드는 안 건드리시는 게 좋을 거에요. 일단 제가 만질게요." - 한 번쯤은 들어본 말 흐름 파악이 어렵고, 도메인 맥락 표현이 안 되어, 동료에게 물어봐야 알 수 있는 코드 - 실무에서 클린 코드의 의의 = 유지 보수 시간의 단축 시간 = 자원 = 돈 코드파악 + 디버깅 + 리뷰 시간의 단축을 하기위해 클린 코드를 지향해야 합니다. 처음에는 클린했지만 후에는 어지..

1. screenX, screenY 사용자 실제 모니터 화면을 기준으로 한 좌표를 표시합니다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0) 이 됩니다. 2. pageX, pageY 전체 문서(document)를 기준으로 한 좌표를 표시합니다. 즉, 웹 페이지 전체에서의 절대적인 위치를 나타냅니다. 위 그림과 같이 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될 때마다 변경될 것입니다.(창을 줄이지 않았다는 가정 하에서 스크롤이 생겼다는 것은 문서 높이가 높아졌다는 뜻이기 때문.) 3. clientX, clientY 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시합니다. 따라서 스크롤바가 움직이더라도 사용자에게 보여지는 영역의 크기는..

주의 어떠한 javscript method를 사용하여 어떤 특정 요소의 높이 길이 등 그 요소의 어떤 값을 얻는 그 어떤 행위든간에 그런 행위는 performance에 영향을 줄 수 있습니다. 왜냐하면 그런 행위는 browser가 동기적으로 스타일과 layout을 계산하도록 하기 때문입니다. 이런 행위는 reflow 혹은 layout thrashing 이라고 불립니다. 일반적으로 동기적으로 layout metrics(layout 계산이라고 이해)를 제공하는 모든 API들은 강제로 reflow를 발생시킵니다. 더 자세한 사항은 밑의 두 링크를 참조해주세요. 🔗관련 링크 1 What forces layout/reflow. The comprehensive list. What forces layout/reflo..

리액트에서는 절대 컴포넌트 함수 밖에 let 선언자로 변수 선언을 하면 안 된다. 아래와 같은 코드가 있다고 가정해봅시다. ... let count = 1; const WrongComponent = () => { const [_, setCount] = useState(1); const onClick = useCallback(() => { setCount(count++); }, []); return count: {count}; } export default WrongComponent; 이는 지양해야 하는 코드입니다. 컴포넌트를 페이지당 1개 쓸 때는 문제가 없지만, 컴포넌트 밖 중복되는 이름의 let 변수가 있을 경우 해당 변수를 공유하게 될 수도 있습니다. ... const App() { return (..

0. 코드 스플릿팅의 개념 코드 스플릿팅의 개념은 webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 *번들 파일을 여러 개의 번들 파일로 나누는 것을 의미합니다. 하나의 번들 파일을 여러 개의 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서입니다. '번들링'이란? bundle은 명사로는 '묶음', 동사로는 '~을 마구 싸 보내다[밀어 넣다]' 라는 뜻을 가지고 있습니다. 프로그래밍에서의 번들링은 *모듈화했던 자바스크립트 파일들을 하나로 묶어준다는 뜻입니다. 번들링을 수행하기 위해서는 번들러(bundler)가 필요합니다. *'모듈'이란? Module을 쉽게 설명하자면 하나의 재사용 가능한 부품을 의미한다고 보시면 됩니다. Module을 한 줄로 정..