본문 바로가기

react57

스쿼클 Squircle css 하는 법 - 트러블 슈팅 기록 디자이너들은 다 안다는 스쿼클 도형은 카카오톡 프로필에 쓰이고 있는 둥근 사각형 모형을 생각하면 된다. 이번에 회사 디자이너님이 웹 사이트에 적용하고 싶어 하셔서, 적용을 하는 과정에 엄청난 트러블 슈팅들이 생겨났고 자료도 많이 없어서 기록을 시작했다. 1️⃣ svg로 이미지를 다운하기 디자이너님이 만들어 놓은 피그마 도형을 클릭해서 먼저 svg로 Export를 한다. 이 이미지를 쓰는 것은 아니고 이미지 안에 있는 형태를 사용해야 하는 것이다. 👌 예를 들어, 50x50 사이즈의 스쿼클 svg를 다운했다고 한다면, 이런 svg 코드가 나온다. 이걸 이용을 해서 시작해야 한다. 2️⃣ 재사용을 해야 하기 때문에, 컴포넌트 하나 만들어 놓기 예를 들면, 이렇게 만들면 된다. 내가 만드는 웹 사이트의 프로필.. 2023. 3. 30.
[TypeScript] useRef 모달 바깥 영역 클릭 이벤트 오랜만의 블로그 포스팅 매일 회사에서 코딩을 하면서 정신없는 시간을 보내다 보니 정리를 못했는데, 시간 날 때마다 유용하게 써먹었던 코드를 정리하기는 해야겠다. 반복적으로 쓰이는 코드들은 다시 내 코드를 찾아보는 경우가 많은데 몇 달사이에 그나마 코드 리팩토링을 하게 되는 나를 보면서 아주 조금의 배움과 반성을 함께 하는 중!! 옆에 사수님이 계셔서 정말 감사하고 도움이 많이 된다. 그 동안, 모달 바깥 영역을 구현했던 방식은 useState로 open이면 true가 되고 이런식의 코드였는데 그렇게 되면 발생되는 문제는 ❗ 영역 바깥을 클릭했을 땐 꺼지지 않을 수 있다는 것! 물론, position fixed를 해서 모달을 띄운다거나 할 경우엔, 여러 가지 방법을 통해서 모달을 끌 수는 있지만 번거롭다... 2023. 3. 27.
[리액트 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.
[도서] 리액트를 다루는 기술 #컴포넌트 3.1 클래스형 컴포넌트 - 클래스형 컴포넌트와 함수 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다. - 함수 컴포넌트의 장점은 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. - 또한, 메모리 자원도 클래스형 컴포넌트보다 덜 사용하며, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. - 함수 컴포넌트의 주요 단점은 state와 라이프사이클 API의 사용이 불가능하다는 점이었으나, 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 3.3 props - props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 .. 2022. 11. 13.
[도서] 리액트를 다루는 기술 #JSX 2.1 코드 이해하기 - import 구문, 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능이다. - 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능 - Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다. - 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundle)은 묶은 다는 뜻으로 파일을 묶듯이 연결하는 것 - 대표적인 번들러로 웹팩, Parcel, browserify라는 도구들이 있으며 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세인데 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다. - 번들러 도구를 사용하면 import(또는 requ.. 2022. 11. 11.

티스토리툴바