벼락치기 블로그

1. next.js 프로젝트 생성 (shadcn ui 사이트 : https://ui.shadcn.com/docs/installation/next) 2. sass 환경 설치 (next.js 사이트 : https://nextjs.org/docs/app/building-your-application/styling/sass) 3. shadcn ui 컴포넌트 설치 - button - input - progress - popover - calendar 4.

- React 프레임워크- Plain React의 한계   - SEO(Search Engine Optimization)   - SSR(Sever Side Rendering)- SSG(Static Stte Generation)  - 기본설정  - 서버 사이드 렌더링이지만 클라이언트가 요청하는 시점이 아닌 빌드시에 페이지를 생성함  기본환경 세팅- shadcn ui 프로젝트 설치   - https://ui.shadcn.com/docs/installation/next Next.jsInstall and configure shadcn/ui for Next.js.ui.shadcn.com  - 넥스트 js 1. 2. 둘 다 npm 설치 - vscode Tailwind CSS IntelliSense Extend 설치-..

# Vue.js 란?- JavaScript Framework 중 한 가지- SPA 와  SFC 구조가 특징- 개발 스타일은 Oprions API 와 Composition API 2가지가 있음 # VSCode Vue.js 프로젝트 설정- 터미널에서 npm create vite@latest 입력하여 비트 설치- vue, javascript 로 기본 설정 # VSCode extend 설치- vue - official- vue vscode snippets # LifeCycle Hooks - options API  - beforeCreated => option API 초기화 전 실행  - created => option API 초기화 후 실행 count : {{ count }} Vue.js LifeCy..

CSS를 보완하기 위해 만들어진 전처리기로 CSS를 더 효율적으로 작성하기 위해 탄생함 => CSS 확장 언어 특징- Sass와 SCSS의 구문은 비슷하다. 중괄호 {} 와 세미콜론 ; 등 차이가 발생- 네스팅, 함수, 연산 등의 기능이 제공- 중복 코드 발생을 줄일 수 있음- 생산성 및 유지보수 효율을 증가할 수 있음 결론네스팅을 잘 작성하면 기존 css보다 유지보수 하기 용이함

useMemo 는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 입니다.풀이: 즉, 이전 렌더링과 현재 렌더링 사이에서 값을 기억하고, 의존성이 변경되지 않으면 기존 결과를 재사용한다는 뜻!