IT & Tech

react-dom.development.js:86 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

react-dom.development.js:86 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

서버에 올리면 onLoad, onError event 둘다 안탈때가 있음 왜그런지는?

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

https://stackoverflow.com/questions/11197671/use-css-to-automatically-add-required-field-asterisk-to-form-inputs

{route.path === "/board/viewimage" && (
              <>
                <meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=1" />
              </>
            )}

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at editorwatchdog.js:179:1
    at async u._initializeEditor (index.js:5:4518)
    at async u.componentDidMount (index.js:5:3736) {phase: 'initialization', willEditorRestart: false}

context 생성: import { createContext } from "react"

import { createContext } from "react";

// 기본값으로는 null을 넣어준다.
export const ThemeContext = createContext(null);

context 연결 <ThemeContext.Provider value={{ isDark, setIsDark }}>

import { useState } from "react";
import "./App.css";
import Page from "./Compopnents/Page";
import { ThemeContext } from "./context/ThemeContext";

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    // 📌
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <Page />
    </ThemeContext.Provider>
  );
}
export default App;

context 사용 & 변경

• import { useContext } from "react"
• const { isDark, setIsDark } = useContext(ThemeContext);이때 setIsDark 콜하면 전체화면 refresh됨

import { useContext } from "react";
 // 📌 
import { ThemeContext } from "../context/ThemeContext";

const Header = () => {
  // 📌 
  const { isDark, setIsDark } = useContext(ThemeContext);////////////////////////
  return (
    <header
      className="header"
      style={{
        backgroundColor: isDark ? "black" : "lightgray",
        color: isDark ? "white" : "black",
      }}
    >
      <h1>Welcome 홍길동!</h1>
    </header>
  );
};

export default Header;

context를 가장 상위에서 불러와서 쓰기 때문에 전체 화면 refresh되는 것인지?

context를 state전용, dispatch전용으로 나누어써야 불필요한 렌더링 막을수 있다고 하는 예제https://velog.io/@shin6403/React-ContextAPI-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%8D%A8%EB%B3%B4%EC%9E%90

useReducer, useCallback, memo등을 같이 사용하고 있음

처음 적용하고 됐는데 새 컴퓨터에 설치하니 경로이동이 안되었음 - jsconfig.json 파일을 그냥 고치고나서 해보니 다시 됨

이 경우는 @hooks/* 로 커버안됨,

에러발생해서 아래 블로그 발견

https://m.blog.naver.com/theonlyoneu/221981154881

https://github.com/mobxjs/mobx-devtools 로 가서 npm install mobx-devtools설치하고 크롬 플러그인 설치 후 npm run start webapp:local 했으나 아래 아래 발생

ERROR in ./src/store/ParamStore.js 2:0-48
Module not found: Error: Can't resolve 'mobx-devtools-mst' in 'C:\dev\csportalfront\src\store'
resolve 'mobx-devtools-mst' in 'C:\dev\csportalfront\src\store'
  Parsed request is a module
  using description file: C:\dev\csportalfront\package.json (relative path: ./src/store)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

JSON.stringify(user[n]) 해줘야 이렇게 확인가능

user[n]만 하면 object[object]로 "US"는 그냥 US로 나옴

mariaDB driver세팅이 안됬다는 에러가 나는데 mariaDB jdbc connector를 직접 다운로드 받아서 연결시켜줘야함

아래에서 connector jar (mariadb-java-client-3.3.3.jar) 다운로드 가능

https://mariadb.com/downloads/connectors/connectors-data-access/java8-connector

다운로드 받아서 아래와 같이 연결시켜줘야함

https://jnote.tistory.com/41

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.10.1:compile (default-compile) on project cs_portal_api: Compilation failure: Compilation failure:
[ERROR] /sorc001/jenkins/workspace/DevCsPortalApi/cs_portal_api/src/main/java/com/lge/cs/online/login/controller/LoginController.java:[49,18] package nl.captcha does not exist
[ERROR] /sorc001/jenkins/workspace/DevCsPortalApi/cs_portal_api/src/main/java/com/lge/cs/online/login/service/LoginServiceImpl.java:[55,18] package nl.captcha does not exist
[ERROR] /sorc001/jenkins/workspace/DevCsPortalApi/cs_portal_api/src/main/java/com/lge/cs/common/captcha/CaptchaUtil.java:[7,18] package nl.captcha does not exist
[ERROR] /sorc001/jenkins/workspace/DevCsPortalApi/cs_portal_api/src/main/java/com/lge/cs/common/captcha/CaptchaUtil.java:[8,30] package nl.captcha.backgrounds does not exist
[ERROR] /sorc001/jenkins/workspace/DevCsPortalApi/cs_portal_api/src/main/java/com/lge/cs/common/captcha/CaptchaUtil.java:[9,26] package nl.captcha.servlet does not exist
[ERROR] /sorc001/jenkins/workspace/DevCsPortalApi/cs_portal_api/src/main/java/com/lge/cs/common/captcha/CaptchaUtil.java:[10,32] package nl.captcha.text.producer does not exist

pom.xml -> pom_live.xml로 고치니 수정됨

pom_live.xml에는 아래와 같은 부분이 들어있었음

		<dependency>
			<groupId>com</groupId>
			<artifactId>simple-captcha</artifactId>
			<version>1.2.1</version>
			<scope>system</scope>
			<systemPath>${basedir}/src/main/webapp/WEB-INF/lib/com/simple-captcha/1.2.1/simplecaptcha-1.2.1.jar</systemPath>
		</dependency>

• remote branch: 말 그대로 진짜 remote에 있는 거
  • git remote show origin했을 때 나오는 remote branch목록은 진짜 remote인듯, 실시간으로 보여주므로
• remote tracking branch: remote를 local에 복사해놓은 복사본, 일종의 캐슁이라고 생각할수도 있음
  • git branch -a했을 때 remotes/origin/master로 나오는것들인듯, git fetch나 git remote update하기 전에는 remote에 새로생긴 branch를 보여주지 않는것으로 보아
• tracking branch: remote tracking을 따라가면서 관리하는 local branch
• tracking안하는 branch:그냥 local에 만들기만 하고 연결 안시켜놓은애

Merge branch 'dev2nd' of http://10.97.24.150:8099/csPortalGroup/csportalfront into dev2nd 
git pull 안받고 commit한 상태에서 pull하면 merge가 되는데 그때 위 커밋메세지로 된  merge commit이 자동생성됨

! [rejected]        master     -> origin/master  (non-fast-forward)
remote branch와 remote tracking branch는 항상 fast-forward관계를 유지해야 하는데 그게 깨진 상태에서 git fetch하면 위와 같은 에러 메세지가 나옴

git remote update = git fetch --all 과 동일한 효과라고 함

git fetch는 git pull/push와는 달리 tracking하는 전체 branch의 remote와 sync를 맞춤, 근데 여기서 tracking한다는 개념이 아직 헷갈림

git pull/push는 특정 branch하나랑만 이루어지는 작업이며 어떤 branch와 작업이 이루어지는지 생략이 된 상태, 어떻게 생략이 되었는지 알기 위해서는 git remote show origin 해봐서 pull/push작업에 대해 각각 어떻게 연결(configured for라고 표현됨)되었는지 알수 있음

참고) remote tracking branch로도 checkout 가능한지 확인해보려고 git checkout origin/master했더니 detached HEAD상태가 됨

https://devcamus.tistory.com/9

• git fetch --all
• git reset --hard origin/master
• git pull

https://chanos.tistory.com/entry/GIT-git-pull-%EC%8B%9C-merge-%EC%98%A4%EB%A5%98-%EB%B0%9C%EC%83%9D%ED%96%88%EC%9D%84-%EB%95%8C-%EA%B0%95%EC%A0%9C%EB%A1%9C-%EB%8D%AE%EC%96%B4%EC%93%B0%EB%8A%94-%EB%B0%A9%EB%B2%95-git-fetch-reset-pull