dev30 useEffect로 Race Condtions 해결하는 방법 React 개발을 하는데 있어 useEffect 는 필수이다.정말 많이 쓴다.그런데 공식 문서를 읽다보니 몰랐던 것을 알게되어 정리 해보겠다. 먼저 useEffect 에 대한 정의부터 예상과 달랐다.나는 컴포넌트가 마운트/언마운트 되었을 때 실행할 로직을 정의하는 Hook 이다 라고 생각하고 있었는데공식 문서의 정의에는"외부 시스템을 사용하는 컴포넌트를 동기화하는 Hook 이다." 라고 설명하고 있다. 외부 시스템은 무엇이고, 동기화는 무엇일까? External Systemexternal system 이란 React 로 control 하지 않는 코드를 의미한다.이에 대한 예시로 setInterval(), clearInterval(), window.addEventListener(), window.remov.. 2023. 11. 22. useCallback 심도있게 살펴보기 useCallback 은 함수를 cache 로 저장 해서 re-render 할 때 사용할 수 있도록 하는 React Hook 이다.아 슈밤 글 다썼는데 코드로 테스트하다가 다 날라갔다... ㅠㅠloop 3중첩으로 1000*1000*1000 으로 돌리니까 브라우저 바로 뻑나네............. ProductPage가 리렌더링 되면 handleSubmit 함수는 새롭게 생성될까?아니면 동일한 로직의 함수이니 알아서 이전 렌더링 때 만든 handleSubmit 함수를 그대로 사용할까? 정답은 함수를 새롭게 생성한다. 자바스크립트에서 function () {} 혹은 () => {} 인 경우에는 함수를 새로 생성하기 때문이다. 이런식으로 함수를 useCallback 으로 감싸고 dependency array.. 2023. 11. 9. useDeferredValue 는 언제, 어떻게 쓰는걸까? useDeferredValue 는 UI의 일부분의 update (리렌더링)을 연기할 수 있는 Hook 이다.const deferredValue = useDeferredValue(value) useDeferredValue를 해석해보자면 연기된 값을 사용한다는 뜻이다.value가 변하면서 컴포넌트가 리렌더링 될 때바뀐 최신 value 를 쓰는 게 아니라처음의 value를 갱신하는 것을 연기하여 계속 쓴다는 의미이다. 그렇다면 언제 리렌더링을 연기하여 deferredValue를 쓰면 좋을까? 첫 번째 예시 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 React 공식 문서의 예시를 가져왔다.input에 검색할 앨범명을 입력하여 api 요청하고그 결과를 유저에게 보여준다. 예를 들.. 2023. 11. 5. 강원랜드 카지노 필승법 카드 카운팅 웹앱 개발 후기 이번 여름은 워터파크에 꼭 가보고 싶었다. 워터파크의 슬라이드는 롤러코스터와 다르게 뚝 떨어지는 게 적어서 덜 무섭고 재밌다. 하지만 캐리비안베이나 오션월드는 너무 사람이 많아서 가기가 무서웠다. 어쩌다 인스타그램에 영상으로 하이원 리조트의 워터파크가 사람이 적고 물이 깨끗하다는 걸 알게 되었다. 서울에서 꽤 먼 거리라 사람이 적은 곳이었다. 그렇게 여름휴가는 하이원 리조트로 다녀오게 되었다. 지도로 하이원 리조트를 보니 강원랜드가 보였다. 호기심이 많은 나는 이번 기회를 놓칠 수 없었다. 간 김에 강원랜드도 구경해 보기로 했다. (강원랜드에 대한 이야기는 저번 글에 썼는데 글 마지막에 링크를 달아두겠다.) 바카라, 블랙잭을 미리 조금 공부하고 갔다. 강원랜드에 게임을 설명해 주시는 분도 계셔서 들으면서.. 2023. 10. 5. jest 라이브러리 import 문제 해결 방법 (SyntaxError: Unexpected token 'export') React 환경에서 jest로 테스트 코드 환경을 구축하고 있는데 이런 에러를 발견했습니다. test를 실행하면 Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not conf igured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configurati.. 2023. 8. 13. Reactive Native Webview 의 장단점 2023년 7월 12일 AWS 한국 사용자 모임에서 "React Native WebView 활용해 Hybrid Application 만들기" 세미나를 듣고 왔다. 지금 다니는 회사에서도 관심이 있는 기술이라 신청하여 듣고 왔다. 강의는 윤창현 님께서 진행해 주셨다. 알기 쉽고 재밌게 설명해 주셔서 유익했고 재밌었다. Native App vs Hybrid App Native App 은 iOS나 Android 등 특정 OS 에서 실행되는 앱을 의미한다. 다양한 네이티브 기능을 사용할 수 있어서 실행 속도가 빠르고 안정적이다. 프로덕트가 커지면서 유저에게 좋은 경험을 제공하기 위해서는 결국 Native 앱을 사용해야 한다. 그런데 세미나가 탈 Native 내용이다 보니 단점을 주로 얘기하셨다 ㅎㅎ 단점으로는 .. 2023. 7. 19. 틸드tilde(~)와 캐럿caret(^)의 차이, 어떤 걸 써야할까? (이슈 회고) 회사에서 tilde와 caret 버전 관련 이슈가 터졌었다. 정말 끔찍했었는데... 어떤 문제였는지 알아보고, 틸드와 캐럿 중에 어떤 걸 써야 하는 지도 살펴보자! 어떤 이슈였나? 금요일에 QA를 무사히 마치고 다음주 월요일에 배포했다. 그런데 갑자기 form 에서 submit을 할 때 validation check 하는 부분에서 버그가 발생하며 submit이 되지 않았다. 실제로 validation 문제는 없었는데도 말이다. 그래서 멘붕왔고 롤백했다... 원인은 무엇이었나? form에서 submit 할 때 문제가 발생했으니, 해당 외부 라이브러리의 버전을 낮추니 해결되었다. 자세히 설명하자면 금요일 QA가 끝났을 때는 서버에 있던 버전에서는 문제가 없었는데 월요일에 배포할 때는 주말 동안 해당 라이브러.. 2023. 6. 26. 2023년 상반기 주류 이커머스 스타트업 프론트엔드 개발 회고 내가 다니는 회사(술담화)에서는 스프린트가 끝나거나 프로젝트가 끝나면 다 같이 회고하는 문화가 있다. 개발 블로그에도 올해 상반기를 회고해보고 앞으로도 꾸준히 올려보려고 한다. 굵직한 개발 프로젝트 [ 관리도구에서 사용자의 리뷰를 숨기거나 댓글을 달 수 있는 기능 개발 ] 목적 1 : 쇼핑몰 랜딩 페이지 최하단에 "실시간 베스트 리뷰"가 있다. 이곳에 구매한 상품이 아닌 이상한 사진이나, 부적절한 내용의 리뷰가 올라오는 경우가 있었다. 이때 매번 DB를 변경해서 내려줘야 했는데, 관리도구에서 관리자가 댓글을 달거나 숨김 처리할 수 있도록 하였다. 목적 2 : 또한 상세 페이지에 상품에 대한 문의 리뷰를 달았을 때, 적절히 답변하여 상품에 대한 신뢰도를 높여 구매로 이어지도록 하는 효과도 있었다. 기획 단.. 2023. 6. 13. 사용자 스토리 맵 만들기 책 후기 - 스타트업에서 애자일 도입하기 이번에 리뷰 개편을 개발하면서 백엔드 개발자 분이 기획서에서 중요한 부분을 놓친 사건이 있었다. 백엔드 개발자 분의 100% 과오였지만(?) 기획, 개발 프로세스를 손 본 지 꽤 오랜 시간이 되어 이번 기회에 애자일 프로세스를 도입하려고 준비 중이다. 다 같이 "사용자 스토리 맵 만들기"라는 책을 읽자고 하여 읽어보았다. 이 책의 내용을 소개해보겠다. (가장 아래에 5줄 요약도 해드렸으니 부담없이 읽으세요) 워터폴 프로세스란?애자일 프로세스를 이야기 하기 전에 기존의 전통적인 개발 방식인 워터폴(waterfall) 방식을 간단히 설명하겠다.예를 들어, 어떤 SI 기업에서 A 업체에게 납품할 프로젝트를 개발한다고 생각해 보자.프로젝트를 개발하기 위한 요구 사항들을 문서로 정리한다.기획 문서를 토대로 디자인.. 2023. 6. 7. 이전 1 2 3 4 다음
