Front

리액트의 생태계는 실용적이고 중요한 다양한 기능과 개념이 있다. 리액트 애플리케이션에 전체적으로 필요한 한 가지 핵심 개념을 선택한다면 그것은 컴포넌트를 사용하는 것이다. 컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고 차후에 혼합하여 전반적인 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..

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 Props를 사용해서 데이터를 전달했다. 그런데 전달해야 하는 Props의 길이가 깊다면? 그것도 깊이가 아주 깊다면? 이런 경우에는 모든 컴포넌트 사이에 Props를 전달 해야함으로 굉장히 번거롭다. 중간에 있는 컴포넌트는 단순히 하위 컴포넌트에 데이터를 전달하기 위해 Props를 선언해야 한다. 이렇게 하위 컴포넌트를 단순히 Props를 전달하기 위한 컴포넌트로 쓰는걸 Prop Drilling 이라고 한다. 이런 문제를 해결할수 있는것이 바로 Provide와 Inject다. 이걸 사용하면 계층구조의 깊이에 상관없이 모든 자식 컴포넌트에 데이터를 전달 할 수 있다. Prop Drilling 일반적을 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 ..

Slot 이란? HTML 요소와 마찬가지로 우리가 만든 컴포넌트에 콘텐츠를 전달할 수 있으면 유용합니다. 컴폰넌트를 만든 후 콘텐츠를 전달해 보도록 하겠습니다. slot을 사용하는 방법은 매우 간단합니다. 컨텐츠를 위치하게 하고 싶은곳에 컴포넌트를 배치 시키면 됩니다. 그리고 사용하는 쪽에 아래 예시처럼 컨텐츠를 넣으면 됩ㄴ디ㅏ. 위에 정의한 컴포넌트를 부모 컴포넌트에서 사용해 보겠습니다. Click!! 여기서 작성된 콘텐츠는 이 선언된 위치에서 그대로 사용됩니다. 요소는 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠 입니다. 그리고 슬롯은 텍스트뿐만아니라 HTML요소, 컴포넌트 등 다양한 모든 콘텐츠가 될 수 있습니다. Click me ! Fallback Content 상위 컴포넌트에서 슬롯..