Javascript (128) 썸네일형 리스트형 [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.. [Node] Crawling puppeteer 활용하여 웹페이지에 스크린샷을 자동으로 생성하기 관련 포스트 - HTML Crawling developing-move.tistory.com/174 [Node] Crawling puppeteer를 활용하여 웹 페이지의 데이터를 Crawling하기 원하는 페이지에서 html 소스를 가져와 파일 시스템을 이용하여 실제 파일로 출력하는 로직이다. 각 라인에 대한 설명은 주석에 있다. 예시 소스 const puppeteer = require('puppeteer'); const fs = require('f.. developing-move.tistory.com - PDF Crawling developing-move.tistory.com/175 [Node] Crawling puppeteer를 활용하여 웹 페이지를 pdf로 변환 및 저장 Crawling 마지막으로 원.. [Node] Class 활용하여 express 선언하기 'use strict' const express = require('express') const http = require('http') // class로 express 선언 // http server를 확장 // 매우 중요 ! class ApiServer extends http.Server { // singleton pattern 활용 // constructor를 통해서 클래스를 초기화하는데 // config를 통해 외부의 환경 설정을 읽어 옴 // 한 번만 config로 초기화 함 constructor (config) { // express가 한 번만 생성되어 유일성을 보장받을 수 있음(중요!) const app = express() // super를 사용하여 해당 메소드를 다 사용 가능하게 supe.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음
