프로그래밍
-
[React] ReactQuery에 대해서 좀 더 알아보자프로그래밍/React 2023. 7. 12. 11:07
사용이유 ReactQuery를 왜 써야하는가를 알고 사용을 하자! 1. Store를 좀 더 효율적으로 관리를 해보자 redux를 이용해서 비동기 통신의 데이터를 처리하다보니 store의 크기가 점점 커지게 됨에 따라서 원래 기능인 전역관리와 비동기통신을 구분해줘야겠다는 생각으로 사용하면 된다. 2. boiler plate의 감소 기존의 비동기 통신에서 try catch문을 통해서 ErrorHandling을 했더라면 ReactQuery를 사용하면 좀 더 쉽고 boiler plate를 감소하면서 비동기통신데이터에 대한 관리를 전담해서 할 수 있다. https://abangpa1ace.tistory.com/entry/%EC%9E%91%EC%84%B1%EC%A4%91React-Query-2-Queries%EC%..
-
[React] Portal 사용해서 Modal 만들어보기프로그래밍/React 2023. 7. 11. 16:24
원리 Portal의 사용 원리에 대해서 간단하게 설명하자면 1. index.html에 나타나는 우리 root 와 동일선상에 portal에서 사용할 공간을 생성해 준다 2. portal component를 생성해서 로직을 작성한다. getElementById를 통헤서 root옆에 만들어 주었던 공간을 가져오고 createPoral을 이용해서 연결을 해준다 createPortal( 끄기 , document.getElementById("modal") ) 3. creatPortal의 인자값으로 첫번째는 불러올 Modal을 넣고 두번째는 이동할 위치인 element를 넣는다 주의사항 포탈을 이용해서 root 옆으로 불러오긴했지만 z-index값을 적용한 DOM요소(?)보다 상위에 위치하지 않기때문에 z-index..
-
[React] useCallback VS React.Memo VS useEffect프로그래밍/React 2023. 7. 3. 17:02
지극히 개인적인 사견임을 밝힙니다. 아닌부분은 공부할수록 바뀔 수 있습니다. 먼저 이 Hooks가 사용되는 경우는 최적화라고 보고 있다. React.Momo의 경우 component가 export 될때 또는 함수 자체에 덮어씌듯이 씌어놓으면 부모컴포넌트의 리랜더링에도 부모가 내려주는 props가 변하지 않는다면 랜더링되지 않아서 내가(자식컴포넌트) 가진 함수 및 기타 data들이 리랜더링되지 않아 메모이제이션 과정에서 차지하는 메모리를 제외하고는 cost가 없다는게 가장 큰 장점이다. useCallback의 경우 첫번째 인자로는 callback 함수 두번째 인자는 배열로 deps라고도 불리고 deps의 변경에만 반응하여 함수를 다시 생성을 한다(리랜더링시에) 그렇기에 deps의 변화가 없다면 내가 리랜더..
-
[유노코딩] 반응형 웹 Part 1 ~ 7프로그래밍/CSS 2023. 6. 28. 02:33
반응형 웹이란? 구성이나 크기가 다양한 기기나 브라우저에 맞게 변하는 Css의 형태 뷰포트 현재화면에 보여지고 있는 영역을 의미한다. 상대길이 단위 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위 (px은 절대길이 단위이기에 어떤상황에서도 동일한 값을 유지하여 반응형 웹에 적합하지 않다.) em : 부모요소의 글꼴 크기에 상대적으로 나타낸 크기 (em으로 마진이나 패딩을 정하면 자기자신의 글자크기를 기준으로 한다) rem : 루트em이며 html의 글꼴크기에 비례한다 (기본값은 16px) 1vw : 뷰포트의 너비의 100분의 1 1vh : 뷰포트의 높이의 100분의 1 1vmin : 높이와 너비 중 작은 쪽의 100분의 1 1vmax : 높이와 너비 중 큰 쪽의 100분의 1 가변레이아웃(그리드) ..