PWA(Progressive Web Apps)란?웹을 모바일 앱인척 만드는 기술이다.웹 응용프로그램이나 웹앱 이라고 하기도 한다.PC환경에 비유하자면 바로가기 아이콘을 바탕화면에 까는것과 비슷하다. 장점비용이 적게든다.앱 스토어를 이용하지 않고 사용&업데이트가 가능하다.오프라인에서도 동작할 수 있다.단점주요 소스와 이미지를 다운받아 놓기 때문에 속도나 메모리에 영향을 줄 수 있다. 리액트에서 PWA 세팅 1. pwa로 프로젝트 생성처음 프로젝트 생성할때 세팅을 해줘야 한다.기존 프로젝트를 수정하는건 안되고, PWA로 프로젝트를 만들어서 기존 프로젝트 파일을 복사해 와야 한다.npx create-react-app 프로젝트명 --template cra-template-pwa  manifest.json에서 앱..

깃허브 파일 업로드 포트폴리오용으로 사용하던 호스팅이 있었는데 워드프레스를 설치하고 다른 용도로 사용하게 되면서 포트폴리오를 따로 올릴만한 대안이 필요했다.얼마 되지도 않는 파일 몇 개를 올리자고 호스팅을 또 결제하는건 돈낭비 같아서 고민하다, 깃허브에 올려서 배포하면 된다는 생각이 들었다.FTP보다는 귀찮지만 간단하게 올릴수 있다. 우선 깃허브의 개념에 대해 간단히 설명하자면 깃허브에 '원격저장소'를 만들고, 내 컴퓨터(로컬)에 '로컬 저장소'를 만들어서 이 두개를 연결시키고 파일을 업로드하면 끝  1. 깃허브(GitHub)에 가입하고 원격저장소(repository)를 만든다.  New를 클릭하고 Repository name를 입력하고, 배포할거니까 Public(공개) 선택하고 Add a README ..

리액트 개발환경 세팅리액트(React, React.js 또는 ReactJS)는 자바스크립트 기반의 라이브러리로, 주로 사용자 인터페이스를 구축하는 데 활용된다. 리액트는 싱글 페이지 애플리케이션(SPA)이나 모바일 앱을 개발할 때 효과적으로 사용할 수 있다.  1. Nodejs 설치하기LTS버전을 다운받아 설치 https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  원하는 곳에 폴더를 하나 만들고 우클릭 > 터미널에서 열기로 cmd창 오픈npm create vite@latest npm create vite@lates..

기본 타입 로딩 애니메이션 3종  See the Pen Untitled by yw k (@yw-k) on CodePen.

클릭하면 최상단으로 스크롤 이동하는 버튼 소스  스크롤하면 버튼이 나타나고 클릭하면 최상단으로 이동 HTMLTop CSSbody {height: 2000px; background: #eee;}.arrow-box { position: fixed; width: 40px; height: 40px; background-color: brown; right: 20px; bottom: 40px; transition: all .3s ease; opacity: 0; pointer-events: none; color: #fff; text-align: center;}.arrow-box.show { opacity: 1; pointer-events: auto;}.material-symbols-outlin..

레이어 팝업 소스 딤(dim) 클릭 시 닫힘버튼 클릭하면 레이어 팝업 오픈딤 영역 클릭시 팝업 닫힘  HTML팝업 팝업창 close Lorem, ipsum dolor sit amet consectetur adipisicing elit. 닫기  CSSbutton { display: block; border: none; background-color: skyblue; padding: 5px 20px; cursor: pointer; margin: auto; color: #fff; font-weight: 700;}.black-back { position: absolute; top: 0; width:..