프론트엔드 개발자라면 다들 들어본 비슷하지만 다른..? 렌더링 방식에 대하여 정리하고자 합니다. 우선 간단하게 용어부터 정리 해보겠습니다 SPA(Single Page Application) : 한 개의 페이지로 구성된 애플리케이션 MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 애플리케이션 CSR(Client Side Rendering) : 클라이언트 측에서 렌더링을 하는 방식 SSR(Server Side Rendering) : 서버 측에서 렌더링을 하는 방식 대부분 CSR + SPA 한 묶음, SSR + MPA 한 묶음 이라고 정의하곤 합니다. 이유는 많이 사용되는 React, Vue, Angular 등 JS 라이브러리나 프레임워크를 쓰면 HTML, CSS, JS ..
React 를 사용하면서 state 를 변경 했지만, 리액트가 제대로 감지하지 못하여 변화가 일어나지 않아 자료를 찾아보다가 🥺 리액트는 불변성을 지켜야 한다. 위와 같은 말을 많이 접하게 되었습니다. 리액트를 처음 배울 때 몇 번 들어봤던 말인데 그 당시 제대로 잡고 갔어야하는데 다시 같은 실수를 방지하고자 공부하여 정리합니다. 자바스크립트 메모리 구조 Call Stack(콜 스택) 실행 중인 함수를 추적하여 계산을 수행하고, 지역 변수를 저장 (LIFO 방식) 고정된 크기로 메모리에 저장(실제 데이터가 변수에 할당) 원시 타입이 이곳에 저장 됩니다. ( Boolean, String, Number, Null, Undefined, Symbol ) Memory Heap(메모리 힙) 콜 스택과 달리 메모리 ..
컴포넌트란 ❓ 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈 컴포넌트 개념의 유래 ❓ 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어집니다. ➡ 따라서, 문제가 발생 했을 때 해당 부분의 모듈만 교체하면 다시 문제없이 작동 합니다. 하지만, 소프트웨어는 다릅니다. 소프트웨어는 독립적으로 개발되지 않은 경우가 많고, 혹여나 독립적으로 개발되었다 하더라도 다른 모듈과의 호환을 생각하지 않으면, 재사용을 어렵게 하고 유지보수 비용이 증가되는 원인이 됩니다. ➡ 즉, 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 입니다. 좋은 컴포넌트란 ❓ 다른 컴포넌트들과 연결되어 있지 않고 (응집도) 독립적 재사용성이 높은 것 ➡ 위의 3가지는 결국 컴포넌트를 나누는 기준이 됩니다. 참고..
Props ❓ Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 ✔ Props 특징 자식 컴포넌트에서 데이터를 변경 할 수 없습니다. ( 컴포넌트 내부의 속성이라고 봐도 무방 합니다 ) 이미 HTML 를 사용하면서 태그에 대한 속성을 알고 사용하고 있습니다. ( id, class, onClick 등 ) Hello world! React에서는 이 속성 개념에 데이터를 전달하는 느낌으로 추가 확장 const Text = ({text}) => { return {text} } const App = () => { return } 결과, 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여 Hello world! 라는 문자열이 출력 됩니다. State ..
React 란 ❓ 리액트는 싱글 페이지 애플리케이션 UI(User Interface) 를 생성하는데 포커스를 맞춘 라이브러리 입니다. UI 를 표기하고 Event 에 반응하는 라이브러리 React 의 특징 리액트의 대표적인 특징으로 Virtual Dom (가상 돔) 이라고 합니다. ✔ Virtual Dom (가상 돔) 리액트는 가상 돔을 사용하여 웹 애플리케이션의 성능을 극대화 시켰습니다. 가상 돔을 이해하기 위해서는 우선 HTML과 CSS가 렌더링(Rendering) 되는 과정을 알아야 합니다. 1. 웹 브라우저가 HTML 을 전달 받으면 브라우저 렌더링 엔진은 HTML 을 파싱하고 DOM 트리를 생성 합니다. (Parsing) DOM(Document Object Model) 은 XML이나 HTML 문..
