'라이브러리' 카테고리의 글 목록

라이브러리 (8)

react 외부 함수형 컴포넌트 가져오는 방법

라이브러리/React js 다한(dahan) 2021. 1. 23. 15:57

이번 시간은 react 외부 함수형 컴포넌트 가져오는 방법에 대해 알려드리고자 합니다. 컴포넌트 만들기 모듈 내보내기(export) 및 가져오기 (import)를 통해 외부 함수형 컴포넌트를 가져올 수 있습니다. 일단 사이트에서 header 부분을 담당할 header 컴포넌트를 만들어보겠습니다. header.js import React from "react"; const header = () =>{ return( CYH Portfolio HOME ABOUT PORTFOLIO BLOG 사는곳: 서울특별시 영등포구 email: choyoungho95@gmail.com © 2021 CYH Portfolio. ) } export default header header 컴포넌트에서 export default [컴..

react 조건부 렌더링 with 삼항연산자, AND 연산자

라이브러리/React js 다한(dahan) 2019. 8. 10. 17:37

렌더링은 클라이언트(사용자, 방문자 등)에서 서버의 파일을 브라우저에 뿌려주는 과정이다. 코드로 얘기하자면 처음 태그(돔, DOM)가 나오고 그 다음에 , 순으로 나오는 것을 확인할 수 있다. 그러면 여기서 문제, HTML, CSS, JavaScript 중에서 가장 먼저 렌더링되는 것은 무엇일까? 정답은 HTML이다. 생각해보자. 우리의 컴퓨터 및 프로그램은 위에서 아래로, 좌에서 우로 문서를 파싱한다. 즉, 문서의 바탕이 되는 html을 가장 먼저 읽고 head안에 CSS파일을 읽는다. 그리고 최종으로 JavaScript가 렌더링된다. 즉, HTML -> CSS -> JavaScript로 렌더링이 진행되며 렌더링은 브라우저에 뿌려주는 과정을 말한다. 그렇다면 React의 조건부 렌더링은 무엇일까? 조건..

React 기본적인 문법

라이브러리/React js 다한(dahan) 2019. 8. 4. 23:52

1. React 기본 문법 import React, {Component} from "react"; class App extends Component{ render(){ return( Hello ); } } export default App 2. css 적용 방법 App.css .App{ background: black; color: aqua; font-size: 36px; padding: 1rem; } App.js import React, {Component} from "react"; import "./App"; class App extends Component{ render(){ return( Hello ) } } export default App; 3. 두개 이상의 코드 처리하는 방법 - 두개 이상의..

React js 라이브러리란?

라이브러리/React js 다한(dahan) 2019. 8. 4. 22:53

React js는 프론트엔드 라이브러리이다. 요즘의 웹은 옛날과는 다르게 웹 페이지보다는 웹 애플리케이션으로 동작한다. 웹 페이지의 경우는 단순히 HTML, CSS, JavaScript로 이루워졌다면 웹 애플리케이션은 브라우저 상으로도 자연스러운 흐름으로 많은 것들을 할 수 있게 해준다. 예를들어, 아래와 같은 HTML코드가 있다고 가정해보자. Hello document.querySelector("#Hello").innerText = "aaa"; 이 Hello라는 문자열을 바꿔주려면 JavaScript를 이용해 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해줘야 한다. 이러한 작업은 소규모 프로젝트할 때는 상관없지만 대규모 혹은 다양한 인터페이스를 제공하게 된다면, 많은..

뷰 컴포넌트 통신과 유효 범위

라이브러리/Vue.js 다한(dahan) 2019. 4. 10. 21:12

Vue 뷰는 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문이다. 따라서, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 이 예제는 2개의 지역 컴포넌트를 등록하고 첫 번째 지역 컴포넌트는 직접 값을 입력하여 출력하지만 두 번째 컴포넌트는 첫 번째 값을 참조하여 출력하는 코드이다. 실행하면 첫 번째 값은 나오지만 두 번째 값은 나오지 않는 것을 확인할 수 있다. 왜 두 번째 컴포넌트의 값은 나타나지 않을까? 컴포넌트의 유효 범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못하기 때문이다. 이렇게 직접 다른 컴포넌트의 값을 참조할 수 없지만 뷰 프레임워크에..

Vue.js 화면을 개발하기 위한 필수 단위 두번째 컴포넌트

라이브러리/Vue.js 다한(dahan) 2019. 4. 7. 18:21

컴포넌트는 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다. 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다. 또한, 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 다시 코드를 사용하기가 편하다. 컴포넌트를 등록하는 방법으로는 전역, 지역 컴포넌트가 있다. 전역 컴포넌트 등록 방법 Vue.component('컴포넌트 이름',{ //컴포넌트 내용 }); 컴포넌트 등록

Vue.js 화면을 개발하기 위한 필수 단위 인스턴스

라이브러리/Vue.js 다한(dahan) 2019. 4. 7. 02:26

Vue 뷰로 웹을 개발할 때 반드시 알아야 하는 두 가지 기술 요소는 인스턴스와 컴포넌트이다. 그 중 인스턴스에 대해 알아보자. 인스턴스 {{message}} 인스턴스는 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 다음의 코드를 보면 브라우저 창에 텍스트 형태로 'Hello Vue.js!'가 출력되는 것도 인스턴스가 있기 때문이다. 그렇다면 어떻게 생성하면 될까? 아래의 코드를 보면 생성자 인스턴스를 만들고 el 속성, data 속성 등을 이용해서 화면을 만든다. 이렇게 생성자를 만드는 이유는 재정의하여 편리하게 사용하도록 하기 위해서이다. 생성자는 객체를 생성할 때 자주 사용하는 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 떄 기존에 포함된 기능과 더불어 기존 기능을 ..

Vue.js란?

라이브러리/Vue.js 다한(dahan) 2019. 4. 5. 22:27

Vue 뷰는 웹 페이지 화면을 개발하는 목적으로 만들어진 프론트엔드 프레임워크이다. 프레임워크는 필수 코드, 알고리즘, 데이터베이스 등 웹 페이지를 개발하는 데에 있어서 어느 정도 구성이 되어있는 뼈대를 제공하도록 만들어진 것이다. (참고: https://dahanweb.tistory.com/35) MVVM 패턴 Vue는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM 패턴은 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 말한다. 이 방식으로 개발하면 화면 코드(프론트엔드)과 데이터 코드(백엔드)를 분리하여 코드를 직관적으로 이해할 수 있고, 서비스되고 유지보수가 더 편해지기 때문이다. MVVM ..

1

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바