Atomic Pattern아토믹 디자인 패턴은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이다.아토믹 디자인 패턴은 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿)으로 구성되어지고 최종적으로는 Pages 단위가 된다.즉, 일관된 UI를 만들고 유지보수성을 향상시켜준다. 구성요소 Atoms원자는 버튼, 제목 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트이다.모든 컴포넌트들의 기초가 되는 블록이며, 더 이상 분해 될 수 없는 필수 요소이다. Molecules분자는 2개 이상의 원자로 구성되어 있다. Organisms 분자들의 모음이다. Templates유기체들을 모아 템플릿으로 생성한 것이다. Pages실제 페이지를 구성하는 단위이다. 왜..

React-Router vs Next-RouterNext.js는 React를 감싸고 있는 프레임워크이다.React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 생각하면 된다.하지만, Next.js와 React에서 차이를 유일하게 크게 보이는 곳이 Router 부분이다.라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.  React Link vs Next LinkNext-js 같은 경우는 자바스크립트 a 태그 형식과 거의 같다고 보면 된다. Next.js 같은 경우는 원하는 a 태그에 링크를 걸어서 href 형식으로 주면된다. javascript 형식과 굉장히 비슷하다. ..

Immutable & mutableMutable한 객체는 생성된 이후에 상태가 변경될 수 있는 객체이고, Immutable한 객체는 생성된 이후에 상태가 변경되지 않는 객체를 말한다.자바스크립트에서 Object와 Array를 제외한 모든 타입은 Immutable한 타입이다. immutableString에 string 값을 더하면, 아래와 같은 이벤트들이 발생한다.immutableString에 존재하던 값을 읽는다."World"가 immutableString에 존재하던 값에 덧붙여진다.결과값이 새로운 메모리 블록에 할당된다.immutableString 객체가 새로운 메모리 공간을 가리킨다.이전에 immutableString이 가리키던 메모리 공간은 GC의 대상이 된다. 따라서, Immutable한 타입은,..

Virtual DOMVirtual DOM = Virtual(가상) + DOM(Document Object Model, 문서 객체 모델)이다.Virtual DOM은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이고, 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다. DOMDOM(Document Object Mode)을 영어 뜻풀이 그대로 하면 문서 객체 모델이다.여기서 문서 객체란 html, head, body와 같은 태그들을 javaScript가 이용할 수 있는(메모리에 보관할 수 있는) 객체를 의미한다. 가상돔이 나오게 된 이유어떠한 태그의 속성이나 값을 변경하려고 할 때 DOM에 접근하는 자바스크립트 메서드를 사용하여 변경한다.가령 h1 태그의 색상을..

Browser’s Rendering Process왜 브라우저의 렌더링 프로세스에 대해 알아야 할까 ?→ 사용자가 웹 페이지를 이탈하지 않고 서비스에 더 오래 머물게 하는 중요한 요소중 하나인 웹 애플리케이션 응답 속도 때문이다.속도 개선을 위한 성능 최적화 작업은 Backend, Frontend 모든 영역에서 작업 되어야하지만 드라마틱한 개선을 위해서는 브라우저 렌더링 최적화가 반드시 고려되어야 한다.Critical Rendering Path라는 브라우저 렌더링 과정을 이해하고 각 단계에서 어떤 일이 일어나는지 파악할 수 있어야 브라우저 렌더링 최적화를 통한 어플리케이션의 응답 속도를 개선할 수 있기 때문에 브라우저 렌더링 과정에 대해 이해하는 것은 중요하다 ! 어떻게 브라우저가 작동할까 ? 위 이미지..

HTTP Status Code상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공된다.첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보이다.상태의미1xx(정보)요청을 받았으며 프로세스를 계속 진행합니다.2xx(성공)요청을 성공적으로 받았으며 인식했고 수용하였습니다.3xx(리다이렉션)요청 완료를 위해 추가 작업 조치가 필요합니다.4xx(클라이언트 오류)요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.5xx(서버 오류)서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. 1XX : Information responses상태 코드가 "1"로 시작하는 경우는 서버가 요청을 받았으며, 서버에 연결된 클라이언트는 작업을 계속 진행하..