보뇨 다이어리

컴포넌트가 재렌더링 되는 조건은 props 가 들어올때, state 값이 바뀔때, 또 뭔가 있었는데...무튼 이런경우에 재렌더링이 발생함. 근데 별상관없는 값이 변경되었는데도 계속 재렌더링이 발생하니깐 뭔가 꼴보기싫음; 찾아보니 애초에 setState 메소드를 실행시키면 이후에 재렌더링이 발생한다고하는데...역시나 막는 방법은 존재한다 그게 바로 useMemo를 사용하는건데 jsx값은 같기떄문에 값을 저장하여 보여주는(vue 에서 computed랑 비슷한 느낌..)것이당! ... const mainContext = useMemo(() => { return ( { check ? ( {results.map((result, index) => ( {result.name} {result.url} ))} ) : (..

한창 typescript 와 react 로 맛을 보던중... 페이지 로딩할때 input 태그에 바로 focus 를 어떻게 해야하는지 찾아보았다 사실 간단한데 typescript 로 짤려니까 에러가 보기싫더라구...ㅠ const Search = () => { const [input, setInput] = useState(""); const history = useHistory(); const inputRef = useRef(); const search = (e: React.MouseEvent) => { e.preventDefault(); history.push("/search"); }; useEffect(() => { // error inputRef.current.focus(); }, []); return..

올해 들어서 포스팅을 많이 못했는데 그래도 예전처럼 한달에 한번씩이라도 올려야겠다..ㅠ 요즘 FE 분야에 많이 손대고 있는데 그러면서 매번 react router 이해가 덜된상태에서 작업하다보니 맨날 문서보고 아 그랬었지~ 이러는게 너무 짜증나는바람에 정리를 하기로했다(조금씩 추가할꺼라...헤헤) useRouteMatch 를 아래 사진과 같이 사용하는데 url 하고 path 의 차이가 궁금했다 물론 영어문서로 설명이 되어있는데 예시로 딱보면 바로 이해될꺼같아서 콘솔로 찍어봄..그러면 그 아래사진과 같이 나오게 된다!

뭐가 문제냐면 아래 사진들을 천천히 보자컴파일되니깐 failed 뜸 보니 ~~api/ModalInWeeklyHours 파일안에 ModalInWeeklyHours 가 없다고 뜸분명 철차하나 틀린거없었기떄문에 사용하는곳으로 날아가봄 바로 문제점이 4번줄이였다..... export default 를 하게되면 이름이 초기화되기때문에 아무렇게나 지정도 가능 대신에 대괄호안에 못들어감 즉 다음 사진처럼 바꿔야만 실행이 잘됨 Done!

문제는 아래 사진과 같다 생각해보면 전혀 문제가 될부분이 아닌데 문제를 일으키니 답답할노릇이였는데.... 아주 간단함! 아래와 같이 추가해주고1npm install --save-dev babel-plugin-transform-class-propertiescs .babelrc 파일에 아래와 같이 붙혀주면 끄으읏!1234567891011// without options{ "plugins": ["transform-class-properties"]} // with options{ "plugins": [ ["transform-class-properties", { "spec": true }] ]}Colored by Color Scriptercs 참고 https://babeljs.io/docs/en/babel-plu..

집에서 공부하던중에 아래와 같은 원인을 알수없는 버그가 발생함 (아따 사진 디따 크네) 일단 SiderDemo 쪽이 잘못된것이니 한번 확인해보기로함 뭐가 이상한지 모르겠음.....그래서 stackoverflow 를 찾아보니 내가 실수한게 있었다. 바로 2번줄 임포트하는것을 React, { Component } from 'react' 로 해야하는데 중괄호안에 넣어버린것이 문제가 됨! 대괄호에 넣은것과 안넣은것의 차이는 잘모르겠으니....ㅠㅠ 따로 찾아봐야겠다 // 오래전글이라 기록을 따로 해두진않았는데 코멘트에도 적었던것과 같이 다시 설명드릴께요 중괄호가 없는것은 임포트하고자 하는 하나의 파일을 하나의 변수?명으로써 대입해서 쓰는것입니다 즉 중괄호가 없는상태에서는 그 변수로 메소드에 접근할수있는것이고 중괄..

아....이거 해결하는데 어제부터해서....하루걸렸다 흑흑흑흐규ㅠ현재 작업환경상태는 spring API 와 react 이다 react 에서 api 를 호출해야하는데 자꾸 아래와 같은 에러를 뱉음...(사실 종류가 어려가지인데 맨날써져있는게 Access ~ 머시기) 이게 정확히 해결방법인지는 모르겠지만 stackoverflow 성님들은 이렇게 해답을 주었따윈도우일경우 실행쪽에서 실행!chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security맥일경우 커맨드에서 실행open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/Chrome dev session" --dis..

웹의 신비로운 맛에 반해버려서 웹공부를 현재 진행중...무엇보다도 빨리 프로젝트를 완성시켜야하는 이유도 있음아무래도 디자인쪽은 bootstrap 을 사용하는게 좋을꺼같아서 아래와 같이 임포트함 실행시키니 아래와 같은 에러를 뱉음....ㅂㄷㅂㄷ 아래 하단에 있는 yarn add react-bootstrap --sava 를 하니 정상적으로 작동은 된다warning 이 많아서 뭔 문제가 있는건가 싶지만 이것들은 차후에 알아봐야할꺼같다 (현재는 무슨말인지도 모르겠으니말이다)