입력창에 추천 검색어를 띄워보자+최적화 > 목적 닉네임 검색시 추천되는 닉네임이 뜬다. 네이버처럼 추천 닉네임이 하단에 보인다. 해당 닉네임 hover시 해당 부분이 조금 밝아진다. 위아래 버튼 누를 시 해당 부분이 조금 밝아진다. 0. 기 mj-hope.tistory.com 추천 검색어를 띄워보는 것은 이전 포스트에서 볼 수 있다. 목적 검색엔진들 처럼 글자를 입력하면 추천검색어가 뜨고 다른곳을 클릭할 시 추천검색어가 닫히는 것을 목표로 했다. 고려한 방법 1. 전역에 클릭 이벤트를 감지 클릭 이벤트를 감지하여 해당 클릭이 입력창과 추천검색어 리스트 박스에 해당되면 그대로 유지 그렇지않으면 추천 검색어를 닫는다. -> 이방법은 모든 클릭 이벤트를 감지하기 때문에 효율적이지 않다고 생각했다. 그리고 나의..

목적! 라이브러리를 쓰지말고 직접 infinity scroll을 구현해보자 어떻게 구현할까? 1. scrollEvent scrollEvent를 사용하게되면 스크롤이 발생할 때마다 함수가 호출된다. throttling으로 이를 좀 더 개선시킬 수는 있으나 역시나 최선의 방법은 아니다. 2. intersectionObserver const io = new IntersectionObserver((entries, observer) => {}, options) io.observe(element) IntersectionObserver API는 해당요소가 최초로 관측되거나 특정 요소와 교차할 때 호출된다. option을 통해 콜백이 호출되는 상황을 조작할 수 있다. option root : 해당 요소를 기준으로 관측..

> 목적 닉네임 검색시 추천되는 닉네임이 뜬다. 네이버처럼 추천 닉네임이 하단에 보인다. 해당 닉네임 hover시 해당 부분이 조금 밝아진다. 위아래 버튼 누를 시 해당 부분이 조금 밝아진다. 0. 기존 코드 https://codesandbox.io/s/2c61zj?file=/demo.js 해당 Mui 공식 예제를 조금 수정하여 만들었다. // icon을 제외하고는 div태그에 style을 준것. 1. 추천검색어 ui를 만들어 보자. 밑에 div태그에 styled을 집어넣은 와 을 나열 했다. {recommendList.length !== 0 && ( {recommendList.map((data, index) => ( { navigate(`/${data.memberId}`); }}> {data.profi..

https://gomgomkim.tistory.com/9 [React] Link와 태그의 href의 차이 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용해야 한다. 이유 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다. 리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사 gomgomkim.tistory.com

https://medium.com/react-native-seoul/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-01-react-js%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-ad8ba252ee28 [React] 리액트를 처음부터 배워보자. —01. React.js란 무엇인가? 이 글을 남기는 계기는 Dan Ambramov의 블로그 Overreacted를 보며 React.js에 대해 더 깊이 공부할 필요성을 느꼈기 때문이다. medium.com spa single page application 을 원칙..

c는 배열 복사를 함수를 통해서하던가 그냥 =을 통해서 하는경우가 없어서 놓친부분. 상황예) state는setstate통해서만 복사가됨. 근데 prop로 다음 js에넘겨주고 그걸그냥 대입해서 for 문이나로 변경하면 이상하게 변경됨ㅋ var z=[1,2]; var v=z; v[1]=0; 이렇게하면 z = [0,2]가 됨.. 걍 일반일땐 값복사하지만이시키는 참조복사임. slice 중첩이면 주소복사 약간 값복사랑주소복사랑같이ㅣㅇㅆ는느낌? copied 가 복사된 객체라 arr 과 아무런 연관이 없어야하지만 중첩된 구조를 변경하면 원본과 복사본 모두 영향을 받는다. 사실 var kk = JSON.parse(JSON.stringify(Data)) 요로케하면값복사(깊은복사) useEffect(async() => {..

디비서 데이터를 받으면 요따구로 되어있다. [{"Order_Num":36,"Take_Out":1,"Gender":"Male","Age":10,"Cost":9700,"Time":"2021-10-06T16:37:48.000Z","Complete":1}] const [rowData, setRowData] = useState([]); console.log("바로띄워서 키로 불러냄",Data[0].Age); 바로띄워서 키로 불러냄 10 -> 잘불러와짐 setRowData(Data); console.log("확인",rowData[0]); console.log("확인",rowData[0].Age); TypeError: Cannot read properties of undefined (reading 'Age') // ..