보뇨 다이어리

지금까지 무식하게 아래와 같이 컴포넌트를 업데이트했었다. 이건 돔을 직접적으로 조작하는것이다보니 모두 지양해야한다고하지만 좀더 다른방법이 없을까 찾아볼생각도 안했었다..ㅠ this.$forceUpdate(); 방법은 간단한데 업데이트되어야하는 컴포넌트의 :key 키값을 설정해주고 예를들어 updateHistoriesComponent 값을 업데이트시켜주는것이다. 즉 어떤 버튼이나 액션을 취했을때 this.updateHistoriesComponent++; 라던지 넣어주면된다! 출처 https://stackoverflow.com/questions/46211297/how-can-i-reload-a-vue-component

컴포넌트가 재렌더링 되는 조건은 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..

Vue 에서 전역으로 auth 체크하는 로직이 존재하는데 체크하는건 아래 메소드에서 진행하고 있다. 물론 다들 아시다시피 설명이 잘 되어있어서..ㅎㅎ; router.beforeEach(async function(to, from, next) { ...근데 페이지를 이동할때 next() 함수를 호출하는데 호출하면서 데이터를 어떻게 같이 보낼수있지? 찾아보다가 거의 한시간가량 삽질해본결과 전달할수있었다...ㅠ 예를들어서 회원정보 페이지를 보여줄때 대부분(나를 포함)은 created() 함수에서 axios등을 이용해서 데이터를 초기화할텐데 지금같은상황 그러니까 router.beforeEach 함수내에서 데이터를 초기화해야할때에는 next() 함수내에 객체를 보내야했다..가령 이런식으로 말이다 // 로직 처리후...

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

아....preFlight request 에러가 뜨는데 도무지 어디에서 해결해야할지 모르겠다 ㅠㅠ 애초에 필터와 인터셉터에서 설정해줘서 web.xml 에 추가를 해줬지만 여기가 문제가 아닌 원초적인 문제인거같았다. 애초에 이미 잘돌아가고있는거 한번에 다 뜯어고치기는 무리니까 그냥 이런식으로 하였다 1. axios 에서 baseURL 설정 2. 커맨드창에서 --disable-web-security 로 크롬 실행하기 open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security 사실 지나고나서 보면 별게아닌게 webp..

설정파일에 대해 매번 일일히 찾는것도 싫고 모르는채 사용하는것도 싫기때문에 앗싸리 시간을 잡고 공부해본다! 우선 jsconfig.json 파일인데 이건 뭐에 쓰는건지 도통 몰라서 문서를 통해서 무엇인지 파악해본다 jsconfig.json 이란? 내가 이해하기론...ide 에서 도움을 받도록 설정을 하는 그런 기본적인 설정파일이라고 이해했다...플러그인같은게 아니라 그래서 왜 우리가 이 파일을 작성해야하는지 설명이 짧게 나와있는데 해당 파일이 없는 프로젝트에서는 ~.js 과 해당 파일의 .d.ts 파일을 명시적으로 참조하지 못하기때문에 두 파일 사이에 공통점을 찾을수없다? 뭐 이런거고 있을경우에는 반대인것이구 속성 특별히 소개된 속성들에 대해서 기록한다 exclude 특정 폴더나 파일의 소스는 내가 사용할..

npm 으로 새 프로젝트 만들다가 갑자기 이런 오류남 아무리 프로그램 추가/제거에서 삭제해도 같은 오류를 뱉어내니 어디 글로벌변수라도 있는건가 싶어서 찾아봤더니 진짜 있더라... 바로 이렇게 진행하면 된다! Go to \global_modules\node_modules, (C:\Users\youruser\AppData\Roaming\npm ) (C:\Users\youruser\AppData\Roaming\npm-cache)** Delete the "npm" folder and all its contents, Go to https://nodejs.org, Download the "Recommended For Most Users" version), Install it 출처 https://stackoverfl..