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

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

✔️ 필요성 리액트로 개발하는데 이런 에러가 등장했다 ✔️ 문제 확인 이것저것 찾아보니까 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..

✔️ 필요성 Next.js에서 Emotion을 쓸 때 css를 쓰고 싶은 데 css 속성이 없다고 나온다 아래와 같이 사용중! import styled from "@emotion/styled"; import React from "react"; import { css } from "@emotion/css"; ✔️ tsconfig.json 수정 tsconfig.json 파일을 열로 아래와 같이 types 를 추가해주면 된다! { "compilerOptions": { "types": ["@emotion/react/types/css-prop"], ... } }

✔️ React 기존에 react를 쓸 때에는 react-router-dom의 Link를 사용하고 Link에 직접적으로 className을 줄 수 있었다 import { Link } from "react-router-dom"; ✔️ Next Next에서는 우선 next/link에서 제공하는 Link를 사용해야 하고 to 대신에 href를 사용해야 한다. 또 직접적으로 className을 줄 수 없어 Link 밑에 하나 tag를 더 넣고 a 태그에 className으로 스타일링을 했다. import Link from "next/link";

✔️ 필요성 Next.js 프로젝트에서 CSS module인 sass/scss를 사용해보겠다 ✔️ 방법 npm i sass next.config.js를 아래와 같이 수정해준다 //next.config.js const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, } 루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꾼다 원하는 CSS를 입력한 뒤 사용한다 /* Home.module.scss */ .t..

✔️ 요소 다음에 꾸밈요소 추가하기 가끔씩 특정 요소 다음에 무조건 밑줄이 나오는 등 분리요소 등을 매번 추가하고 싶을 때가 있다. ::after와 ::before를 통해 요소(태그) 앞뒤로 꾸밈 요소를 추가할 수 있다. footer-text라는 className을 가진 요소의 마지막 뒤에는 항상 gray 색상의 bar가 등장한다 .footer-text { position: relative; display: inline-block; margin-right: 17px; margin-bottom: 4px; text-decoration: none; font-size: 14px; line-height: 20px; &::after { content: ''; display: block; position: absol..

✔️ 인접형제 선택자란? 인접형제 선택자란 CSS 선택자(Selector) 중에서 같은 부모 아래에 있는 태그 두개가 인접해서 나타날 때 두번째 태그를 선택하기 위한 CSS 선택자이다. 즉, E + F 라고 하면 E 다음에 바로 나오는 F 요소를 의미한다 더 자세한 CSS 선택자(Selector)에 대한 글은 아래에! CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우 www.nextree.co.kr ✔️ SCSS에서 & SCSS에서 &은 무조건 위의 부모 요소를 의미한다 ✔️ & + & .a-file { ove..

✔️ useRef가 필요한 상황 JavaScript를 사용할 때에 화면 상에서 특정 대상을 선택해야할 때가 있다. 이것을 특정 DOM을 선택한다고 얘기한다. 리액트가 아니라 Vanilla JavaScript를 쓸 때는 getElementById, querySelector 같은 selector 함수를 활용해서 선택한다. 리액트를 사용할 때에도 아주 드물게 DOM을 직접 선택해야하는 경우가 있다. focus를 선택해주거나 두 개 컴포넌트의 싱크를 맞출 때 (pagination 등) 필요하다. 그 때 ref를 사용하고, useRef는 ref를 설정해주는 역할을 한다. ✔️ 예시 useRef()를 통해서 inputSpace라는 ref 객체를 만들었고, 이 객체를 선택하고 싶은 태그에 ref 값으로 넣어줬다. 이..

✔️ 필요성 서로 다른 효과를 가진 css 코드를 하나의 컴포넌트에 병합해서 적용할 때 사용한다. array[ ] 로도 병합이 가능하지만 true/false boolean을 이용해서 특정 효과를 적용할 지 적용하지 않을 지 선택하는 것이 가능하다. ✔️ 설치 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼... // 둘 중에 하나 yarn add classnames npm install classnames ✔️ 사용 예시 (1) 아래 예시를 잘 보면 생각보다 사용하는 방법은 쉽다 className={classnames('box-info', 'mg-10')} // 'box-info mg-..