일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 안드로이드 스튜디오
- dp알고리즘
- HTML5
- 프로그래머스
- 알고리즘
- 리액트
- css기초
- 백준js
- HTML
- 리액트댓글기능
- 백준
- 자바스크립트
- 포이마웹
- 몽고DB
- 프로그래머스JS
- 백준nodejs
- 프로그래머스코테
- 익스프레스
- 백준알고리즘
- JS
- 다이나믹프로그래밍
- 백준골드
- 리액트커뮤니티
- 백준구현문제
- js코테
- JS프로그래머스
- 백준구현
- 코딩테스트
- 코테
- CSS
- Today
- Total
목록React (63)
개발새발 로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Av0Fv/btsF7Q4FkpR/YVcxVVrLksdOH5Ki7CGZvk/img.gif)
NextJs app router를 사용하면서 문제가 있었다. 메인페이지와 경매상세페이지 라는 곳이 있었고 메인페이지에서 어떤 경매를 클릭하고 경매를 들어갈 수 있었다. 근데 여기서 문제가 있었다. 경매 상세 페이지에서 새로고침을 하고 헤더에 있는 뒤로가기 키를 누르면 아래와 같은 에러가 마구 쏟아졌다. Uncaught Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server. 오류에서는 async/aw..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c6LB55/btsGaxvrUAN/ak1QionZi28KiI20BIwoe1/img.gif)
이전에 두 번의 리팩토링을 거쳐 만든 모달에서 문제가 생겼다. 영상을 바로 보자 백그라운드로 있었던 요소들의 이미지가 갑자기 확 나오는 것이 보인다. 이게 왜 그런지 찾아보니 css스타일링이 문제였다. 조금 간단한 문제였는데 왜 생각을 못했는지 아쉬웠다. 사실 간단하게 해결이 가능한데 어떻게 해결했는지 적기위해 글을 쓰게 됐다. 1. 왜 뒤의 요소가 뿅하면서 튀어 나올까? 현재 모달요소를 아래와 같이 숨겨줬다. const animateOut = { grow: "scale-0 mx-auto", slide: "translate-x-[100vw]", raise: "translate-y-[100vh]" }; 여기서 isOpen이라는 값을 통해서 스타일을 바꾸고 transition을 줬다. isOpen ? "op..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FbjGN/btsF6G8RX6n/6yS0Z4hIkORg6OokWV4ln1/img.png)
Next를 사용하면서 TanStackQuery의 prefetchQuery를 사용해서 미리 서버에서 데이터를 갖고오고, 그 데이터를 getQueryData()로 가져와서 필요한 곳에 사용하는 방식을 자주 사용했다. reactQuery에 캐신된 데이터를 사용함으로써 모든 컴포넌트는동일한 상태의 데이터를 참조하게 되고, 이로 인해 데이터의 일관성을 유지했다. 즉, SSOT( single source of truth :단일 진실 공급원) 원칙을 지킬 수 있었다. 이 로직은 특정한 상황에서만 사용하기는 했지만 아주 유용했다. 근데 어느 순간 내가 알던 것과 다른 문제가 생겼다. 나는 layout.tsx에서 page.tsx가 children으로 들어가고, layout.tsx가 실행되고 page.tsx가 실행되는 건..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bOJkC5/btsF7wK5JV9/UClyOBP2PGzddJtO96W5PK/img.png)
api요청에 토큰이 있어야하는 요청이 있을 때 나는 api 요청을 하기 전에 쿠키에 저장되어있는 accessToken을 가져와서 로그인 유무를 확인한 다음에 api요청을 막거나 허용하는 로직을 짜려고했다. 그러면 서버사이드에서는 next에서 제공하는 cookies를 이용해야했고, 클라이언트 사이드에서서는 getCookie()라는 함수를 만들어서 document.cookie를 통해서 갖고 와야했다. 그래서 두 함수를 authCheck라는 하나의 함수로 만들어줘서 간편하게 사용하도록 했다. 근데 여기서 문제는 두 쿠키가져오는 함수를 실행하고, 서버사이드와 클라이언트 사이드가 동일한 쿠키를 가져온 다음 동일하게 api 요청을 막거나 허용해야했다. 즉 서버사이드와 클라이언트 사이드에서 동일한 결과를 나타나게 해..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bW4uKR/btsF4XJzvvR/uKjeVkc6v17ZNNmOYQw3YK/img.png)
React Hook useEffect has a missing dependency: '~~~'. Either include it or remove the dependency array 이 경고는 다들 한 번씩, 아니 매일 볼 수 있는 경고다. 이 경고가 뜨는 경우는 아마 다들 이럴 것이다 "렌더링 되고 딱 한 번만 실행하게 하자!" "이 데이터가 변할 때만 실행되게 하자!" 보통은 useEffect를 사용하고 의존성 배열에 빈 배열을 넣는다. 근데 항상 그 안에서 실행하는 함수나 참조하는 데이터 때문에 의존성 배열에 경고가 뜬다. "이거 변할 수 있는데 얼른 의존성 배열에 넣어줘" 하지만 경고라서 무시하고 넘어가면 내가 원하는 대로 작동하긴 할 것이다. 그렇지만 이렇게 한다면 의존성 누락으로 인해 만약 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bnq9UD/btsF5VLeoY1/rIS8pYoBAKQM3CDhAKEgV0/img.png)
나는 보통 reactQuery를 사용할 때 타입을 아래와 같이 할 때가 있었다. // 예시 const query = useQuery({ queryKey: ['todos', id], queryFn: fetchTodo, }) useQuery뒤에 제네릭을 붙여서 사용하는 것이다. 근데 이 부분에 대해서 팀원 중 한 분이 좋지 않은 사용이라고 지적해주었다. 팀원분께서 설명 해주었는데 정확히 이해한 것이 아닌 것 같아서 공식문서와 TkDodo님의 블로그를 보고 조금 깊이 공부했다. 그랬더니 내가 몰랐던 부분들이 많이 있었고, 기존에 사용하던 코드 패턴을 바꿔야겠다고 생각이 들었다. 이 글을 보고 다시 한번 reactQuery와 TanStackQuery를 정말 잘 사용하고 있는지 확인해보자. 1. 라이브러리를 사용..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bGmoYU/btsDZXyj5jw/HDAsYWKKb4UAsOWCTuWni1/img.png)
브라우저 렌더링 과정에서 Repaint와 Reflow의 차이점을 통해 성능최적화가 가능하다는 점을 알고 있었지만이에 대해서 정확하게 알고 있지 않았다.이번 포스팅에서는 브라우저 렌더링 과정을 보고, 왜 Reflow와 Repaint의 차이를 중요시 해야하는지 알아보겠다. 웹 브라우저의 구조 User Interface: 주소표시줄, 이전.다음.새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용하는 인터페이스Browser Engine: 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진Rendering Engine: HTML과 CSS파싱하여 요청한 웹페이지를 표시하는 렌더링 엔진 Networking : 각종 네트워크 요청을 수행하는 네트워킹 파트UI Backend : 체크박스나 버튼과 같은 기본적인 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/NgLsW/btsDWQeVvbM/VAkbpAsUKdFVqNubOdGfx0/img.png)
1. offsetX,offsetY와 getBoundingClientRect를 이용한 clientX,clientY e.nativeEvent.offsetX 및 e.nativeEvent.offsetY를 사용하는 것과 getBoundingClientRect를 사용하는 것은 마우스 이벤트를 통해 마우스의 위치를 얻는 두 가지 다른 방법입니다. e.nativeEvent.offsetX 및 e.nativeEvent.offsetY: 이 방법은 이벤트가 발생한 엘리먼트 내에서의 상대적인 마우스 위치를 나타냅니다. offsetX는 이벤트가 발생한 엘리먼트 내에서 마우스 위치의 x 좌표이며, offsetY는 y 좌표입니다. const x = e.nativeEvent.offsetX; const y = e.nativeEvent...