본문 바로가기

분류 전체보기162

스쿼클 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.
[도서] 1일 1로그 100일 완성 IT지식 #소프트웨어 27 ✅ 작문과 비슷한 프로그래밍 - 1970년대 '시스템 프로그래밍' 용도로, 즉, 어셈블러, 컴파일러, 텍스트 편집기 같은 프로그래머 도구와 심지어 운영체제까지 작성할 목적으로 사용할 언어들이 만들어졌다. 1️⃣ C 언어 - 1973년에 데니스 리치가 개발했다. 2️⃣ C ++ - 1980년대, 규모가 매우 큰 프로그램의 복잡성 관리를 도울 의도로 설계된 언어들이 개발되었다. - 비야네 스트롭스트룹이 개발했다. 🔷 대부분의 맥 소프트웨어는 C, C ++와 오브젝티브-Cobjective-c(C의 변종)으로 작성된다. 3️⃣ 자바 - 1990년대 초 제임스 고슬링이 개발했다. - 이베이같은 웹사이트를 방문하면 사용자의 컴퓨터는 웹페이지를 표시하기 위해 C++와 자바스크립트를 실행하겠지만, 이베이는 방문자의 브.. 2022. 12. 19.
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.

티스토리툴바