_app.tsx, _document.tsx: 두 파일은 server only file 입니다. Next.js server logic에 사용되는 파일이기 때문에 client에서 사용하는 로직 사용 불가 ex) EventListener / Window / DOM 1. _app.tsx 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트를 의미합니다. pages/_app.tsx 경로에 생성 모든 페이지는 이곳을 통하게 되고 공통 레이아웃을 만들때 사용 글로벌 CSS 적용 레이아웃 설정을 통해 페이지 전환시 특정 레이아웃을 유지할 수 있습니다. 페이지 전환시 특정 레이아웃의 상태값도 유지 실습해보기 root 경로에 styles/globals.css 를 생성합니다. _app.tsx에 적용 pages/_app.t..
- 오류내용 리액트에서 tailwindcss를 설치하고 나서 기본적인 설정들을 하고 난 후에 Unknown at rule @tailwind css 라는 경고가 떴다. - 해결 ☝🏼 VSCODE vscode에서는 플러그인 - PostCSS Language Support 를 설치하면 더 이상 경고 문구가 보이지 않는다. ✌🏼 VIM 만약 vim을 사용한다면 그리고 coc를 사용한다면 :CocInstall coc-css 로 coc-css를 설치해준 뒤, vim설정 폴더로 들어가서 coc-settings.json 파일에서 설정을 해주면 된다. { "css.lint.unknownAtRules": "ignore", } vim에서도 경고문이 보이지 않게 된다!
tailwind.config.js 에서 특정 키워드를 지정해서 클래스 안에 작성이 가능하다. 아래는 해당 파일이다. /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", mode: "jit", purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], // darkMode: true, // or 'media' or 'class' theme: { extend: { colors: { brand: "#FF0000", }, }, }, variants: { extend: {}, }, plugins: [], };
iframe 태그를 사용하는 데에 있었던 frameBorder라는 속성이 deprecated 되었다고 나온다. 출처 : http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/tags/att_iframe_frameborder.asp.html#gsc.tab=0 출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe 하지만 mdn에서 확인 시 frameborder는 deprecated된 속성이며, css 속성의 border로 대신 사용해주면 된다. 대안 : style 속성을 이용하여 border로 조정
왜 제거해야 하나요? create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다. 다음은 결과 예시이며, *.css.map과 *.js.map 파일이 sourcemap입니다. 📁build ├── index.html ├── . . . └── 📁static ├── 📁css │ ├── main.58ba45b2.chunk.css │ └── main.58ba45b2.chunk.css.map 👈 └── 📁js ├── 2.70d883b6.chunk.js ├── 2.70d883b6.chunk.js.LICENSE.txt ├── 2.70d883b6.chunk.js.map 👈 ├── main.c855ce..
컴포넌트 라이프사이클 라이프사이클 메서드는 총 9가지가 있다. 아래와 같은 접두사가 붙어있는 경우도 있다. Will + ~ : 어떤 작업을 작동하기 전 실행 Did + ~ : 어떤 작업을 작동한 후 실행 🔍 리액트 컴포넌트의 라이프사이클 마운트(Mount) : DOM이 생성된 후 웹 브라우저에 나타나는 것. 업데이트(Update) : 컴포넌트에서 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트 리렌더링 때, this.forceUpdate로 강제 렌더링할 때 업데이트 됨. 언마운트(Unmount) : 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 과정 * 생명 주기 React의 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어..