Front

내부 코드는 컴포넌트의 setup() 함수 안의 코드로 컴파일 됩니다.컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 {{ msg }} import 된 자원(Component, Utils 등)도 동일한 방식으로 에서 직접 사용할 수 있습니다. ReactivityReactivity APIs(ref, reactive, computed, watch 등) 를 defineProps() & defineEmits()defineProps()와 defineEmits() APIs를 defineProps와 defineEmits는 expose는 일반 slots과 attrs 는 일반 Top-level awaitvue/setup-compiler-macrosdefineProps 및 defineEmits와 같은 컴파일러 매크로..

Vue의 선언적 렌더링 모델은 대부분의 직접적인 DOM의 작업을 대신 수행합니다. 하지만 때론 기본 DOM요소에 직접 접근해야 하는 경우가 있을 수 있습니다. 이때 ref 특수 속성을 사용해서 쉽게 접근할 수 있습니다.HTML복사input type="text" ref="input" /> ​ref는 특수 속성입니다. 이 ref 특수 속성을 통해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있습니다.Refs 접근하기Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 합니다. 컴포넌트가 마운트된 후에 접근할 수 있습니다.  안에서 input으로 Refs참조에 접근하려는 경우 렌더링되기 전에는 참조가 null일 수 있습니다.  안에서 $refs 내장 객체로 Refs ..

리액트의 생태계는 실용적이고 중요한 다양한 기능과 개념이 있다. 리액트 애플리케이션에 전체적으로 필요한 한 가지 핵심 개념을 선택한다면 그것은 컴포넌트를 사용하는 것이다. 컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고 차후에 혼합하여 전반적인 UI를 구축할 수 있다. 결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것이다. 완벽하게 상호작용하는 유저 인터페이스를 만들기 위해 추가적인 기능과 개념이 필요하지만 컴포넌트는 복잡도와 상관없이, 모든 리액트 애플리케이션에서 사용된다 UI를 여러 컴포넌트의 결합으로 여기는 것은 리액트에서만 적용되는 것이 아닙니다 어느 웹사이트를 방문하든 웹사이트 또는 웹사이트의 몇 가지 주요 빌딩블록을 바로 확인 할 수 있다. 쉽게 말..

index.html 파일엔 페이지 역할을 하는 HTML 요소가 포함되어있다. 리액트에선 index.html 파일에 내용이 없고 섹션 끝에 만 포함되어있다. 왜냐하면 리액트 앱에서는 리액트가 사용자 인터페이스 전체를 렌더링하기 때문이다. 본격적인 내용은 index.js 파일부터 시작한다고 보면된다. 우리가 index.js 파일에서 document.getElementById("root")를 선택해서 가 선택되면 리액트가 이 와 그 내용을 제어하기 시작한다. 그때 중요한게 App.js파일인데, App.js 파일은 말하자면 핵심 코드가 담겨 있는 파일이다. 파일안에 App() 이라는 함수가 있는데. 내용에 특이한 점이 있다. HTML 코드가 잔뜩 들어있는 점이다. 이건 자바스크립트의 기본 기능이 아니다. 기본적..

리액트란 무엇이고 대체 왜 사용할까요? 리액트 공식 웹페이지인 react.dev에 가면 답이 있습니다. 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리라고요. 다시 말해 리액트는 사용자 인터페이스 구축을 위한 라이브러리인 거예요 그게 리액트의 핵심이죠, 나아가서는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리예요 물론 이건 리액트를 왜 쓰느냐는 질문에는 답이 되지 못해요 그에 대한 답은 리액트를 사용하는 웹페이지에 가보면 있습니다 일례로 넷플릭스가 있죠 이런 웹사이트를 탐색해 보면 보다시피 전환이 매우 부드럽고 즉각적이에요, 새 페이지가 로딩되는 듯한 효과가 전혀 없죠 서버에서 새 페이지를 받을 때까지 기다리지 않아도 돼요 그래서 어떻게 보면 모바일 앱 같기도 해요. 모바일 앱에서는 즉각적인 ..

프로젝트를 진행하면서 브라우저 Size 조절에 맞게 반응하는 Height 가 필요했다. Tab Size, Mobile Size별로 줄어드는게 아닌 Web 애플리케이션의 PC 기종 변경에 따른 크기 조정이이다. 미디어 쿼리가 필요한게 아니다. 단독 요소 calc(-160px + 100vh) 2개의 요소 calc((100vh - 210px) / 2)

Lifecycle Hooks 각각의 Vue 컴포넌트 인스턴스는 생성되고 소멸될 때 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클 훅(lifecycle)이라 합니다. 라이프사이클 훅(Lifecycle hooks)은 라이프사이클 단계에서 개발자가 자신의 코드를 추가할 수 있는 계별 기능(function)입니다. Lifecycle 다이어그램 다음은 인스턴스 수명 주기에 대한 다이어그램입니다. 지금 진행 중인 모든 것을 완전히 이해할 필요는 없지만 더 많이 배우고 구축함에 따라 유용한 참고 자료가 될 것입니다. Lifecycle hooks 등록 컴포넌트가 렌더링을 완료하고 DOM 노드를 만든 후 onMounted hooks를 사용하여 코드를 실행할 수 있습니다. import { onMounte..