봉보로봉봉

Vite로 만든 프로젝트를 gh-pages로 배포할 때는 gh-pages 라이브러리를 설치하지 않아도 된다. vite.config.js 파일로 가서 base를 추가한다. // vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ base: '/레포이름/', plugins: [react()], }); BrowserRouter에 basename을 추가한다. const Router = () => { return ( ); }; HashRouter라면 basename은 필요없다! gh-pages..

Recoil는 React를 위한 상태 관리 라이브러리다. 따라서 Recoil를 사용하기 위해서는 React가 설치되어 있어야 한다. 리코일 설치 npm install recoil // or npm install recoil --save RecoilRoot recoil state를 사용하려면 어딘가의 부모 컴포넌트에서 RecoilRoot로 감싸주어야한다. import { RecoilRoot } from 'recoil'; function App() { return ( ); } Atom atom은 전역 상태라고 보면 된다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포..

부모 컴포넌트에서 자식 컴포넌트의 state를 조작해야하는 상황이 생겼는데 나의 경우에는 ref를 여러개의 자식 컴포넌트에 달아서 조작하려고 했다. 그런데 ref는 current로만 접근할 수 있어서 마지막 하나의 자식 컴포넌트의 함수만 실행할 수 있었다. 한번에 여러개를 조작하려고 하시는 분은 참고하시길..! 부모 컴포넌트에서 자식 컴포넌트 state 조작하기 useRef를 사용해서 부모 컴포넌트에서 자식 컴포넌트를 조작할 수 있다. 먼저 부모 컴포넌트에서 ref를 선언해서 자식 컴포넌트로 넘겨준다. import { useRef } from 'react'; import Child from './Child'; import styled from 'styled-components'; const Parents..

git config 리스트 확인하기 git config --list git config 목록 세팅하기 // git config --global 설정하려는키 설정하려는값 git config --global core.ignorecase false git config 목록 지우기 // git config --global --unset 지우려는항목 git config --global --unset core.excludesfile git config 목록 전체 수정하기 git config --global --edit

모든 html에서 사용할 수 있는 전역속성이며, 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성이다. 브라우저는 hidden 속성을 설정한 요소를 렌더링하지 않는다. 임의의 요소에 hidden을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨진다. 숨겨진 요소의 자손 요소는 여전히 활성 상태이므로, 요소를 실행할 수 있고 양식 요소도 제출할 수 있다. 그러나 스크립트와 요소는 다른 맥락에서 숨겨진 요소를 참조할 수 있다. 예를 들어, hidden 특성을 적용한 구획으로 링크하는 href 특성은 유효하지 않다. 콘텐츠가 사용할 수 없거나 더는 관련이 없으면 연결할 이유도 없기 때문이다. input checkbox에 hidden속성을 주고 labe..

팀프로젝트를 진행하면서 cra가 아니고 vite를 이용해서 개발환경을 구축했는데 cra보다 vite가 실행속도가 더 빨라서 앞으로 Vite를 사용해보려고 한다. 참고 : vite를 사용해야 하는 이유 프로젝트 생성하기 // npm npm create vite@latest // yarn yarn create vite 프로젝트 이름과 템플릿을 지정해서 프로젝트를 생성할 수 있다. // npm 6.x npm create vite@latest my-react-app --template react-ts npm create vite@latest my-react-app --template react // npm 7+, '--'를 반드시 붙여주세요 npm create vite@latest my-react-app -- ..

mysql 외부키 걸기 테이블을 생성할 때 다른 테이블에서 참조하는 외부키를 설정해줄 수 있다. 보통 부모 테이블을 참조하는 자식 테이블을 만들 때 사용한다. 외부키를 걸어줄 컬럼과 참조할 테이블과 컬럼을 순서대로 적어준다. 외부키가 여러 개라면 똑같이 하나 더 적어주면 된다. CREATE TABLE posts ( id INT NOT NULL AUTO_INCREMENT, title VARCHAR(100) NOT NULL, content VARCHAR(2000) NULL, user_id INT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT NOW(), PRIMARY KEY (id), FOREIGN KEY (user_id) REFERENCES users (id) # 여..

switch 문을 사용하는 이유 조건문 중 하나에 속한다. if문 보다 간결성과 가독성이 좋다. 다양한 조건에 따라 서로 다른 구문을 수행해야 할 때 사용한다. 예 : 과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때 switch문은 조건이 많아져도 인터럭션(*CPU가 명령을 수행하기 위해서 메모리 상에서 명령어를 읽어오는 과정)이 늘어나지 않으므로 조건이 많은 경우에는 switch문을 사용하는 것이 if문을 사용하는 것보다 더 좋다고 할 수 있다. switch syntax switch문은 ===를 사용해서 엄격하게 비교한다. (===, using the strict comparison) switch (expression) { case value1..