리액트에서 Lazy Loading을 구현하는 방법은 주로 코드 스플리팅(Code Splitting)을 통해 비동기적으로 컴포넌트를 불러오는 것 이다. 코드 스플리팅은 애플리케이션 번들을 더 작은 조각으로 나누어 필요한 컴포넌트를 필요한 시점에 로드할 수 있게 해준다.R

번들링(Bundle)은 웹 개발에서 여러 개의 파일과 모듈을 하나의 파일로 묶는 과정을 가리킵니다. 주로 JavaScript, CSS, 이미지, 폰트 등과 같은 웹 애플리케이션의 자원들을 번들로 묶어 하나의 파일로 제공하는데 사용됩니다.파일 관리: 웹 애플리케이션을 개

글작성자가 리뷰를 작성하면 DB에 저장되지 않는다.상대방이 리뷰를 작성하면 DB에 저장된다.값이 제대로 설정이 안되있었기 때문에 글작성자가 리뷰를 작성하면 저장이 되지 않는 것이였다.opponentsUid: item.opponentUserUidopponentsUid:

채팅리스트에 리뷰를 올리고 채팅방에 리뷰를 선택할 수 있게만 들었다.글 작성자가 채팅완료를 누르면 글작성자와 상대방에게 동시에 리뷰방?이 생긴다.이제 firebase의 DB에 업데이트된 리뷰 값을 저장하기만 하면 된다.계획은 user review의 count를 갱신해

산책 완료하기를 누르면 모달창이 나오게끔 구조를 바꿧다.채팅창에서 리뷰상대를 선택하게 하면 산책상대가 2명 이상일 경우에는 기존 피그마에서 짜여진 구조에서는 구현하기 복잡하고 일관성이 없어보였기 때문이다.일단 리스트에 불러오는 작업까지는 완료를 했고 파이어 베이스 색인

기존에 만든 채팅기능을 보던 중에 의문점이 생겼다.applicantChatroomId와 posterChatroomId모두 uuidv4로 랜던한 값을 주고 있었다.그런데 이 값은 그냥 combineId(동일한 유저이더라도 게시글마다 새로운 채팅방이 생긴다)로 통일해도 되

그동안 미뤄왔던 반응형 작업을 진행하였다.만들어보니 생각보다 어렵지는 않았던 것같다화면을 바꿔주는 것은 useState를 사용해서 동적으로 css를 변경해 주었다.swapBoxAndLists를 프롭스로 내려주어 true false로 삼항 연산자를 통해서 나타나고 없어지

기존의 데이트 피커(antd)는 커스텀이 불가능하기에 react-datepicker를 몇시간 커스텀 하려 했지만 결론적으로는 원하는 결과를 얻지 못했다.React-datepicker는 다른 datepicker와는 다르게 커스텀이 편리하다는 장점이 있다.하지만 초기 설정

5초 뒤에 3을 반환하는 함수를 짜보라고 친구가 문제를 냈다.처음에는 이렇게 코드를 짰지만 코드가 제대로 작동되지 않았다.찾아보니 비동기로 코드를 짜야만 작동하는 것이였다. 아직 비동기 코드에 대한 이해도가 낮았기 때문에 어떻게 코드를 작성해야 되는지 찾아 볼 수 밖에

1️⃣ 유닛테스트 vs 통합테스트 vs E2E 테스트를 비교하여 설명해주세요유닛 테스트(Unit Test)통합 테스트(Integration Test) 위 테스트보다 더 큰 동작을 달성하기 위해 여러 모듈들을 모아 이들이 의도대로 협력하는지 확인하는 테스트이다. 통

https://roytuts.com/how-to-fix-err_ossl_evp_unsupported-in-react-js-application/ERR_OSSL_EVP_UNSUPPORTED 오류는 Node.js 17의 릴리스 정보 에 언급되었습니다 .Node.j

단축 평가(Short-circuit evaluation)는 조건식을 평가할 때, 조건식 전체를 평가하지 않고 필요한 만큼만 평가하여 처리하는 개념입니다. 이를 통해 효율적인 코드를 작성할 수 있습니다.간단한 예를 들어보겠습니다. 다음은 두 개의 값 중에서 "참(trut

업로드중..

이벤트 버블링 문제는 아니였고버튼의 정 가운데를 클릭하면 작동을 하지만 조금 외곽을 클릭하면 버튼이 작동을 하지않았다.transform: scale(0.7);은 요소의 크기를 0.7배로 축소하는 CSS 속성입니다. 이 속성을 사용하면 요소의 크기가 변경되므로, 버튼 동

슬라이드 구현 당시 드래그가 생각처럼 구현되지 않았고 stackoverflow에서 event.preventDefault()를 사용해서 해결했다는 글을 보고 코드를 추가하였다.스택 오버플로우 링크 const onMouseDown = (event: any) => {

마우스 이벤트는 웹 애플리케이션에서 사용자의 마우스 동작을 감지하고 처리하기 위해 사용됩니다. 주요 마우스 이벤트에는 mousedown, mouseup, mousemove, click, dblclick 등이 있습니다. 이벤트를 처리하기 위해 JavaScript와 Rea

마우스 이벤트는 웹 애플리케이션에서 사용자의 마우스 동작을 감지하고 처리하기 위해 사용됩니다. 주요 마우스 이벤트에는 mousedown, mouseup, mousemove, click, dblclick 등이 있습니다. 이벤트를 처리하기 위해 JavaScript와 Rea

아래의 코드는 카운터를 구현하는 함수 createCounter를 정의하고, 이 함수를 사용하여 각각의 독립적인 카운터 인스턴스를 생성하는 예제입니다. 각각의 카운터 인스턴스는 자체적인 값을 유지하며, increment 함수를 호출할 때마다 값이 증가합니다.위의 예제에서

useMemo동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것

이전에 썼던 고민흔적이 날아갔다는 것을 이제 알게되었다. 그 때 썼던 내용은 일단 처음에 하려고 했던 flutter프로젝트는 2순위로 밀려났다. 현재 캐러셀 or crud 프로젝트를 1순위로 생각하고 있는데 개발을 안 한지 너무 오래 된 것 같다는 두려움이 생겼기 때문