Total8 Elog: Overflow-X Hidden Issues on Mobile Devices 💥 Issueexport default function RootLayout({children}: {children: React.ReactNode;}) { return ( {children} );}I added the overflow-x-hidden to prevent a background image from overflowing horizontally. However, this solution only worked on desktop browsers and did not apply on mobile devices. 💡 ResolutionTo fix this issue consistently across all devices.. 2024. 5. 2. Elog: Next.js and window object While working on a feature to redirect users after email verification, I stumbled upon an issue with window.location.href that needed a bit of tweaking to work correctly. 💥 IssueI implemented a function to check if the user is on a mobile device:function isMobileDevice() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent );}In our EmailVerif.. 2024. 5. 2. Elog: Event Bubbling When I first started my journey as a frontend developer, our team was tasked with building an mobile app for Bitcoin L2 wallet. 💥 IssueIn our React Native application, I was working on the ConnectEmailPage. Here’s the relevant part of the code:const ConnectEmailPage = observer(({ navigation, route }: any) => { ... return ( {Keyboard.dismiss();}} > ... ... .. 2024. 5. 2. [회원 정보 수정] react-hook-form 회원 정보 페이지에는 닉네임 변경, 프로필 사진 변경, 비밀번호 변경 및 계정 삭제를 할 수 있는 필드가 있다.회원가입 페이지를 맡으신 팀원 분이 react-hook-form을 사용하시면서 소개해주셔서, 나도 배워볼 겸 회원 정보 수정 페이지에 적용해보았다. react-hook-formReact Hook Form relies on uncontrolled form, which is the reason why the register function capture ref and controlled component has its re-rendering scope with Controller or useController.This approach reduces the amount of re-rendering.. 2023. 7. 19. [게시글 상세] 댓글 대댓글 CRUD 댓글 대댓글 구현은 상세 게시글 페이지 중 가장 시간을 많이 썼던 부분이다. 특징은 다음과 같다.최상단에 댓글 입력창이 있고 그 밑에 댓글과 대댓글이 보인다.댓글은 작성된 순서대로 정렬된다.댓글 창에는 본인이 쓴 글이라면 수정 및 삭제 버튼이 보인다.수정 버튼을 누르면 해당 댓글란이 기존 댓글 내용을 담은 입력창으로 바뀌고 수정 및 삭제 버튼이 등록 및 취소 버튼으로 바뀐다.삭제 버튼을 누르면 댓글이 삭제된다.'댓글 추가' 버튼을 누르면 해당 댓글 밑으로 새로운 입력창이 뜨고 대댓글을 입력할 수 있다.대댓글 입력창이 뜨면 '댓글 추가' 버튼은 '취소' 버튼으로 바뀌고, 이를 클릭하면 입력창이 사라진다.대댓글이 입력되면 해당 댓글 바로 아래에 작성 순서대로 정렬된다.댓글과 마찬가지로 수정과 삭제가 가능하다.. 2023. 7. 1. [게시글 상세] 게시글 상세 페이지 구조 사용자가 목록에서 읽고 싶은 게시글을 클릭하면 해당 게시글 상세 페이지로 이동한다. 백엔드에서 넘어오는 데이터는 다음과 같다.게시글 id게시글 카테고리게시글 제목작성자 멤버 id게시글 작성자 닉네임게시글 작성자 프로필 사진게시글 작성 시간좋아요 (눌렀으면 1, 아니면 0)좋아요 개수북마크 (눌렀으면 1, 아니면 0)고정 (눌렀으면 1, 아니면 0)태그태그 id태그댓글댓글 id작성자 닉네임작성자 프로필 사진작성 시간내용parent id 한번에 이 모든 데이터가 넘어오기 때문에, Post Detail이라는 전체를 조합하는 컴포넌트(페이지)에서 이 데이터를 받고 Props로 각 컴포넌트에 필요한 데이터를 내려주기로 했다.페이지를 구성하는 큰 단위의 컴포넌트는 다음과 같다.Post Title: 최상단의 제목란.. 2023. 6. 22. Previous 1 2 Next
