소망개발노트

worker_threads노드에서 멀티 스레스 방식으로 작업하는 방법 child_process노드에서 다른 프로그램을 실행하고 싶거나 명령어를 수행하고 싶을때 사용하는 모듈입니다.이 모듈을 통해 다른언어의 코드(파이썬등)를 실해앟고 결괏값을 받을 수 있습니다.현재 노드 프로세스 외에 새로운 프로세스를 띄워서 명령을 수행하고 노드 프로세스에 결과를 알려줍니다.   파일 시스템 접근하기 fs모듈을 파일 시스템에 접근하는 모듈입니다.파일을 생성하거나 삭제하고, 읽거나 쓸 수 있고, 폴더도 만들더나 지울 수 있습니다.fs는 기본적으로 콜백형식의 모듈이라 실무에서 사용하기 불편합니다.따라서 fs 모듈을 프로미스 형식으로 바꿔주는 방식을 사용합니다.const fs = require('fs').promises;fs...

const { TextEncoder, TextDecoder } = require('util');const encoder = new TextEncoder();const decoder = new TextDecoder();const encoded = encoder.encode("Hello, World!");console.log(encoded); // Uint8Array 출력const decoded = decoder.decode(encoded);console.log(decoded); // "Hello, World!"3장 노드 기능 알아보기- 노드로 자바스크립트 파일을 실행하는 방법알기.- 객체와 모듈 사용법 알기- 버퍼, 스트림, 동기화와 비동기, 이벤트, 예외처리 배우기  REPL사용하기노드에서도 콘솔을 제공..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react React.createRef 클래스 컴포넌트에서도 함수 컴포넌트처럼 ref를 사용할 수 있게 해줌 Class, Hooks 상관없이 current로 접근 가능함 방법은 간단함 createRef를 import해주고 input = createRef(); 원하는 태그에서 ref = {input}으로 호출해주면 된다. import React, { useState, createRef } from 'react'; const inputRef = createRef(); inputRef.current.focus(); props와 state 연결하..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 렌더링 되는 것을 막는 두번째 방법 PureComponent import React, {PureComponent} from 'react'; class Test extends PureComponent { state = { counter:0, }; onClick = () => { this.setState({}); }; render(){ console.log('렌더링', this.state); return ( 클릭 ) } } export default Test; shouldComponentUpdate에서 return을 true로할지 ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react React Developer Tools props를 사용하면 렌더링이 자주 일어나서 성능이 저하된다. React Devtools를 이용하면 리액트 컴포넌트를 확인할 수 있음!! 크롬> 확장프로그램 > ReqctDEveloper Tools 검색 , 설치 이것을 다운받게되면 크롬의 개발자도구(f12)에서 리액트라는 탭이 생긴다 - 만약 리액트 탭이 안생겨있다면 ? 더보기 확장프로그램에서 React Developer Tools에서 > 상세보기 > 파일 URL에 대한 엑세스 허용! (이것도 안되면 강력새로고침!) 현재 개발모드로 되어있..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 클래스에서 Hooks로 바꿀때는 useState, useRef 를 import해야함 그리고나선 this.state를 지우자! 이전값이 필요하다면 함수형으로 사용하자! setTries((prevTries) => [...prevTires, {try :value, result :'홈런'}]); Hooks버전 NumberBaseball.jsx import React ,{ useRef, useState } from "react"; import Try from "./Try"; const getNumbers = () => { // 숫자 네개..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 리액트에서는 배열에 값을 추가할때 push()를 사용하면 안된다. => 리액트에서 무엇이 바뀌었는지 감지하지 못하기때문! const arr = []; arr.push(1); console.log(arr === arr); //ture const new_arr = [...arr, 2]; console.log(arr === new_arr) //false 기존 배열을 복사해 만든 새 배열을 할당해주는 방법으로 배열을 갱신해야함! 리액트에서의 반복문은 대부분 map을 사용함!! render() { const {} return ( ... ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react key와 map에서 구현했던 코드를 조금더 가독성있게 만들어 보자 {this.fruit.map((v , i) => ... 아래에 li로 반복문코드를 써주었던 부분을 따로 위에 뺄 수 있다. fruit = [ {fruit: "사과", taste :"맛있다"}, {fruit: "배", taste :"달다"}, {fruit: "바나나", taste :"맛없다"}, {fruit: "포도", taste :"싫어"}, {fruit: "딸기", taste :"좋아"}, ]; 조금더 가독성있는 코드가 되었다. 여태까진 한두줄의 간단한 코드가 ..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react map 반복되는 부분을 배열로 만들어서 map 함수를 이용해준다. 배열을 다룰때 자주 사용됨! 배열의 각 원소들을 앞에서 부터 하나씩 가져오고 보통은 화살표함수랑 같이쓰임 {/* 반복되는 걸 배열로 만들자 */} {['사과','배','바나나','포도','딸기'].map((v)=> { return( {v} ); })} key 아래와 같은 경우 어떻게 만들어 줄까 ? 사과 - 맛있다 바나나 - 맛없다 포노 - 시다 감 - 떫다 실무에서는 1차원적인 배열이 아닌 좀더 복잡하게 태그들이 얽혀있는 경우가 많다. {/* 반복되는 걸 배열로..

인프런에 제로초님의 강의를 보고 정리한 내용입니다. [ 웹 게임을 만들며 배우는 React ] https://www.inflearn.com/course/web-game-react 둘다 다른 파일의 코드를 불러온다는 목적을 가지고 있음! 하지만 babel같은 ES6코드를 변환해주는 도구 없니는 require 키워드를 사용해야한다고 함 require 노드의 모듈에서 사용하는 방법으로, 남이 만든 모듈이나 다른파일에서 만든 모듈을 불러올 수 있다. modeul.exports = {리액트 컴포넌트이름} import {객체} from = "{파일 주소, 모듈 이름}" import ES2015에서 새롭게 도입된 키워드 리액트에서 default로 export되는게 아니면 중괄호로 감싸서 import! export d..