전체 카테고리

1. 스크립트 파일 생성 vi scriptname.sh 우선은 터미널을 켜 스크립트 파일을 생성할 위치로 이동한다. $ cd [경로] cf. 현재 디렉토리는 pwd 커맨드를 통해 알 수 있다. 기본적으로는 Users/[사용자명]으로 나올 것이다. $ pwd 스크립트 파일 생성을 원하는 위치로 이동하였다면 touch 커맨드를 통해 확장자가 sh인 파일을 생성한다. $ touch scriptname.sh 해당 스크립트 파일을 텍스트 에디터 vi로 편집한다. $ vi scriptname.sh cf. i를 통해 입력 상태로 전환할 수 있고, 편집이 끝난 후에는 esc버튼 클릭 후 :wq를 입력해 저장 및 에디터 종료를 동시해 진행할 수 있다. 2. 출력내용을 파일로 저장하기 리눅스에서는 명령어를 통해 결과를 출..

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`와 조인하여 ..