혜르미온느

어느 날 들어온 요건 하나. 'nextTick 시점에서 실행해주세요.' vue를 익숙하게 써왔던 나는 vue 프로젝트에서 nextTick을 정말 요긴하게 잘 사용했었는데, 현재 react에서 진행하고 있는 프로젝트에 nextTick을 넣으려니 가만있어보자... 어떻게 표현하는 거였더라? 막히게 되었다. 그래서 정리해본 useEffect와 useLayoutEffect. 사실 실무에서는 useEffect를 압도적이게 많이 사용하긴 했는데, 둘이 어떻게 다른지 한 번 살펴보자- 먼저 nextTick이란 화면이 랜더링 될 때, js의 비동기성 특징으로 접근하고자 하는 DOM을 찾지 못하는 현상을 해결해주는 callBack 함수이다. updateMessage: function () { this.message = ..

[!이시중] 2021년 11월 14일 25:39에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/54 에서 확인할 수 있음. 지난번 git rebase conflict 실패기의 해결 방법을 알아왔다! 이번 포스팅은 아래와 같은 포스팅을 참고하면 더 재미있게 읽을 수 있고, 히스토리를 몰라도 이해하는데에는 불편함 없으리라 예상된다. https://hyermione.tistory.com/62 git rebase 중 conflict 해결 실패기 [!이시중] 2021년 11월 13일 22:26에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/53 에서 확인할 수 있음. 지난번 rebase에 관하여 포스팅 한 적이 있다. https://hyermione.t..

[!이시중] 2021년 11월 13일 22:26에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/53 에서 확인할 수 있음. 지난번 rebase에 관하여 포스팅 한 적이 있다. https://hyermione.tistory.com/10 git branch 형상관리: git rebase 란 [!이시중] 2021년 11월 13일 21:30에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/52 에서 확인할 수 있음. git rebase란 말 그대로 re base. 기초를 다시 한다는 의미로 git branch를 merge 하는.. hyermione.tistory.com 그러나 이는 철저하게 나의 계산 안에 있는 사례였다. 복잡해 질 것 같아 rebase..

[!이시중] 2021년 10월 26일 21:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/41 에서 확인할 수 있음. 지난번 프론트에서 에러를 로깅하는 방법 중 하나인 sentry 관련 포스팅을 진행하며, 프론트엔드에서 에러 처리하는 방법에 대하여 정리해 봐야겠다는 생각이 들었다. 막상 정리하고 보니 너무나 기본 문법들이었는데, 안일한 마음에 나도 많이 놓치고 있었던 부분들이었다. 다만, 프론트엔드 내부에서의 일시적인 에러 처리이며, 에러 관련 데이터 수집 등에는 다소 비효율적이라는 한계가 있다. https://hyermione.tistory.com/5 프론트엔드에서 에러 처리하기 - SENTRY [!이시중] 2021년 10월 23일 23:24에 최초 작성된 글로써 원..

[!이시중] 2021년 6월 22일 21:16에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/36 에서 확인할 수 있음. firebase로 timestamp를 찍으면 object안에 secondes라는 변수로 초가 찍혀서 온다. 인터넷을 다 찾고 계산했는데 정확한 값이 나오지 않았다. 그러다가 찾아낸 firebase document !!!! https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp Timestamp | JavaScript SDK | Firebase Reference for Timestamp firebase.google.com 도큐멘트 확인을 생활화화자~!

[!이시중] 2021년 6월 21일 21:06에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/35 에서 확인할 수 있음. 깃에 올리기 어렵거나 혹은 더러운(?) 파일들은 보통 .gitignore 파일에 정의해서 git에 올라가지 않게 하기 마련인데 간혹 이그노어 파일을 이그노어하고 올라갈 때가 있다. https://hyermione.tistory.com/7 webpack-server로 설치 후, 환경변수 설정하기 [!이시중] 2021년 6월 21일 20:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/34 에서 확인할 수 있음. 보통 vue cli를 이용하여 vue를 설치하면 package.json에 라는 설정이 있기 마련이다. 근.. hy..

[!이시중] 2021년 10월 19일 23:02에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/37 에서 확인할 수 있음. 근래 프리마커 (freemarker)라는 단어를 많이 들었다. 말하기 부끄럽지만.. 사실 처음 들은 단어. 다행스럽게도 같이 들은 많은 분들도 처음 들었다고 하였다. 앞으로도 자주 들을 것 같아 대략적인 개념은 알아봐야겠다고 생각했다. 프리마커의 정의 FreeMarker is a free Java-based template engine, originally focusing on dynamic web page generation with MVC software architecture. Wikipedia 위키피디아 정의 기준 프리마커는 자바를 기본으로 하고..

(이 포스팅까지 흘러 들어왔다면 자바스크립트에 대하여 아주 얕게라도 안다는 기준 하에-) 스크립트를 짜다보면 컴포넌트를 만들어 사용성을 높이는 코드를 굉장히 많이 고민하게 된다. 컴포넌트를 호출하게 되면 하위(자식) 컴포넌트들도 함께 호출하게 되는데, 문제는 여기에서 시작된다. 내가 컴포넌트 내에세 하나의 상태 값을 변경하였을 때, 함께 온 자식 컴포넌트들까지 모두 랜더링 되는 상황이 발생하기 때문이다. 이렇게 되면 불필요한 랜더링의 반복으로 의도하지 않은 메모리 과사용 등 여러 문제가 발생하게 된다. 이렇게 의도하지 않은 상황을 막고자 처리하는 방법이 바로 useMemo와 useCallback Hook의 사용이다. 이 둘은 비슷하면서 다르기 때문에 많이 비교된다. useMemo const memoize..

[!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다. hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -! https://yuniel.tistory.com/42 [뷰쟁이의 리액트 시작하기] 리액트 hook 이란? React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이 yuniel.tistory.com 아무튼 개인적으로 그..

[!이시중] 2021년 10월 28일 21:55에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/43 에서 확인할 수 있음. 뷰쟁이가 react를 처음 맞이하고 가장 적응이 안 되었던 부분은 바로 변수의 선언이다. 우선 react hook에서는 useState를 통하여 변수를 선언하고, 초기화시키고, 변형시킬 수 있다. 물론 흔히 아는 방식처럼 const test = ‘테스트입니다’; 라는 식으로도 선언과 초기화를 시킬 수 있지만, 이는 변형시킬 수 없다는 문제가 있다. 뒤의 글을 읽으면 자연스레 이해하게 되리라. 먼저 useState를 쓰는 형식이 있다. const [ 변수명, 변수정의함수 ] = useState(기본값); const [ count, setCount ] = ..