본문 바로가기
728x90
반응형

Javascript

 (130)
[React] Lifecycle Lifecycle은 리액트가 모든 요소들을 view 로 받기 때문에이 view를 데이터의 단방향을 보장하면서 효과적으로 데이터를 전체적인 틀(클래스) 내에서 단일적으로 관리하기 위한  로직을 마련하는 기능을 함 Rendering 함수를 기준으로 잡고 이전과 이후 시점으로 라이프 사이클을 실행하고 관리하는 기능들이 LifeCycle Method(라이프 사이클 메소드)다. 각각 라이프 사이클 메소드는 this.stat의 사용 가능 여부 또한 정해져 있는데 해당 예는 아래 소스 코드 및 이미지에 나와 있다. 예시 소스import React from "react";class LifeCycle extends React.Component { constructor(props) { super(prop..
[React] Rendering(조건별 Rendering) 조건별로 랜더링 하는 예시 소스 import React from 'react'; // 첫 번째 문자는 대문자 // 컴포넌트는 항상 함수를 반환해야 한다. const Loading = () => Loading... // 조건별로 랜더링 // 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트 class LoadingConponent extends React.Component { constructor(props) { super(props) this.state = { // 로딩이 되기 전 loading : false } } render() { const { loading } = this.state return ( { /* 조건별 페이지 랜더링 */ loading && // Loading일 경우에만 출력 } ) }..
[React] JSX와 Fragment JSX란? React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. JSX코드는 HTML과 매우 유사하지만 차이점이 있다. class가 아닌 ClassName으로 표기한다. 항상 camelCase 표기법으로 표기해야 한다. (기존의 onlick을 onClick으로) flagment란? JSX 요소들은 항상 한 개의 컴포넌트로 리턴이 되어야 한다. 그렇기 때문에 똑같은 head를 두 번 나열해서 쓰면 에러가 발생한다. flagment가 등장하기 전에는 div나 span태그로 묶어서 사용했다. ..
[React] JSX의 개념과 React 개발을 위한 ES6+ 필수 문법(Map) JSX란? React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. 즉 HTML 코드를 마치 XML을 코딩하는 것처럼 하는 것이다. app.js의 소스를 보면 javascript function 안에 html 코드가 코딩 되어 있는 것을 볼 수 있다. 이것을 JSX 라고한다. React는 모든 것을 Javascript로 코딩하는 것이 목적이기 때문에 JSX 문법을 통해 Javascript 안에 HTML 코딩을 하게 함으로써 모든 것을 컴포넌트화 할 수 있다. 만약 javascript 안에 H..
[React] 개발 환경 설정(feat. node, vsCode) (Hello World 출력하기) vsCode 설치 방법은 따로 설명하지 않았습니다. 기본 적인 설치 방법과 사용법 숙지가 필요합니다. developing-move.tistory.com/25 node 설치 및 에디터(vscode) 설치 구글에 node download를 검색하여 다운로드 링크로 이동하거나 해당 URL 접속 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine... developing-move.tistory.com 또한 node.js를 활용하여 진행할 예정이기 때문에 node에 대한 기초 지식도 필요합니다. 우선 초기 단계에서는 npm install 방법만 숙지하셔도..
[React] React 다섯 가지 특징 1. Virtual DOM 가장 중요한 요소 DOM(Document Object Model) HTML 블록 하나 하나의 요소를 객체(Obeject)라고 하는데 이 객체를 DOM 객체라고 보면 된다. Javascript나 jQuery 라이브러리를 사용하는 경우 DOM에 바로 접근하거나 jQuery 메소드를 사용하여 접근했어야 했다. SPA : Single Page Application 특정한 기능이나 데이터 요청을 했을 때 해당 하는 페이지를 새로고침하거나 이동하는 작업 없이 현재 페이지에서 모든 데이터의 변환 처리과정 이동이 모두 이루어 지는 것 네이버 모바일 페이지를 예로 들었을 때 어떠한 버튼이나 이벤트 실행 시 페이지 전체가 리로드 되면서 DOM 구성이 바뀌게 된다.(F12를 눌러 개발자 도구를 킨..
[Node] Crawling puppeteer를 활용하여 웹 페이지를 pdf로 변환 및 저장 관련 포스트 - HTML Crawling developing-move.tistory.com/174 [Node] Crawling puppeteer를 활용하여 웹 페이지의 데이터를 Crawling하기 원하는 페이지에서 html 소스를 가져와 파일 시스템을 이용하여 실제 파일로 출력하는 로직이다. 각 라인에 대한 설명은 주석에 있다. 예시 소스 const puppeteer = require('puppeteer'); const fs = require('f.. developing-move.tistory.com - ScreenShot Crawling developing-move.tistory.com/173 [Node] Crawling puppeteer 활용하여 웹페이지에 스크린샷을 자동으로 생성하기 관련 포스트 -..
[Node] Crawling puppeteer를 활용하여 웹 페이지의 데이터를 Crawling하기 관련 포스트 - ScreenShot Crawling developing-move.tistory.com/173 [Node] Crawling puppeteer 활용하여 웹페이지에 스크린샷을 자동으로 생성하기 관련 포스트 - HTML Crawling developing-move.tistory.com/174 [Node] Crawling puppeteer를 활용하여 웹 페이지의 데이터를 Crawling하기 원하는 페이지에서 html 소스를 가져와 파일 시스템을 이용하여 실제.. developing-move.tistory.com - pdf Crawling developing-move.tistory.com/175 [Node] Crawling puppeteer를 활용하여 웹 페이지를 pdf로 변환 및 저장 Crawli..
728x90
반응형

티스토리툴바