따뜻한 베지밀

React, Vue 등 Virtual DOM을 채택한 경우가 많이 있습니다. DOM 이 아니라, Virtual DOM을 선택해야 하고, 사용해야 하는 이유에 대해서 알아봅시다. DOM (Document Object Model) Virtual DOM 을 알기 전에 실제 DOM에 대해서 간단하게만 알아봅시다. DOM 은 문서의 구조화된 표현을 제공하고 있으며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 담당을 합니다. 간단하게 얘기하면 개발자들은 DOM 을 만들어내고, DOM 은 웹페이지를 구성하면서 사용자들에게 보여지는 역할을 담당합니다. Browser Workflow (webkit) Webkit 에서 Browser가 작동하는 과정을 도식화한 모습입니다. 간단하게 내용을 살..

z-index의 css 속성은 개발자들이 애용하는 속성이라고 생각합니다. 그러나, 많이 사용되는 개념이지만 정확하게 알고 있는 개발자는 생각보다 적은 것 같아서 해당 개념에 대해서 서술하려고 합니다. z-index 어떤 것일까? z-index CSS 속성은 위치 지정 요소와 해당 하위 항목 또는 플렉스 항목의 z 순서(높낮이)를 설정합니다. 더 큰 z-index 가 있는 겹치는 요소는 더 작은 z-인덱스 요소보다 높게 위치합니다. z-index 가 100과 99가 있으면 정확하게 100 레벨에, 99 레벨에 위치할까요? 정확하게는 상대적인 개념입니다. z-index에는 stacking-context(쌓임 맥락)이 존재 합니다. 쌓임 맥락에 대해서 알아봅시다. Stacking Context Stacking..

패턴에서는 세부 사항은 해당 글에서 자세하게 다루지 않을 예정입니다. 편의를 위해서 Container Presenter패턴은 PC라고 불러 얘기할 예정입니다. 추가적으로 리액트에서는 커스텀 훅이라는 마법이 있어 모든 단점을 보완할 수 있다고 생각하나, 두 패턴의 장단점을 비교하기 위해 커스텀 훅의 존재는 잠시 배제할 예정입니다. Container Presenter React의 대가인 Dan Abramov가 2015년에 제시했던 디자인 패턴입니다. Container에서 논리적인 연산, Presenter에서 렌더링되는 뷰를 담당하고 있습니다. Atomic 디자이너 Brad frost가 2013년 즈음에 창시해낸 방법으로 Atom -> Molecules -> Organisms -> Templates -> Pa..

TestCode란? 1. TestCode는 왜 작성해야 할까요? 1.1 신뢰성 측면 TestCode를 통해서 우리는 우리의 코드가 잘 작동하는지 확인할 수 있습니다. 자신의 코드가 신뢰할 수 있고, 다른사람들에게 어떤식으로 작동하고 사용할 수 있는지 알려주는 지표가 됩니다. 1.2 시간성 측면 TestCode를 작성하면 오히려 개발이 빠르게 진행될 수가 있습니다. “급할수록 돌아가라”라는 말은 Test를 진행할 때에도 마찬가지입니다. TestCode를 작성하지 않으면 초반에 더 빠르게 개발이 될 수 있겠지만, 나중에 디버깅하는 과정에서 더 시간이 잡아먹게 되고 더 오랜 시간이 걸릴 수 있습니다. TestCode 작성 전 테스트 과정은 다음과 같습니다. 코드를 수정합니다. 서버를 동작하고, 테스트 데이터를..

우리는 웹사이트를 만들 때 로그인 기능을 구현하는 일이 많습니다. 프로젝트에서도 로그인 기능은 다룰려고 하는 추세입니다. 그러나 로그인 자체가 보안적으로 굉장하게 신경을 써야 하고, 이런 상황 저런 상황을 고려해야 합니다. 해당 글은 필자가 부족한 지식으로 작성한 글임을 알립니다. 이상한 내용이 있다면 댓글남겨주시길 바랍니다. 로그인 유지가 필요한 이유 메인 페이지에서 로그인 후에 다른 페이지에 들어갈 때 로그인을 새로 해야 한다면, 사용자 경험이 좋게 느껴질 수 있을까요? 저라면 그런 사이트는 이용하고 싶지 않을 것 같습니다😭😭 웹 브라우저와 웹 서버가 데이터를 주고 받을 때 HTTP(HyperText Transfer Protocol) 통신을 이용합니다. HTTP는 서버의 부담을 줄이기 위해 비연결성(..