두 손끝의 창조자

기본값으로 컨텍스트 패스는 root이다. 만약 스프링부트 또는 WAS에 war를 디플로이 할 때 루트패스가 아니라면 경로가 맞지 않아 404 응답이 반환된다. package.json 파일에 homepage 속성으로 패스를 변경할 수 있다. 내부 js에서 참조하는 패스에 해당 속성의 값을 덧붙여서 요청하기 때문에 컨텍스트 패스를 변경한 것처럼 느껴진다. 예) "homepage": "/doraemi"

어떤 원인인지는 모르겠지만 가족증명서 발행 페이지 접속과 동시에 비정상적인 접근이라는 알림이 뜬다. 해당 문제는 프라이베잇창을 열고 가족관계 증명서 홈페이지에 접속 후 다시 시도하면 문제없이 사용할 수 있다. 콘트롤 + 쉬프트 + N 을 누르면 바로뜨고, 오른쪽 위 메뉴에서도 클릭하여 열 수 있다. https://efamily.scourt.go.kr/ https://efamily.scourt.go.kr/ efamily.scourt.go.kr

요소에 키보드 등으로 포커스가 됐을 때 선택된 요소를 하이라이트 해주는 스타일을 변경하고자 할 때 button:focus-visible { outline: 2px solid rgba(41, 182, 198, 0.50); } a:focus-visible { outline: 2px solid rgba(41, 182, 198, 0.50); } focus-visible 주도선택자를 이용해서 outline을 변경한다.

checkbox 를 좀 이쁘게 꾸며보자. [type='checkbox'] { vertical-align: middle; appearance: none; border-color: #29b6c6; transition: border 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; border-radius: 20%; } [type='checkbox']:focus { box-shadow: 0 0 0 0.2rem rgba(41, 182, 198, 0.25); } [type='checkbox']:checked { background-color: #29b6c6; } [type='checkbox']:checked..

useEffect 함수 내부에서 반환하는 함수는 클린업 함수라고 한다. 클린업 함수는 컴포넌트가 언마운트 될 때 호출된다. 불필요한 자원해제 등을 위해 쓴다. 컴포넌트가 마운트 됐을 때 호출되는 함수를 정의하기 위해서는 useEffect 두 번째 파라미터에 [] 빈 배열을 넣는다. 이 빈 배열을 넣은 useEffect 함수에서 반환하는 함수가 컴포넌트 클린업 함수이다.

remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password.git 서버에서 리포지토리를 http 또는 https 프로토콜로 clone하려고 할 때 종종 볼수 있는 오류이다. 오류 내용을 보면 패스워드 토큰이 정확하지 않거나 이중 인증을 활성화 해놔서 개인접근토큰이 필요하다는 의미인데 이중 인증을 활성화 한적이 없다면 기존에 윈도우에 존재하는 자격증명을 그대로 사용하다가 오류가 난것이다. 오래됐거나 서버 정보가 바끼었거나. 그래서 간단하게 기존에 저장되어 있..

json 파일에 키 정의할 때 {{ key }} 형태로 치환할 변수를 정의할 수 있다. { "key": "{{value}}" } 사용하는 방법은 t 함수 호출시 두번째 인자에 매핑정보를 추가한다. t('key', { value: '값값값'});

스프링부트로 프로젝트 수행 도중 타입 체크 (isAssignableFrom) 부분에서 문제가 발생했다. 특정 클래스의 오브젝트를 인자로 리플렉션으로 메소드를 실행하려고 하는데 메소드의 파라미터 타입과 클래스의 오브젝트 타입이 달라서 실행이 안되는 문제가 발생했다. 디버깅 해본 결과 분명 타입은 같은 타입이었다. 허나 다른 부분은 클래스로더였다. 하나는 RestartClassLoader 다른 하나는 AppclassLoader 였다. 클래스 로더가 다르면 둘의 타입은 다르다고 인식할 수 있기 때문에 가장 의심스러운 부분이었다. RestartClassLoader는 스프링부트의 spring-boot-devtools 를 사용하면 추가되는 클래스로더이다. spring-boot-devtools를 제거하고 나니 잘 수..

function moveElementInJson(json, sourceId, destinationId, newIndex) { // 복제된 JSON 생성 const updatedJson = JSON.parse(JSON.stringify(json)); // 소스 요소 찾기 const sourceElement = findElementById(updatedJson, sourceId); if (!sourceElement) { console.error('Source element not found.'); return null; } // 소스 요소를 제거 const removedElement = removeElementById(updatedJson, sourceId); // 대상 위치에 요소 삽입 co..

React의 Context API는 컴포넌트 트리 전체에 걸쳐 데이터를 공유할 수 있게 해줍니다. 이는 전역 상태를 관리하는 수단으로 널리 사용되며, 주로 로그인 정보, UI 테마, 언어 등을 설정하는데 쓰입니다. 본문에서는 Context의 정의, Provider와 Consumer의 관계, 사용법, 그리고 동적으로 Context의 값을 변경하는 방법에 대해 알아보겠습니다. Context의 정의 먼저, Context API는 React의 부분이며, 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있게 해줍니다. 이를 사용하면, 중간에 있는 컴포넌트들을 건너뛰고 바로 자식 컴포넌트에게 데이터를 전달할 수 있습니다. 이는 prop drilling 문제를 해결하는데 도움을 줍니다. Provider와 Cons..

useEffect 훅을 이용해서 컴포넌트가 처음 로딩될 때 무언가 작업을 하려면 useEffect(() => { console.log('~~~~') }, []);이처럼 두번째 바라미터에 빈 배열을 전달해서 사용한다. 그런데 이게 두번씩 호출 될때가 있다. 상위 컴포넌트의 의해서 두번로딩될 수 도 있지만 React.StrictMode 인 경우도 두번 호출이 된다. React.StrictMode는 보통 index.js 에 컴포넌트가 추가되어 있으니 불필요하다고 판단될때는 제거해서 테스트 해보자.

모듈 A, B, C가 있을 때 B는 C모듈을 의존해서 구현하고 A는 B모듈을 사용한다. A가 B모듈 중 C에 존재하는 예외 클래스를 상속받아 재구현한 예외를 사용하려고 하면 참조 오류가 발생한다. throw 로 예외를 올렸을 때 오류가 발생하는데 일반 클래스 생성 및 사용은 문제가 없다. 그 이유를 모르겠어서 기록해놓는다. module c code package c; public class BaseException extends RuntimeException{ }module b gradle implementation project(':module-c')code package b; import c.BaseException; public class SubBaseException extends ..

nexus 자원 배포 url은 2와 3이 다르다. 3 버전대는 http://localhost:8081/repository/maven-releases http://localhost:8081/repository/maven-snapshots2 버전대는 http://localhost:8081/content/repositories/releases http://localhost:8081/content/repositories/snapshots다운로드는 3 버전대 /repository/maven-public2 버전대 /content/groups/public

일단 pip 를 한번 업뎃 해주고 python -m pip install --upgrade pip프로젝트를 만든다. 프로젝트 구조는 아래처럼 만든다. project_directory/ └── src/ └── package_name/ ├── __init__.py └── module_name.py__init__.py 는 빈 상태로 두고 module_name.py 는 로직을 담는다. 라이선스 파일을 추가 project_directory/ ├── LICENSE ├── pyproject.toml ├── README.md ├── src/ │ └── package_name/ │ ├── __init__.py │ └── module_name.py └── tests/tests 는 빈 폴더로 두어도 된다. pyproject..

프로그램 추가 삭제에서 지우려고 했더니 이딴 오류가 발생하면 관리자 권한 으로 파워쉘을 열고 프로그램 설치된 위치의 bin 디렉토리(예:cd 'C:\Program Files\JetBrains\PyCharm Community Edition 2021.3.2\bin\') 로 간뒤 아래 코드를 실행하라. New-Item -Path 'IdeaWin64.dll' -ItemType File삭제를 하기 위한 특정한 프로세스가 Un_A.exe가 IdeaWin64.dll 파일에 접근을 하려고 하는데 파일이 없어서 오류가 발생한다. 이 오류를 우회하기 위해서 같은 이름인 빈 파일을 만들어서 오류메시지가 나오지않고 삭제 진행이 계속 되도록 하는 방법이다.

시스템콜 호출 로그 -T 시스템콜 처리 시간 표시 strace -T -o output.log program_file 사용자모드 커널모드 수행 비율 확인 -P 논리 CPU 0번 데이터 수집 첫 번째 1 : 1초마다 수집 두 번째 1 : 1번만 수집 sar -P 0 1 1 특정 논리 CPU로 실행시키기 -c 0 : 논리 CPU 0번 & 백그라운드 실행 taskset -c 0 ./실행파일 & 공유라이브러리 링크 상태 확인 ldd 실행파일라이브러리 검색 lib로 시작하는 파일 검색 dpkg-query -W | grep ^lib정적 라이브러리 c 컴파일 cc -static -o outputfile 소스파일시스템에 존재하는 모든 프로세스 확인 ps aux코드 영역의 파일 오프셋, 크기 및 메모리 등 정보 보기 프로..

Termainal 에서 ssh로 접속해서 파일을 탐색하든, 로컬에 있는 파일을 탐색하든 vi 에디터류로 파일 내용을 수정할 수 있다. 그런데 더 편한 vscode에서 이 작업을 하고 싶다면 code -r [파일명]

리액트 컴포넌트는 상위 컴포넌트에서 넘겨준 props로 데이터를 받아 로직을 처리하는 형태가 대부분이다. 상위 컴포넌트의 매소드를 호출하려면 props로 넘겨받은 함수 변수를 실행해서 호출한다. 만약, 그 반대의 경우가 필요하다면? 즉, 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하고자 할 때는 어떻게 할까? React.forwardRef와 useImperativeHanlde을 이용하여 구현한다. 하위 컴포턴트 실행할 로직을 구현하고 ref를 노출한다. const Input = React.forwardRef((props, ref) => { const somethingToDo = () => { console.log('Do Something'); } useImperativeHandle(re..

리액트는 루트 요소에 엘리먼트가 하나가 있어야 한다. one two 이런 식에 요소 정의는 안된다. 그래서 one two 이렇게 빈 태그를 추가하여 루트요소에 하나도 오도록 조정한다. 그런데 빈 요소 추가는 불필요한 리소스 낭비이기 때문에 실제 랜더링할 때는 나오지 않도록 리엑트에서 래핑 컴포넌트를 제공한다. one two

Spring Boot 애플리케이션에서 로그 레벨을 동적으로 설정하는 방법에 대해 살펴본다. Spring Boot Actuator 소개 Spring Boot Actuator는 Spring Boot의 하위 프로젝트로서 애플리케이션의 관리와 모니터링에 필요한 다양한 기능을 제공한다. 이를 통해 애플리케이션의 상태, 메트릭스, 그리고 여기서 다룰 내용인 로깅과 같은 중요한 정보를 제공한다. 로그 레벨 확인하기 로그 레벨을 확인하려면 /actuator/loggers 엔드포인트로 GET 요청을 보내면 된다. curl -X GET http://localhost:8080/actuator/loggers 응답 형태 { "levels": ["TRACE", "DEBUG", "INFO", "WARN", "ERROR", "FAT..