두 손끝의 창조자

React.memo export default React.memo(Left);형태로 정의하면 이전 props와 현재 props를 비교하여 값의 변화가 없으면 Left 컴포넌트를 다시 호출하지 않아 불필요한 리프레시를 방지한다. props에 매우 많은 값이 들어있으면 비교하는것 자체가 부하를 주기 때문에 잘 판단해야한다. 비교할 때 === 연산자로 비교한다고 보면 되는데 원시타입은 값자체가 같으면 같아도 인식하지만, 오브젝트, 함수등은 컴포넌트를 호출하는 곳에서 재실행이 됐다면 새로운 함수로 인식하게 된다. 따라서 프롭스에 함수가 있다면 그 함수를 useCallback 으로 재생성되지 않도록 조치가 필요하다. useCallback 정의한 함수를 리액트의 내부 저장 공간에 저장해서 함수 객체가 실행될 때마다..

모든 컴포넌트 재평가 후에 useEffect를 실행한다. 컴포넌트가 렌더링되는 주기 안에서 사용되어야 하는 코드가 있을 때 유용함. 의존성이 변경될 때 실행된다. useEffect 에서 사용하는 모든 것을 의존성으로 넣어야 한다. 안넣어도 되는 것은 상태 업데이트 함수 내장 API 또는 함수 (fetch(), localStorage) useEffect 외의 변수 import { useEffect, useState } from 'react'; let myTimer; const MyComponent = (props) => { const [timerIsActive, setTimerIsActive] = useState(false); const { timerDuration } = props; // ..

.env 파일은 node를 실행할 때 읽어서 앱의 환경변수값으로 쓸 수 있다. .env 파일은 node를 실행하는 디렉토리에 있어야 한다. react project에서는 빌드할 때 .env 파일을 읽어서 변수값과 소스를 묶은 후 js 파일을 만든다. 따라서 빌드할 때 환경설정 정보가 완비되어야 한다. 개발 서버에 올릴 때와 운영 서버에 올릴 때 환경 변수 값이 다른 경우 빌드 할 때 적절히 환경 변수 값을 교체한 뒤에 빌드해야한다. 환경 변수파일의 우선순위는 npm start 했을 때는 .env < .env.local < .env.development < .env.development.local 순으로 .env.development.local 파일이 가장 우선순위가 높다. npm build 했을 때는 ...

sudo docker run -d \ -v /home/dev/content:/usr/share/nginx/html:ro \ -v /home/dev/nginx.conf:/etc/nginx/nginx.conf:ro \ nginx nginx 컨텐츠와 설정파일을 볼륨 마운트 시키려고 했더니 자꾸 오류가 났다. 파일인데 디렉토리에 마운트를 시켜면 어떻하니 어쩌고 저쩌고 파일이라고 인식을 잘 못하는것 같다. nginx.conf파일을 만들어 놓고 실행하니 일단 실행은 되는데 서버는 올라오지 않는다. 아마도 설정 정보가 호스트 쪽으로 넘어가질 안나보다. 일단 컨피그쪽 설정을 빼고 컨테이너를 올린뒤 설정정보만 그대로 복사해서 호스트쪽으로 넣고 다시 실행했다. 인제 잘 된다.

원격 데스크탑 접속할 때 로그인 이름을 변경하려면 사용자 정보에서 이름을 변경하면 된다. 사용자 정보는 윈도우 버튼 누르고 lusrmgr.msc 를 검색한 뒤 열면 된다. 사용자를 우클릭해서 이름 바꾸기로 변경한다. Administrator를 그대로 사용하고 있다면 반드시 비활성하거나 다른 이름으로 변경하여 사용해야한다.

SPA 는 웹 브라우저 기준으로는 진입점이 하나이다. index.html 하나에서 여러가지 페이지를 app 이 알아서 보여준다. 앱을 개발하면서 여러가지 라우트를 설정하여 개발한다. 개발할 때는 npm 을 이용해서 테스트 해보기 때문에 브라우저에 특정 패스를 넣으면 그 위치로 잘 넘어간다. 그러나 서버에 배포를 하게되면 문제가 생긴다. 브라우저는 이 앱이 SPA 인지 아닌지 그런건 알 수 없다. 그래서 입력한 주소로 요청을 보내는데 SPA 는 진입점이 하나, 즉 엔드포인트가 하나이므로 입력한 패스에 대한 자원을 찾을 수가 없을 것이다. localhost:3000/ 는 되지만 localhost:3000/abc 는 접근할 수 없다. 그래서 서버에 설정을 별도로 해줘야하는데 서버는 모든 요청에 대해서 SPA ..

리덕스가 왜 필요한가? 리액트 컨텍스트 단점 복잡한 셋텀 및 관리 심하게 중첩된 jsx 코드가 나온다. 성능 테마, 인증 등 저빈도 업데이트는 괜찮지만 변경이 자주 일어나는 곳에는 유용하지 않다. 리덕스 작동방식 중앙 저장소 하나에 모두 관리한다. 컴포넌트는 저장소를 구독해서 상태가 변경될 때마다 알림을 받는다. 컴포넌트는 저장소에 상태 변경을 요청한다. 요청하는 것을 dispatch라고 하고 요청을 action이라고 함 Action은 리듀서에 전달된다. Action은 단순한 자바스크립트 객체이다. 리듀서는 새로운 상태를 뱉어내고 스토어에 기존 상태를 변경한다. 저장소는 구독 중인 컴포넌트에 알림을 보낸다. 컴포넌트는 새로운 상태를 받아서 렌더링한다. 컴포넌트는 저장소 데이터를 변경하지 않는다. 구성 스..

nodejs 로 외부 api 를 호출한다던지 npm 으로 패키지 인스톨을 할 때 사내 SSL 인증서 문제로 설치가 안될 수 있다.코드에서는process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';npm 인스톨 할 때는export NODE_TLS_REJECT_UNAUTHORIZED=0으로 회피 가능하다.npm에 cafile을 등록을 해도 된다.npm config set cafile (cafile 위치)ca file은 웹브라우저에서 https로 시작하는 웹페이지(예:https://www.naver.com)에 접속하면 브라우저의 인증서 정보를 export 해서 가져올 수 있다.

vscode 는 현재 위치에서 code . 을 실행하면 현재 위치에서 디렉토리가 열린다. intelliJ IDEA는 기본적으로 지원하지 않는다. code 같은 쉘 프로그램을 추가하자. /usr/local/bin 디렉토리로 이동 cd /usr/local/bin 쉘 프로그램 작성 sudo vi idea 내용에 넣고 #!/bin/sh open -na "IntelliJ IDEA.app" --args "$@" 저장 wq 실행 권한 주고 sudo chmod -x idea 끝.

1. Code Runner 다양한 언어로된 코드를 실행시켜준다. nodejs 사용시 필수 Ctrl+Alt+N 단축키로 간편하게 실행시킬 수 있다. 2. Live Server 클라이언트에서 간편하게 현재 디렉터리 기준으로 서버를 띄어 준다. Go Live 버튼을 누르면 서버가 실행된다.

파워포인트로 장표를 작성하다보면 어느 순간 유독 텍스트가 들어있는 개체가 타이핑이 느려지거나 움직임미 버벅거릴 때가 있다. HKEY_CURRENT_USER\Software\Microsoft\Avalon.Graphics 이 레지스트리를 삭제하면 눈에 띄에 속도는 향상이 되는데 이 레지스트리의 값이 정확하게 어디에 영향을 더 줄 수 있는지 확인되지 않았다. WPF 그래픽을 렌더링 할 때 참조하는 값인것 같은데 어쨌든 지우면 당장 문제되는 것 없이 파워포인트 속도는 올라간다.

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 따라서 아래 코드의 실행결과는 두 함수 모두 1을 반환한다. const x = 1; function foo(){ const x = 10; bar(); } function bar(){ console.log(x); } foo(); bar();파이썬에도 비슷하게 동작한다. x = 1 def foo(): x = 10 bar() def bar(): print(x) foo() bar() 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다.=> 렉시컬 스코프

기준이 되는 이미지에 m1 플랫폼 이라는 것을 명시를 해줘야 하는데 그러면 플랫폼에 도커 파일이 의존성이 생긴다. 빌드할 때 ` --platform=linux/x86_64` 옵션을 추가해서 명시적으로 x86 시스템이라고 하면 빌드는 된다. 그런데 이 이미지가 실행이 잘 될까?

특정 컨텍스트에서 새 오브젝트로 데이터를 바인드 시키려면 ObjectMapper 같은 라이브러리를 활용하면 편리하다. 스프링 부트에는 이 기능을 제공하는데 org.springframework.boot.context.properties.bind.Binder 클래스가 그 역할을 수행한다.

테이블 조회시 그리드에 아래 처럼 컬럼의 설명을 넣을 수 있다. 프리퍼선스에서 Show column description in header 에 체크하고 껏다가 켜면 된다.

gradle 빌드를 하면 존재하는 테스트를 모두 수행한다. 때에 따라서 build시만 예외처리를 하고 싶으면 아래와 같이 대상을 등록한다. test { exclude("**/TestToSkipTest.class") }

org.springframework.boot.context.annotation.ImportCandidates /* * Copyright 2012-2022 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * https://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in w..

DBeaver 에서 기본적으로 엑셀파일로 출력을 지원하지 않는다. 추가 적으로 플러그인을 설치해야하는데 잘 정리된 글이 있으므로 참조 할 것. OKKY - [Dbeaver] 엑셀 추출 라이브러리 설치 방법 OKKY - [Dbeaver] 엑셀 추출 라이브러리 설치 방법 dbeaver 처음 설치하고 데이터 추출 시, 엑셀파일은 없고 csv파일 다운로드만 존재합니다.※ csv 파일 추출시 인코딩을 EUC-KR로 하면 한글이 깨지지 않습니다. dbeaver에서 엑셀 추출 라이브러리 설치 okky.kr

JetBrains 제품을 사용하면 프로그램이 별도로 만들어내는 데이터를 저장하는 공간이 있는데 그 위치가 C:\Users\[유저]\AppData\Local\JetBrains , C:\Users\[유저]\AppData\Roaming\JetBrains 이다. 문제는 IDE를 업데이트 하면 기존에 썼던 데이터를 그대로 유지하고 있어서(폴더이름이 버전으로 되어 있음) 소중한 공간을 낭비하고, 크기도 어마한 공간을 잡아 먹는다. 불필요한 공간을 삭제하자. Menu->Help->Delete Leftover IDE Directories 를 눌러서 불필요한 공간 검색을 하게하고 지울게 있으면 알림 형태로 뜨는데 클릭해서 삭제하면 된다.

[Spring Boot]war로 배포하기 (Gradle + 내/외장 톰캣) (tistory.com)