프론트엔드 (108) 썸네일형 리스트형 프로젝트 템플릿 만들기 리액트 애플리케이션을 생성하면 기본적으로 생성된 폴더들이 있는데요. 불필요한 폴더들을 삭제하고 기본 템플릿을 만들어 보겠습니다. 완성된 템플릿 불필요한 파일을 제거하고 완성된 템플릿은 아래와 같습니다 App.js function App() { return ( Test ) } export default App index.js import React, { StrictMode } from "react"; import ReactDOM from 'react-dom/client' import App from './App' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ) 앱 구조 먼저.. 자바스크립트 모듈 - 물결효과 자바스크립트를 사용하요 텍스트 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 텍스트 요소에 클래스 이름 이름 지정만으로 연동이 가능하도록 구현되어 있으며 작동은 지정된 클래스를 단어로 분리하고 효과를 적용하는 방식입니다. // wave-module.js const waveTextEl = document.querySelector('.wave-text') setInterval(() => { const child = waveTextEl.firstElementChild const spanEls = document.querySelectorAll('.wave-text span') if (window.getComputedStyle(child).transform.includes('-40'.. 반응형 웹 디바이스 구분하기 반응형 사이트의 경우 사이트 경로가 동일하여 디바이스에 따른 구분을 하기 힘든데요. 스크린의 크기를 지정하여 구현하는 방법도 가능하지만 코드를 통해 간단히 구현하는 방법을 안내해 드리겠습니다. 구현하기 사용할 코드는 아래와 같은데요. /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 화면에 따라 코드를 테스트 해 보면 아래처럼 디바이스에 따라 다른 값이 반환되는 것을 확인 가능합니다. 따라서 반환되는 값을 조건으로 지정하여 코드를 구현하면 됩니다! HTML 삽입 미리보기할 수 없는 소스 레이지 로딩 레이지 로딩은 사이트가 로딩될 때 전체페이지를 한 번에 로딩하지 않고 필요한 페이지만 로딩하고 일부페이지는 해당 페이지에 요청이 있을 때 로딩하는 방식을 말합니다. 레이지 로딩은 필요한 파일만 다운로드하기 때문에 웹사이트의 속도 등 성능향상의 장점이 있습니다. 구현하기 프로젝트 생성 (생성 시 앵귤러라이터 사용 체크) 앵귤러 - 씨엘아이 앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다. CLI 설치 npm install -g @angular/cli 버전 및 버전 이력 확인 (https://github.com/angular/angula jin-co.tistory.com 컴포넌트 추가 구현을 위해 필요한 컴포넌트를 아래와 같이 추가합니다. ng g c .. 앵귤러 - 로컬에서 인증 URL (HTTPS) 사용하기 개발환경에서 앵귤러 애플리케이션을 구동하면 기본적으로 http 프로토콜을 사용합니다. mkcert라는 라이브러리를 활용하여 인증서를 설치하고 로컬환경에서 https를 사용하는 방법을 보겠습니다. mkcert 설치 관리자권한으로 커맨드라인을 열고 OS환경에 따라 mkcert를 설치하기 위한 커맨드를 실행합니다. ▶ 윈도우 choco install mkcert 인증서 설치 앵귤러 프로젝트에서 인증서를 저장할 폴더를 만들고 cd client mkdir ssl 해당 폴더로 이동한 뒤 cd ssl 아래 명령어를 실행하여 CA(Certificate Authority)를 설치합니다. mkcert -install 인증서를 사용할 서버를 지정합니다. mkcert localhost 완료되면 아래처럼 인증서의 위치, 키, .. 앵귤러 폼 - 리액티브 폼 앵귤러 리액티브 폼은 옵저버블을 활용하여 폼에 입력되는 값을 스트림의 형태로 관리하며, 새로운 값이 입력될 때마다 이를 감지하고 반영합니다. 템플릿 드리븐 폼과 차이점은 리액티브 폼은 저장된 데이터를 동기식으로 처리하고 원본데이터에 대한 변형이 불가하며 옵저버블의 오퍼레이터를 통해서만 가능합니다. 앵귤러 리액티브 폼을 사용하는 방법을 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 매터리얼 앵귤러에서 제공하는 UI 컴포넌트인 앵귤러 매터리얼을 추가해 보겠습니다.라이브러리 설치프로젝트를 열고 아래 명령어를 실행합니다. npm으로도 설치 가능하지만 ng add를 통해서 설치하게 되면 모듈에 등록하는 것 빼고 컴포넌트 사용을 위한 모든 구성이 완료되므로 편리합니다.ng add @angular/material실행을 하면 실행 여부를 다시 묻는 데 'yes'를 선택하고 테마선택, 글로벌 폰트 스타일, 애니메이션 등의 사용여부를 결정합니다.모듈에 추가추가된 라이브러리는 모듈에 추가해야 사용이 가능합니다. 정리를 위해 'app.module.ts' 파일에 바로 추가하지 않고 따로 모듈을 생성하여 추가하겠습니다. 아래 커맨드를 실행하여 모듈을 만듭니다.ng g m modules/angular-materia.. 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 상태관리 등의 기능을 자체적으로 탑재하고 있는 것이 아니라 다른 라이브러리를 사용하여 구현하기 때문에 사이즈가 작고 배우기 쉬운 장점이 있습니다.리액트 앱 만들기리액트 앱을 만드는 가장 간단한 방법은 아래 명령어를 사용하는 방법입니다. 커맨드라인을 열고 아래 명령어를 실행하면 필요한 구성과 함께 새로운 리액트 앱이 생성됩니다.npx create-react-app app-name생성된 앱으로 이동하여 편집기를 엽니다.cd app-namecode .구동하기커맨드라인을 열고 아래 명령어 실행npm start참고React – A J.. 이전 1 2 3 4 5 6 ··· 14 다음
