I AM Seung Hyeon

⚡ CRA  vs  Next.js  vs  Vite CRA- 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었다.- 오랫동안 React 생태계에서 프로젝트를 생성하는 표준처럼 여겨졌다.- 하지만 CRA는 2022년 4월 이후로 업데이트가 전혀 없으며, React 공식 문서에서도 사라지면서 사실 상 폐기(deprecated) 수순을 밟고 있다. Next.js- React 프로젝트를 만들기 위해서 많이 사용되는데, Next.js는 프로젝트 생성 뿐만 아니라 라우팅, 데이터 패칭(fetching), Server-Side Rendering(SSR), Static Site Generation(SSG), 이미지 최적화 등 온갖 부가 기능을 지원하는 메타 프레임워크..

- Sass는 CSS의 전처리기(Preprocessor)로, 변수, 중첩(Nesting), 믹스인(Mixin) 등 다양한 기능을 제공하여 코드의 재사용성과 가독성을 높여준다.- CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하다.- 브라우저는 SASS문법을 모르기 때문에 CSS로 컴파일해야 한다. ( ➡️ sass라이브러리 설치 )- React 애플리케이션에서 Sass를 사용하면 스타일링 작업을 더욱 효율적으로 수행할 수 있다.- Sass를 사용하기 위해서는 sass 패키지가 필요하며, 프로젝트에 추가적인 의존성을 가져온다.- Sass를 활용하면 React 애플리케이션의 스타일링을 더욱 효율적으로 관리할 수 있으며, 코드의 유지보수성과 가독성을 높일 수 있다.  |  Sass 패키지 설치프로젝트 디렉토리..

✅ DashboardController.java 만들기  ✅ proxy 변경✅ "proxy": "http://localhost:8080"  ➡️  "homepage": "/dashboard"  ✅ yarn start 후 페이지 뜨는 것 확인 후 ✅yarn build✅ build 후 index.html 이름 변경   dashboard.html  (컨트롤러 맵핑 주소 맞춤)✅ Spring 프로젝트의 📁templates 폴더 안에 dashboard.html   복붙 ✅  📁 resources > static > dashboard 폴더 만들기✅ dashboard 폴더 안에 yarn build 후 생성된 파일 중 html 파일 제외하고 모두 복사✅ spring 재가동  끝 !

State  상태- 컴포넌트 안에서 관리되는 것- 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다- 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다- 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야 한다. Redux- 여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리- 리액트 컨텍스트에 기반을 둔 라이브러리로 Provider 컴포넌트가 항상 취상위로 동작해야 한다.- 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.- 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다.- 리덕스를 사용하면 상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리할 수 있게 된다.-..

1) Node.js 설치확인node --version  2) yarn- 반드시 Node.js가 설치된 상태에서 진행npm install -g yarn  3) visual studio code   도움되는 extensionColor Highlight색상 코드 값을 실제 그 색상으로 강조한다ESLintJavascript 구문 검사 기능 터미널에서 npm install -g eslint 수행 필요.Image preview이미지 파일을 소스코드 줄번호 옆에 미리보기 표시함npm Intellisenseimport 할 모듈의 이름이나 경로에 대한 자동완성 제공Prettier - Code formatter코드의 줄바꿈, 들여쓰기등을 자동으로 정렬한다. 사용방법: Ctrl+Shift+P > Format Document..