전체 카테고리

JSX 상에서 라우팅 함수를 잘못 쓰는 바람에 발생한 오류로, onClick={navigate(path)}을 onClick={()=>navigate(path)}으로 바꾸면서 해결되었다. 참고) 오류가 난 코드(예시) import {useNavigate} from "react-router-dom"; const ComponentEx () { const navigate = useNavigate(); return ( Go Main ); } 참고) 오류가 해결된 코드(예시) import {useNavigate} from "react-router-dom"; const ComponentEx () { const navigate = useNavigate(); return ( navigate("/")}>Go Main ); }

replace가 true인 경우, template 또는 templateUrl은 최상위 element를 반드시 가져야 한다. 즉, replace값이 true인데 directive의 옵션으로 template:"Hello AngularJS"과 같이 element가 없는 경우에는 위의 오류가 발생하는 것이다. 따라서 최소 하나의 element를 주거나 하나 이상의 element가 포함된 templateUrl을 부여하면 된다. angular .module("exApp", []) .controller("exCtrl", ["$rootScope", "$scope", ..., function ($rootScope, $scope, ...) { ... } ]) .directive('directiveEx', function(..

이후에 원인을 알아서 다시 작성하겠다. 오류가 나는 경우는 아래처럼 컴포넌트 내에 이벤트를 선언하면서 useNavigate를 바로 호출한 경우이다. import {useNavigate} from "react-router-dom"; const Comp = () => { const handleEvt = () => { useNavigate("/"); } } 오류가 해결된 방법은 useNavigate를 바로 호출하는 것이 아니라 한번 변수에 담아서 사용한 방법이다. import {useNavigate} from "react-router-dom"; const Comp = () => { const navigate = useNavigate(); const handleEvt = () => { navigate("/");..

MacOS에 적응하는 중인 요즘, 당연히 자동완성 기능이 안되길래 당연히 키가 다른 줄 알았지만 키는 같았다. Intellij에서의 자동 완성 키는 ‘ctrl + space’인데, 이것이 동작하지 않는다면 맥북 키보드의 한/영 변환 단축키와 같기 때문에 동작되지 않는 것은 아닌지 확인해보는 것이 좋다. ‘설정>키보드>단축키>입력 소스>이전 입력 소스 선택 해제’가 되어있는지 확인해보자.

리액트는 자체적으로 라우팅 기능을 제공하지 않기 때문에, 추가적인 모듈을 사용해야 하는데, 여기에는 대표적으로 react-router-dom이 있다. react-router-dom 모듈을 사용하는 방법은 간단하다. 먼저, 1) 전체 DOM을 렌더링하는 최상위 html을 'react-router-dom'에서 제공하는 BrowserRouter로 감싸준다. 예를 들어, 최상위 컴포넌트가 '#root'인 경우에는 아래와 같이 작성할 수 있다. (아래는 최상위 컴포넌트 js 파일이다.) import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ..

npm install이 안되었을 때 package.json을 읽지 못해 발생하는 문제다..! npm install을 해줌으로써 해결되었다.

useState() : state 사용 시 state의 값을 변경할 때 사용 가능 useEffect() : state 사용 시 state의 값이 변경됐음을 감지 가능 (예시) Buttons는 여러개의 버튼을 한번에 나타내는 상위 컴포넌트이다. 단일 버튼을 렌더링하는 컴포넌트 Button은 상위 컴포넌트 Buttons로부터 props인 array, count 등과 함께 이를 수정할 수 있는 setter를 함께 전달받아 그 값을 계속해서 변경될 수 있게 한다. Button 컴포넌트가 렌더링하는 button들을 클릭할 경우 발생하는 clickEvent 함수에서는 props들의 값을 변경시키는데, array의 경우에는 계속해서 새로운 배열을 만드는 것이 목표가 아니라 하나의 배열에 값을 쌓는 것이 목표였기 때문..

React가 데이터 변경에 따라 렌더링을 변화시키는 과정은 다음과 같다. 1. Props를 전달받음 2. shouldComponentUpdate 함수 호출 3. 가상 DOM과 실제 DOM을 비교해 변경된 부분만 다시 렌더링 State의 특징은 '불변성'이다. 가상 DOM과 실제 DOM을 비교하여 변경된 부분만 리렌더링한다고 할 때, 해당 컴포넌트가 달라졌음을 판단하는 것은 값을 가지고 판단을 한다. 만약, {key: 1, name: 이름1}의 형태인 데이터를 {key: 1, name: 이름2}로 변경했다고 해보자. 데이터는 결국 같은 객체이나, 그 내부의 속성이 변한 것으로 이 둘을 같은 객체, 같은 상태로 여겨 리렌더링해주지 않을 수 있다. 불변성이란, 값을 변경시키지 않고 새로 만드는 것이다. 때문에..

사용자가 생성하지 않아도 DB의 메타 데이터를 가지고 있는 스키마가 있다. 개발을 하다보면 흔하게 마주칠 수 있는 녀석으로, INFORMATION_SCHEMA 스키마이다. 아래에 주로 필요한 경우를 나열하였다. 1. 테이블 정보(테이블명, 테이블이 속한 스키마 등) 조회 SELECT * FROM INFORMATION_SCHEMA.TABLES; 2. 컬럼 정보(컬럼명, 데이터타입과 데이터 크기, 기본값, NOT NULL 여부 등) 조회 SELECT * FROM INFORMATION_SCHEMA.COLUMNS; 3. 테이블 제약조건 조회 SELECT * FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS; 4. 테이블 인덱스 조회 cf. `TABLE_CONSTRAINTS`와 조인하여 ..

클라이언트에게서 데이터를 전달받아 서버에서 처리하기 위해서는 주로 json 형태의 데이터를 전달받고는 한다. 이 때 Jackson 패키지의 ObjectMapper를 사용해 받아온 문자열 형태의 json 데이터 또는 @RequestBody로 받아온 Map 타입의 데이터를 자용자 정의 타입으로 변환할 수 있다. 먼저, ObjectMapper를 사용할 때에는 ObjectMapper 객체를 생성하여 사용할 수 있다. ObjectMapper objectMapper = new ObjectMapper(); 1. json 문자열에서 특정 타입(Class)로 변환하는 경우 - readValue(String jsonStr, classType) T parsingData = objectMapper.readValue(jsonS..