javascript (56) 썸네일형 리스트형 electron 프로그램 자동 업데이트 진행 시키기 (auto-updater), amazon s3 일렉트론으로 프로그램을 만들 후에 계속해서 업데이트 작업을 진행하는데 그 때마다 새로 설치파일을 사용자에게 주는 것은 너무나도 비효율적이라고 할 수 있습니다. 또한 잘못 코딩한 프로그램이 배포되면 보안적인 문제를 겪는데 그 설치파일을 이용해서 계속해서 잘 못 작성된 코드를 활용할 수도 있을 것입니다. 그래서 electron에서는 auto-updater라는 것을 제공합니다. www.electronjs.org/docs/api/auto-updater autoUpdater | Electron Enable apps to automatically update themselves. www.electronjs.org electron 공식 문서에서도 나와있는 내용이지만 조금 한국인이 알아듣기 쉽게 정리를 해보겠습니다. .. [React] input 태그 infinite render in react. or re-render in react. 리액트에서 프로젝트를 진행하다보면 input태그를 사용하여 프로젝트를 분명히 진행하게 될 것이다. 하지만 하나의 component에 input 태그와 table 혹은 데이터를 보여주는 자료를 함께 넣다보면 input태그에 텍스트를 넣을 때 마다 component가 re-rendering 되는 현상을 겪을 수 있다. 그럴 때는 input component를 만들어서 따로 component를 불러와서 그려주는 방법이 바람직하다. 예를 들면 하나의 컴포넌트에서 작용하는 상황에서 아래에 있는 표를 스크롤 내려놓고 글을 쓰게되면 다시 컴포넌트가 리렌더링되어 글을 적을 때마다 표 스크롤이 다시 올라가는 현상을 확인할 수 있을 것이다. 하지만 컴포넌트를 따로 관리하게 되면 리렌더링 되는 현상을 막을 수 있다. ..... [자바스크립트] 네이버 검색광고 API 이용하기 (Node.js) - 네이버 검색량 조회 예제 (/keywordstool API) 네이버에서는 여러가지 API 서비스를 제공한다. 대표적으로 developers.naver.com/products/intro/plan/ API 소개 네이버 오픈 API 목록 네이버 오픈API 목록 및 안내입니다. 네이버 오픈 API 목록 API명 설명 호출제한 검색 네이버 블로그, 이미지, 웹, 뉴스, 백과사전, 책, 카페, 지식iN 등 검색 25,000회/일 네이버 developers.naver.com 위와 같이 네이버 오픈 API 서비스와 아래 링크 네이버 검색광고 API 서비스이다. naver.github.io/searchad-apidoc/#/guides searchad-apidoc naver.github.io 위에 오픈 API 서비스는 node.js를 이용한 사용방법이 자세히 나와있지만 네이버 검색.. [자바스크립트 ] 매크로 만들기 - puppeteer (간단한 자동 로그인) 보통 매크로나 웹 크롤링은 python으로 많이들 만든다는 것을 알고 있었다. 하지만 자바스크립트로도 가능하다고 하여 이번 프로젝트는 웹 매크로 만들어보려고 한다. *매크로 사용으로 인한 불이익은 어떠한 경우에도 책임지지 않습니다. 우선 npm을 이용하여 puppeteer를 자신의 프로젝트 폴더에서 다운로드 한다. npm install puppeteer 이후 자신의 .js 파일을 만들어 코드를 넣는데 저는 index.js로 만들었습니다. 자세한 설명은 주석을 달아놓았습니다. const puppeteer = require('puppeteer'); const sanitizeHtml = require('sanitize-html'); (async () => { // launch 메서드는 chrome을 실행시킴... [React Hook] React Hooks란?, Lifecycle의 개념 React Hooks란? 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 기존의 단점은 세 가지 정도로 꼽을 수 있다. 1. 계층이 너무 많아진다. 2. Component가 너무 복잡해진다. 3. Class를 Component로 쓰면 bind, this를 쓰는데 이 방식은 컴퓨터에게는 복잡한 작업을 수행하게 하고 사람에게는 혼란을 발생시킨다. 위 세 가지 단점을 종합해서 말하자면 가독성이 떨어진다고 할 수 있다. 따라서 react hook은 Class 형태였던 Component를 function을 통해 만들 수 있게 해주는 API이다. React Hook를 사용할 때에는 실질적으로 두 가지만 사용한다. useState()와 useEffect()가 바로.. [React] (12) Delete 기능 구현 (CRUD) - CRUD 구현된 github 이제 CRUD의 마지막 기능인 Delete 기능이 남았다. 우리는 이미 Control.js에 delete버튼을 만들어 놓았다. Control.js import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에서 Control 태그 부분을 이렇게 고치면 된다. 전체 App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import ReadContent.. [React] (11) Update 기능 구현 (CRUD) Update기능은 Create기능과 Read기능이 결합된 형태라고 볼 수 있다. 그래서 우선 components폴더 안에 UpdateContent.js를 만든다. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContents render') return ( Update ); } } export default UpdateContent; 위 코드는 CreateContent.js에서 가지고 왔다. 그리고 App.js에 Import 시켜준다. refactoring (필수아님) getContent라는 함수를 만들어 조금 정리해준다... [React] (10) Create 기능 구현 (CRUD) - shouldComponentUpdate 설명 1. 누르면 mode가 변하는 작업 미리 진행되어 있는 작업에 components를 추가하려고 한다. components 파일의 하부에 Control.js를 만들어서 아래 코드를 삽입한다. import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에 아래처럼 Control을 넣어준다. {/* 자식 */} 코드를 적용하게 되면 아래 그림처럼 create와 update 그리고 delete가 생길 것이다. 각 버튼을 클릭하게 되면 mode가 바뀌는.. [React] (9) 이벤트 state, props, event 만들기, render function, bind 함수, setState 우리의 어플리케이션을 역동적으로 만들어주는 기술이 이벤트다. state, props, event 3개가 어울어져 만들어진다. react는 props나 state가 바뀌면 render 함수가 다시 호출된다. 따라서 그 render에 포함된 모든 것들이 다시 호출된다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시.. [React] (8) Key - Warning: Each child in a list should have a unique "key" prop. 오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저.. [React] (7) State 사용 앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자. 지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다.. [React] (6) State란 (props 와 state의 차이) State란? state를 이해하기 위해선 props와 비교해보는 것이 좋다. props state 사용자가 Component를 사용하는 입장에서 중요 props의 값에 따라 내부 구현에 필요한 데이터 (사용자가 알필요도 없고 알아서도 안된다.) 사용자가 조작하는 버튼 외부 조작버튼이 사용되기 위해 내부에서 조작되는 장치들 Props와 State는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하는 것이 좋다. props vs state 이전 1 2 3 4 5 다음
