어리둥절 분석가 그리고 개발자

✔️ 필요성 스토리북은 내가 만든 컴포넌트의 디자인과 간단한 액션을 너무 깔끔하고 쉽게 볼 수 있는 라이브러리이다. 제일 간단한 유형이 아래처럼 사용하는 것이다 import React from "react"; import { ComponentMeta, ComponentStory } from "@storybook/react"; import Tab from "../components/elements/Tab"; export default { title: "element/Tab", component: Tab, } as ComponentMeta; const Template: ComponentStory = (args) => ( ; ) export const TabExample = Template.bind({}); ..

✔️ 현재 URL 가져오기 현재 URL을 가져올 때에는 asPath가 좋다 import { useRouter } from "next/router"; const copyURL = () => { const {asPath} = useRouter(); } ✔️ 문제 확인 그런데 현재 URL을 클립보드에 복사하고 알릴 때에는 아래 코드가 최고다. 아래 블로그를 그대로 사용하였으며 나중에 다시 쓸 때 잊지않기 위해 기록용으로 내 블로그에 포스팅해둔다. // 현재 URL을 클립보드에 복사하고 알림 export const copyURL = () => { let currentUrl = window.document.location.href; let t = document.createElement("textarea"); d..

✔️ 필요성 Next에서 갑자기 아래와 같은 compile 에러가 떴다. 뭐지..? ✔️ 문제 해결 @emotion/is-prop-valid를 설치한 다음에 껐다가 다시 yarn dev하니까 해결됐다! yarn add @emotion/is-prop-valid

✔️ 필요성 styled-components를 적용한 컴포넌트를 만들어놓고, 그 컴포넌트를 다시 가지고 올 때 일부 CSS를 수정하고 싶을 때가 있다. 그리고 그 때 styled(component) 이렇게 해서 쓰는 것을 보통 Extend styled-component라고 이야기한다. 그런데 Extend Style이 안 먹을 때가 있다. 새로 적용하는 CSS style을 어떤 컴포넌트에다가 써야할 지 모르는 경우에 보통 그러하다 import React from "react"; import styled from "@emotion/styled"; const Outside = styled.div` `; const Inside = styled.div` `; interface Props { children: Re..

✔️ 필요성 git branch 이름을 바꾸고 싶을 때가 있다 ✔️ local branch 이름 바꾸기 이름을 바꾸고자 하는 branch로 이동한 다음에 새로운 이름으로 바꿔준다 git checkout old_name git branch -m new_name ✔️ remote branch 이름 바꾸기 과거의 이름을 가진 remote branch를 없애고(?) 새로운 이름을 가진 remote branch로 push한다 git push origin :old_name git push origin new_name

✔️ 필요성 컴포넌트 이동을 했을 때 스크롤을 가장 상단에 위치하도록 고정하고 싶을 때가 있다 ✔️ 문제 확인 useEffect를 활용해서 Scroll을 맨 위로 올려주자~ //항상 스크롤 맨 위 고정 useEffect(() => { window.scrollTo(0, 0); });

✔️ 필요성 버튼 컴포넌트를 만들 때 사이즈나 컬러에 따라서 CSS 분기를 깔끔하게 해주고 싶을 때가 있다. 이 때는 className과 &를 활용해서 코드를 아주 깔끔하게 만들어줄 수 있다! ✔️ 예시 import styled from "@emotion/styled"; const Container = styled.button` display: inline-block; flex: none; width: 100%; max-width: 100%; background: transparent; appearance: none; cursor: pointer; text-align: center; text-decoration: none; font-weight: 600; color: ${(props) => props.t..

✔️ 필요성 classNames는 true/false boolean 값을 통해서 특정 스타일링을 할 지 말지 쉽게 분기하도록 도와주는 라이브러리이다. 컴포넌트의 props가 Active일때랑 Active가 아닐 때 보기 쉽게 CSS를 정리해보자 ✔️ Props를 사용할 때 isActive의 값에 따라서 ? : 삼항연산자를 활용해서 다른 CSS를 줄 수도 있는데, 정확하게 isActive일 때 어떤 효과들이 들어갔는지 한 눈에 확인하기가 어렵다는 단점이 있다 const TabAnchor = styled.button` color: ${({ theme, isActive }) => isActive ? theme.colors.white : "#333333"}; background-color: ${({ theme,..

✔️ 필요성 리액트로 개발하는데 이런 에러가 등장했다 ✔️ 문제 확인 이것저것 찾아보니까 React.Fragment를 로 치환하라는 얘기가 나와서 React.Fragment가 뭘까 했는데 이걸 얘기하는거였다. 모든 코드의 을 로 바꿔주니까 문제가 해결됐다! ✔️ 문제 해결 관련코드 첨부 type ObjType = { [index: number]: any; 0: any; 1: any; 2: any; }; const Example: NextPage = () => { const [tabIndex, setTabIndex] = useState(0); const renderPage: ObjType = { 0: ( ), 1: , 2: , }; return ( {renderPage[tabIndex]} ); }; exp..

✔️ 에러 Next.js에서 gsap의 ScrollTrigger를 사용하려고 하는데 세상 처음보는 에러가 떴다! 이래서 Next.js가 힘들다... import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); ✔️ 문제 해결 ScrollTrigger를 조금 다르게 import 하면 된다. 이유는 모름 import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; // import { ScrollTrigger } from "gsap/ScrollTrigger"; impor..