킹바구니

먼소리야 도대체...는 별거아니고 그냥 형변환 해달라는 의미임. 1. 숫자형으로 바꿔주기 const n = +inputRef.current.value - 5; 아주 빠른건 이렇게 앞에 +를 붙여주면 숫자로 변환된다.

Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null. Link를 썼더니 이런 오류가 뜰 때는 바깥에 라우터로 감싸주자. 1. BrowserRouter 추가 import { BrowserRouter, Link } from "react-router-dom"; // ... return( )

css 내지 scss 등 아무튼 스타일 파일을 모듈로 이렇게 쓰려고 했더니 위와 같은 에러가 났음. import style from "@/styles/style.css"; 1. global.d.ts 파일 생성 declare module "*.css"; 폴더 위치는 src 바로 아래에 만들어주었고 위와 같이 쓰면 된다. scss도 할꺼면 복붙해서 scss로 하나 붙여주면 됨.

리엑트에서 제공하는 JSX문법은 자바스크립트에서도 html같은 코드를 쓸 수 있게 해주는 기능을 가지고 있음. 대신 조건이 있는데 바로 하나의 태그로 감싸야한다는 것이고, 이를 위해 보통 로 감싸곤 함. 근데 컴포넌트가 많아지고 거대질수록 자칫하면 의미도 없는 가 남발할 수 있음. 이걸 soup라고 함. 이를 해결하기 위해서는 이러한 방법이 있음. 1. wrapper 컴포넌트 만들기 const Wrapper = (props) => { return props.children; }; export default Wrapper; 그냥 Wrapper.js라는 파일을 만들어주고 위와 같이 씀. jsx가 아니기때문에 그냥 js파일임. 단순하게 props의 칠드런을 리턴하는데, 리엑트에서 말하는 props의 아이들이란..

이러한 기본적인 코드가 있음. const [age, setAge] = useState(0); const [username, setUsername] = useState(''); const ageHandler = (event) => { setAge(event.target.value); }; const usernameHandler = (event) => { setUsername(event.target.value); }; // jsx click 버튼 누르면 해당값 따로 저장해두고 다시 input 리셋하려고 함. const submitHandler = (event) => { event.preventDefault(); const data = { age: age, username: username }; setAge(..

다들 알 것이다. 리엑트에서는 함수를 괄호 안쓰고 이름만 쓴다는 거슬.. // jsx 근데 만약에 아래와 같이 파라미터를 넘겨아한다면 어떻게 해야할까? const [age, setAge] = useState(0); const [username, setUsername] = useState(''); const ageHandler = (event) => { setAge(event.target.value); }; const usernameHandler = (event) => { setUsername(event.target.value); }; 이렇게 기본적인 useState와 handler함수가 있다고 침. 그리고 각각의 input태그에 onChange={ageHandler} 이렇게 걸것임. 근데 이거를 한꺼번에..

뷰든 리엑트든 항상 나오는 props 한방에 정리한닷 Passing Props to a Component 1. 부모에서 자식에게 데이터 넘기기 일단 데이터 보낼때 따로 쪼개써도 되고(data/location), 안에 string이든 객체든 넣을 수 있음. 받은 친구는 props라는 단어를 통해 받아 쓸 수 있고, 혹은 { }안에 키값만 써서 props를 떼고 더 간편하게 쓸 수 있음. 2. 자식에서 부모에게 데이터 넘기기 솔직히 상위로 올려보낼때 포인터랑 함수이름 쓰는 부분 헷갈리는거 나만그럼? 3. 부모에서 자식 함수 쓰기 forwardRef를 쓰면 되는데 약간 쓸게 많아서 잘 봐야한다.

1. useState로 여러 상태를 관리하는 법 고객 정보를 받는 input이 2개가 있다고 한다면 보통 이렇게 각각 state두고 관리할 것임. const [age, setAge] = useState(0); const [username, setUsername] = useState(''); 그런데 이런 각각의 코드를 const [userData, setUserData] = useState({ age: 0, username: '' }); 이렇게 한꺼번에 받을 수 있음. 어차피 같은 역할을 하는 친구들이면 저렇게 받는게 훨씬 깔끔하고 편할 수 있음. 2. set함수에 콜백함수 쓰는 이유 만약 input창에 onchange 이벤트를 걸어서 쓸때마다 set함수로 해당 변수를 바꿔준다면 이렇게 쓰면 된다. // ..

npm install에서 divina-player-js을 설치하는 과정에서 무한로딩이 걸렸고, 이 오류가 은근 발생했던건지 친절하게 방법도 알려줬는데 정확하게 어떻게 하는건지 몰랐어서 기록해둠. 1. git bash 열기 일단 프리징된 상태에서 그냥 새롭게 git bash를 열어서 아래와 같이 복붙을 해줌. node scripts/package-lock-patch.js && cat package-lock.json | grep -i divina-player-js 난 이걸 어디다 써야하는건지 몰라서 조금 해맸음 파워쉘을 또 여는건지 커맨트 프롬프트인지 뭔지;; 2. 다시 npm install 그러면 쫙 진행되더니 divina-player-js에서 호로록 정상적으로 넘어감. 이제 다 된줄 알고 npm run ..

보통 커서는 이렇게 좌측 상단이 포인트 부분인데 이번에 구현하다보니 받은 디자인이 좌측 하단으로 되서 온 것임. 찾다가 안나와서 이거 안돼요 했는데 방법 찾음; 1. cursor에 좌표 입력 document.body.style.cursor = "url('custom.png') 5 40, auto"; url 뒤에 바로 좌표를 써주면 된다. 안된다했는데.. 촤하하 미안합니다!