JSX란? React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. JSX코드는 HTML과 매우 유사하지만 차이점이 있다. class가 아닌 ClassName으로 표기한다. 항상 camelCase 표기법으로 표기해야 한다. (기존의 onlick을 onClick으로) flagment란? JSX 요소들은 항상 한 개의 컴포넌트로 리턴이 되어야 한다. 그렇기 때문에 똑같은 head를 두 번 나열해서 쓰면 에러가 발생한다. flagment가 등장하기 전에는 div나 span태그로 묶어서 사용했다. ..

1. Virtual DOM 가장 중요한 요소 DOM(Document Object Model) HTML 블록 하나 하나의 요소를 객체(Obeject)라고 하는데 이 객체를 DOM 객체라고 보면 된다. Javascript나 jQuery 라이브러리를 사용하는 경우 DOM에 바로 접근하거나 jQuery 메소드를 사용하여 접근했어야 했다. SPA : Single Page Application 특정한 기능이나 데이터 요청을 했을 때 해당 하는 페이지를 새로고침하거나 이동하는 작업 없이 현재 페이지에서 모든 데이터의 변환 처리과정 이동이 모두 이루어 지는 것 네이버 모바일 페이지를 예로 들었을 때 어떠한 버튼이나 이벤트 실행 시 페이지 전체가 리로드 되면서 DOM 구성이 바뀌게 된다.(F12를 눌러 개발자 도구를 킨..

관련 포스트 - 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..

Singleton Pattern (싱글톤 패턴)은 클래스 함수의 인스턴스를 한 개로만 유지하는 것을 말한다. 즉 여러 객체가 생성되더라도 최초 생성된 객체만 사용한다. 활용 사례 express 서버를 초기화할 때 환경 설정 파일을 읽거나 aws에서 환경 변수들을 가지고 있는 객체를 만든다고 가정할 때 싱글톤 패턴을 사용하지 않을 경우 서버에 대한 환경 설정을 계속해서 새로 읽거나 업데이트는 불필요한 작업이 일어남 어떤 객체나 데이터에 대해서 단일성 즉, 최초 한 번만 생성됨을 보장하기 위해서 사용하는 패턴이 싱글톤 패턴 캐시는 기존의 데이터가 있는 것에 대해서 새로 생성하지 않고 바로 사용가능한 것인데, 싱글톤 패턴을 사용하지 않을 경우 캐시 모듈이 항상 생성(초기화)되어서 의미가 없다. 'use str..

reduce를 사용하여 array를 편집하고 수정할 수 있음 reduce 는 각각의 요소를 첫 번째부터 혹은 특정 인덱스부터 마지막까지 접근할 때 사용 각각의 배열의 요소를 for문을 통해 배열의 요소를 하나 하나씩 접근 하는 것과 동일한 효과를 볼 수 있지만 가독성, 직관성 측면에서 뛰어남 map과 filter로 두 번 해야하는 연산을 reduce를 사용하여 한 번만 사용할 수 있음 예시 소스 'use strict' const numbers = [10, 20, 30, 40]; // 0부터 시작해서 각각의 배열을 순회하며 다음 값들을 한 번씩 더해 줌 // 명시적으로 초기값을 지정하지 않으면 0부터 시작 const sum = numbers.reduce((tot, val) => tot + val) cons..

먼저 Prototype을 활용한 서버 생성 소스 const http = require('http'); // 서버 생성 const server = http.createServer((req, res) => { // 요청에 대한 결과를 보낼 때 200일 경우 정상 작동 res.statusCode = 200 // 해당하는 데이터로 어떠한 것을 보냈는지 명시적으로 선언 res.setHeader('Content-type', 'text/html'); // html 문서를 리턴한다. // 종료 res.end('Hello World'); }) // 명시적으로 포트를 외부에서 받음 //const port = process.env.PORT // 테스트 화면을 띄우기 위해 임의의 포트 번호 작성 const port = 300..