본문 바로가기

제니의 개발일지/도움이 되었던 것 정리46

[리액트 React] 이미지 업로드 이름 찾아오기 이건 TIL 이자 바보같았던 치열한 고민의 흔적이랄까.. 이미지 파일 업로드까지 다 구현해놓고 그 이미지의 파일명을 가져오지 못해서 하루를 날린 기록을 적어본다. 동기가 마무리를 state 마무리를 도와줘서 바로 해결되었던,, 역시 동기사랑 나라사랑 일단 이걸 고민했던 시간을 반성하며.. ✅ 일단 구현된 코드 방식(이건 참고용, 다양한 방법이 있다) const [imgName, setImgName] = useState(''); const onClickImg = useCallback(async() => { if (loading) return; if(imgChanged){ setImgChanged(img.url); } else { const data = await readFile('image/*') setI.. 2023. 1. 2.
[React 리액트] 버튼 클릭 모달 열기, 닫기 ✅ 전체 코드 // 함수 const [open, setOpen] = useState(false); const OpenCloseMenu = useCallback(() => { if(open === false) { setOpen(true); } else { setOpen(false); } }, [open]); // return 이후 // 버튼 클릭 이벤트 할 곳 // 열고 닫을 모달 {내용} 똑같이 따라하면 된다. 전체 코드로 기록하는 것을 좋아하지 않는데, 이 코드는 굉장히 간단해서 똑같이 따라하면 쉽게 할 수 있다. 단, css가 중요하다. 열고 닫을 모달에 적용시켜 주면 된다. 나는 아래처럼 스타일 컴포넌트로 작성했다. const Modal = styled.div` width: ~; hieght: ~;.. 2022. 12. 28.
TypeScript props css boolean 적용(+style-components) props로 css 변경을 원할 때 사용하는 코드를 그 동안은 const Container = styled.div` background-color: ${(props) => props.color}; ` 테스트 위와 같이 작성을 해주었었다. 여기서 event는 내가 만든 함수라 각자 만든 함수명을 입력해주면 되는데, 이렇게 작성하게 될 경우 문제는 코드가 불필요하게 길어지고 인라인으로 css를 지정한다는 것이다. ✅ boolean으로 스타일 컴포넌트에서 css 적용하기 1️⃣ boolean으로 스타일 컴포넌트 + useState 작성 const Container = styled.div` background-color: ${({event}) => event ? "red" : "white"}; ` const [.. 2022. 12. 14.
TypeScript css 타입 지정해주기 JavaScript로 코딩을 할 땐 문제 없던 코드들이 TypeScript로 하면 에러가 발생되는 경우가 많다. 생각지도 못한 타입 지정에 css 타입 지정이 있어 기록한다! 대부분 오류가 없는데, 인라인 스타일로 지정하게 되면 빨간 줄이 생기게 된다. 테스트 위와 같이 작성하게 될 경우, 에러는 아니나 빨간 줄이 계~속 떠 있기 때문에 변경해주어야 한다. 스타일 컴포넌트를 사용하는데 위 코드처럼, 함수로 만든 내용을 넣어주어야 할 땐 스타일 컴포넌트가 작동하지 않는 경우가 있어서 유용하게 사용할 수 있었다. const styles = { offsetStyle: { backgroundPosition: `${offset.x}px`, } as React.CSSProperties, }; 테스트 🔹 위 모양처럼.. 2022. 12. 14.
IntersectionObserver 스크롤 감지 IntersectionObserver 를 활용해 스크롤 애니메이션을 만드는 방법을 열심히 고민했다. ✅ 일반적으로 사용하는 scroll 이벤트의 경우, 스크롤을 아래로 내려도 저장이 되지 않기 때문에 기능 부하가 발생해 효율적이지 못하다. ✅ 'scroll'을 사용하면 스크롤 이후의 css는 props를 사용하게 되는데, 그렇게 되면 코드 량이 많아져 비효율적으로 코드를 작성하게 된다. IntersectionObserver 를 사용하면 style-components에서 바로 작업할 수 있다. 사실 scroll을 사용해서 하는 기능이나, IntersectionObserver 를 활용해서 만드는 기능이나 크게 어려움이 다르지 않았는데 새로운 도전을 하려니 머뭇거리게 되서 scroll 부터 사용을 해버렸는데 .. 2022. 12. 14.
style-components로 이미지 불러오기 이미지를 사용할 때 주로 위와 같이 사용하거나 const StTestImg = styled.img` ` const StTESTiMG = styled.div` background-imgae : URL() ` 위와 같이 style-components를 사용하여 div, img 로 불러왔었는데 스타일링하기에는 불편함이 있었고 새로운 방법을 찾게 되었다. 🔹 styled-components 사용하여 이미지 불러오기 + 스타일링 const StImg = styled.img.attrs({ src: "", alt: "", })` width: 40px; height: 40px; ... ` 위와 같이 styled.img.attrs를 사용하게 되면, 원하는 이미지 src, alt를 이미지 태그와 동일하게 불러올 수 있고 .. 2022. 12. 12.

티스토리툴바