Responsive Web을 하면서 느낀점px, em, rem, %, vw, vh 등등이 있다. 나는 반응형 웹을 적용하기 위하여 rem을 사용중이고, html { font-size: 62.5% }로 설정하였다. 이 뜻은 font-size를 10px로 설정하겠다는 뜻이다. rem과 em의 차이점은 rem은 루트 태그의 영향을 받고 em은 부모 태그의 영향을 받는다. *** rem을 사용할 때, padding, margin 등에 사용하면 안된다고 한다. :: 사용자가 임의로 글씨 크기를 키웠을 경우 화면이 잘리거나 하는 등의 문제가 발생할 수 있다고 한다.
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이 가리키던 ..
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라는 브라우저 렌더링 과정을 이해하고 각 단계에서 어떤 일이 일어나는지 파악할 수 있어야 브라우저 렌더링 최적화를 통한 어플리케이션의 응답 속도를 개선할 수 있기 때문에 브라우저 렌더링 과정에 대해 이해하는 것은 중요하다 ! 어떻게 브라우저가 작동할까 ? ┌ ..
