천천히 알아보는 코딩공부

next.js 이란? Next.js는 React 라이브러리의 프레임워크이다. Next.js를 사용하는 가장 큰 이유로 SSR(Server-Side Rendering)이 가능하기때문에 사용 CSR 방식은 검색엔진에 부적합. 자세한 건 링크 참고 https://changrea.io/react/next.js%EC%97%90-%EB%8C%80%ED%95%B4/ Next.js에 대해 프론트엔드 공부를 하다보니 여러 기업에서 또는 개발자들이 기본적으로 깔고 가는 스택들이 보인다. 요즘에는 React, Typescript가 주 베이스이고, 필요에 따라 Redux, Recoil 같은 상태관리 라이브러 changrea.io Node.js 설치 해당 링크 참고 2번에 나와있음!! https://daeseok94.tisto..

1. 해당 프로젝트에 react-router-dom 사용 환경 준비 yarn을 통해 설치 yarn add react-router-dom npm을 통해 설치 npm install react-router-dom BrowserRouter : React 웹 애플리케이션 개발 시 클라이언트 사이드 라우팅을 위해 라우팅 관련 컴포넌트들의 최상단에 위치시켜야 하는 컴포넌트로, react-router-dom 패키지에 속해 있다. 그런데 사실 이는 react-router 패키지에 속해 있는 컴포넌트를 래핑 한 컴포넌트이다. 컴포넌트는 컴포넌트를 렌더링 할 때 props로 history 객체를 전달하는데, 이 객체는 history 패키지의 createBrowserHistory() 함수를 호출함으로써 생성된다. 해당 his..

const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 문법을 저런식으로 수정하면 해결된다. react 18 버전 사용하면 발생하는 에러다.

Warning: Invalid DOM property `class`. Did you mean `className`? function Side_bar() { return ( /* Sidebar */ Dashboard ... ) } 이런식으로 class -> className 으로 사용하면 발생하지 않는다.

file-loader - 웹팩으로 번들링 시 웹앱에 css, scss와의 폰트나 이미지 등의 타입의 파일이 있을 경우 해석하도록 해주는 loader다. npm install --save-dev file-loader 로더 설치 후 webpack.config.js rules: [ //... { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', }, }, ], }, header.js 이미지 삽입하고자 하는 곳에 비슷하게 코드를 넣어주면 된다. import React from 'react'; import niceLogo from '../assets/img/logo.jpg'; // 이미지로고 impor..

작업하려는 jsx 파일에 css파일을 import 해놓고 빌드할때 에러가 발생한다. Webpack에서 css loader 추가를 해줘야 한다고 한다. 설치해보고 설정해보자 .jsx 파일에 .css파일을 import해준다. npm i -D css-loader style-loader webpack.config.js rules: [ { test: /\.(s*)css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } use 순서가 중요하므로 저렇게 작성해주고 빌드해주면 Bootstrap CSS 에라가 나지 않는다.