노는게 제일 좋습니다.

상황 useEffect부분에서 제목의 에러가 발생 import React from 'react'; import { useEffect } from 'react/cjs/react.production.min'; const Component = ({ userObj }) => { useEffect( () => { }, []); return ( ) } export default Component; 문제 CRA환경에서 useEffect를 입력하면 자동완성되는 항목을 골랐다. 자연히 import도 똑바로 된 줄 알았는데, 이상한게 들어가 있었다. 원래 쓰던대로 잘 import해주면 된다. import React, { useEffect } from 'react';

2021. 4. 25 post요청을 넣을 때 data가 stringify되지 않은 쌩 json인 케이스를 추가하였다. 문제상황 Access to XMLHttpRequest at 'https://script.google.com/macros/s/AKfycbxpWbwsIH8_(중략)_xv3uK3v/dev' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:177 GET https://script.google.com/macros/s/AKfycbxpWbwsIH8_(중략)_xv3uK3v/deV..

상황 /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/chokidar.js:17 throw new Error( ^ Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3. You could try to manually install any chokidar version. chokidar@3: Error: Cannot find module 'chokidar' Require stack: - /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/chokidar.js - /home/wonjinyi..

export default App() { const [arr, setArr] = useState([1,2,3]); const deleteSam = (e) => { const temp = arr; temp.splice(2,1); setArr(temp); }; return ( { arr.map( (item, index) => {item} ) } 버튼버튼 ); } 함수 deleteSam에서 arr의 값을 새로운 변수에 담고, 배열을 가공하고, 가공된 결과를 arr state에 업데이트 시켜주고 있는 것같다. 그러나 리렌더링이 되지 않는다. 이유는 별다른것이 아니라, 실제로 set__ 구문으로 state가 바뀌지 않았으므로 렌더링되지 않는 것이다. 배열은 얕은 복사가 되므로, temp에 실제로 들어가있는 값은 ..

설치 npm install antd antd 하나만 깔면 자잘한 패키지들까지 모두 설치해준다. 컴포넌트에서 사용 import { React } from "react"; import { Button, Tooltip } from "antd"; import { FilterOutlined } from "@ant-design/icons" export default function Menu () { return ( ); } 다른 UI 컴포넌트와 비슷한 방식으로 사용할 수 있다. 아이콘버튼에 마우스를 올리면 툴팁이 나타나는 예제이다. import 'antd/dist/antd.css'; 하다보면 뭔가 똑바로 안나오는 경우가 있는데 (예시 : Spin), 그럴 때는 antd의 css파일을 하나 불러오면 된다. 여기까지 ..

state를 변화시킨 뒤에 실행되어야 하는 코드가 있을 때, 단순히 위-아래의 순서로 나열해서는 의도대로 동작하지 않을 수 있다. // Class component export default class App extends React.Component { state = { a : true, }; setState( { a : false } ); goHome(); render () { return ( ~-~-~-~- ); } } function goHome () { // 퇴근시켜주세요!! 퇴근시켜주세요!! } //function component export default function App() { const [a, setA] = useState(true); setA(false); goHome()..

react, axios, express, express-session, cors 를 사용하고 있다. 클라이언트에 세션이 제대로 박히지 않는 경우가 있었다 경우1 : 애초에 세션자체가 프론트로 넘어가지 못하는 경우 경우2 : 세션이 프론트로 넘어왔으나, 이후 재요청시 백엔으로 세션을 넘기지 못하는 경우 모든내용을 기억하지는 못하지만, 가장 중요한 것은 두 가지였다. 프론트에서 백으로 요청할때 헤더 항목을 뭔가 빼먹지 않았는가 백에서 세션을 생성할 때 프로퍼티를 뭔가 빼먹지 않았는가 await axios.post( "https://jindoback.wonj.in/sessiontest", {'a':'test'}, { withCredentials: true } ); axios로 프론트->백 요청을 한다면 wit..

https://nomadcoders.co/javascript-for-beginners-2 바닐라 JS로 그림판 만들기 - 노마드 코더 Nomad Coders Build a Painting App nomadcoders.co 데이터 라벨링툴과 같이 그리기 입력이 동반되는 프로그램에서 캔버스가 쓰일 것 같아, 미리미리 가볍게 들었다. 내용이 깊지 않고 MDN문서를 참조하여 기능을 그대로 사용하는 수준이어서, 하루 2시간씩 이틀동안 모두 볼 수 있었다. Canvas API, 2D context에 대해 다루고, 그 외 내용은 일절 없어서 좋았다. 다른 지식을 더 찾아보기 위한 개념은 충분히 주입해준다. 내용 요약 재래식 HTML, CSS, JS를 이용한 레이아웃, 스크립트 구성 reset CSS로 브라우저 기본 ..