flatwhite01 님의 블로그

React와 Next.js의 차이React (라이브러리)Next.js (프레임워크)UI만 담당, 뷰를 구성하기 위한 라이브러리React 기반으로, 추가적인 기능(SSR, SSG 등)을 포함한 프레임워크라우팅 설정 필요 (React Router 사용 등)파일 기반 라우팅 제공SEO 기능 직접 구현 필요SEO 최적화 기본 제공 (SSR/SSG)전적으로 클라이언트 렌더링클라이언트/서버 렌더링 모두 가능 라이브러리와 프레임워크의 차이라이브러리: 필요한 기능만 가져다 사용. 사용자가 애플리케이션 흐름을 제어. (React)프레임워크: 전체적인 애플리케이션 구조와 흐름을 제어. 사용자가 프레임워크의 규칙에 따라 개발. (Next.js, Angular)

1. 프로젝트 생성 : yarn create vite2. 프로젝트명 입력 ( 예: day01 )3. React 선택4. Javascript 선택 5. cd 프로젝트명6. yarn 또는 npm i : node_modules 생성​추가설치 (복사)yarn add react-redux @reduxjs/toolkit react-router-dom styled-components styled-reset react-icons sass swiper axiosnpm i react-redux @reduxjs/toolkit react-router-dom styled-components styled-reset react-icons sass swiper axios

Vercel을 통한 배포 방법을 단계별로 설명해드리겠습니다:Vercel 계정 설정vercel.com에서 회원가입GitHub/GitLab/Bitbucket 계정으로 로그인 가능프로젝트 준비프로젝트가 Git 저장소에 있어야 함package.json이 있는지 확인build 명령어 설정 확인배포 방법방법 1: Vercel 대시보드를 통한 배포# 프로젝트를 Git에 push 후 1. vercel.com 대시보드 접속 2. 'New Project' 클릭 3. Git 저장소 import 4. 프로젝트 설정 확인 (빌드 명령어, 환경 변수 등) 5. 'Deploy' 클릭 방법 2: CLI를 통한 배포# Vercel CLI 설치 npm i -g vercel # 로그인 vercel login # 프로젝트 배포 verc..

웹디자인 기능사 주요 기능들 css와 자바스크립트 내용 공유 해드립니다.25년에는 자격증 이름이 변경 되네요공개문제 확인 해봤는데 이전과 동일하네요공개문제도 같이 공유 합니다. 취득방법 ① 시 행 처 : 한국산업인력공단② 시험과목  - 필기 : 1.디자인일반 2.인터넷일반 3. 웹그래픽디자인  - 실기 : 웹디자인 실무작업③ 검정방법  - 필기 : 객관식 4지 택일형 60문항(60분)  - 실기 : 작업형(4시간 정도)  - 활용소프트웨어 ④ 합격기준 : 100점 만점에 60점 이상 득점자.

1. 콜백 함수 (Callback)콜백 함수는 비동기 작업이 완료된 후 실행되는 함수입니다.주로 setTimeout, setInterval, 이벤트 리스너 등에서 사용됩니다.javascript function fetchData(callback) {    setTimeout(() => { callback("데이터 로드 완료");}, 1000); } fetchData((message) => { console.log(message); // "데이터 로드 완료" });  fetchData함수호출 인수로 ()=>{ } 화살표 함수가 들어간다fetchData( callback )  매개변수 callback으로 전달 된다 setTimeout() 함수에 인자로 ()=>{} , 1000 1초 후에 화살표 함수를 실행 시..

화살표 함수의 주요 특징화살표 함수는 ES6에서 도입된 함수 표현식으로, 더 간결한 문법과 특별한 동작 방식을 가지고 있습니다.1. 간결한 문법함수 선언을 더 짧게 작성할 수 있습니다.중괄호와 return 키워드를 생략 가능 (단, 표현식이 한 줄일 때만).javascript 코드 // 일반 함수const add = function (a, b) {     return a + b;}; // 화살표 함수const add = (a, b) => a + b;// `return`과 중괄호 생략2. this 바인딩화살표 함수는 this를 상위 스코프의 this로 결정합니다.일반 함수와 달리, 호출 위치가 아닌 선언 위치에 따라 this가 고정됩니다.javascriptconst obj = {   value: 42,  ..