전체 글 검색 결과
275 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ React

[React] 기본 실습

개발환경설치 - node.js npx create-react-app [--template typescript] cd npm install axios --save npm install react-router-dom --save npm run start // 3000 포트로 실행 npm run build // build 폴더 내 생성된 파일들을 웹서버가 바라보는 폴더에 복사 붙여넣기 App.js import './App.css'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; import ItemList from './ItemList'; import ItemDetail from './ItemDetail'; function..

2022. 6. 21. 09:47
카테고리 없음

[모바일 최적화] 하이브리드 성능 진단 및 최적화 방법

진단 기준 1. Lazy loading 적용 - 스크롤 없이 볼 수 있는 콘텐츠에 이미지가 우선적으로 적용되도록 Lazy loading이 적절히 적용되었는가? 2. 렌더링 차단 리소스 제어 - 스크롤 없이 볼 수 있는 콘텐츠에 영향을 미치는 css, javascript 파일이 먼저 로드 되도록 하였는가? 3. HTML 코드 검토 - 사용하지 않는 Html 태그가 있는지 확인 하였는가? 4. CSS 코드검토 - 불필요한 CSS 파일이 포함되어 있는지 확인하였는가? CSS 파일 내 스타일 시트에서 사용하지 않는 Style 규칙을 제거하였는가? 5. 자바스크립트 코드 검토 - 화면과 관계 없는 불필요한 JavaScript 파일이나 함수가 포함되어 있지 않는지 확인하였는가? 6. 자바스크립트축소 - JavaSc..

2022. 6. 21. 00:13
카테고리 없음

[모바일] 하이브리드 Native 앱이란?

정의 디바이스에서 제공하는 WebView나 android framework의 lifecyle을 사용하지 않고, 단일 tech stack을 사용하여 빌드하는 앱을 말하며, 일반적으로 Cross-Platform 이라는 용어로 지칭한다. android native thread와는 native bridge를 통해서 통신한다. 종류 React Native : Javascript Flutter : Dart Xamarin : C# Qt : C++ 장점 One source Multi-Platform Native에 근접한 성능 Native앱 개발보다 나은 생산성 단점 Native앱 성능을 능가하기는 힘듬 Hybrid(Web)보다는 더딘 생산성 framework 제공 기능외의 Native의 기능을 사용하기 위해서는 Plu..

2022. 6. 21. 00:02
카테고리 없음

모던 UI 프레임워크 렌더링 방식, CSR & SSR

1. 개요 Angular, React 그리고 Vue가 등장한 이후로 Front-end를 개발하는 방법이 크게 바뀌었습니다. 이 글에서는 Reat와 Vue를 중심으로 내용을 구성했습니다. JSP와 jQuery를 이용해서 화면을 만들때는 라우팅이 변경될 때마다 화면이 깜빡이면서 새로운 화면이 그려지는 것이 보통이었습니다. 우리는 이것을 MPA(Multi Page Application) 방식이라고 부릅니다. 그리고 동시에 화면이 어떤 방식으로 클라이언트(즉, 사용자의 브라우저)에게 어떤 방식으로 전달되느냐는 측면에서 SSR(Server Side Rendering)이라고 부를 수도 있겠습니다. 하지만, 이 때의 SSR은 React나 Vue를 이용해서 구현하는 SSR과는 다소 차이가 있습니다. 최초의 화면 렌더링..

2022. 6. 21. 00:00
카테고리 없음

[최적화] 웹 최적화를 위한 이미지 지연 로딩(Lazy Loading)

1. 개요 이미지는 웹페이지에 있어서 필수불가결한 요소이지만 그 크기가 클 경우에는 웹페이지의 로딩 성능을 떨어트리는 요소가 될 수도 있습니다. 또한 검색엔진 최적화(SEO, search engine optimization) 측면에서도 이미지 로딩이 다 끝나지 않아서 페이지의 색인이 제대로 되지 않으면 검색엔진이 웹페이지의 정보를 제대로 반영하지 못하는 문제가 발생할 수도 있습니다. 이 문제를 해결할 방법으로써 이미지 지연로딩 기법을 사용할 수 있습니다. 사용자가 보고 있는 화면의 이미지는 초기에 로딩하지만 사용자가 보지 않는 이미지의 로딩은 잠시 뒤로 미뤄두고 사용자의 요청에 따라 이미지가 보여져야 하는 순간에 이미지를 로딩함으로써 웹페이지의 선능을 개선시키는 방법입니다. 다시말해 다수의 큰 이미지 로..

2022. 6. 20. 20:07
카테고리 없음

[아키텍처] BFF[Backend for Frontends]란?

MSA/API 기반 프론트앤드 개발에 가장 필요한 기술이 되어버린 Backends Fro Frontends(BFF)의 개념 및 사레에 대해 정리해본다. 1. Backend For Frontends(BFF) 란? BFF(Backend For Frontends)란 이름 그대로 프론트앤드를 위한 백앤드 (서버)이다. 프론트앤드를 위해 API를 호출하거나 HTML을 생성하기 위한 서버를 말한다. 여기까지 설명을 들으면 '기존 웹애플리케이션과 무엇이 다른거지?'라고 생각할지 모르겠지만 본질적으로 달라지는 것이 아니라 '프로트앤드 전용' 이라는 역할이 달라지는 것이다. 웹어플리케이션 (서버)는 다음과 같은 여러가지 용도를 가진다. 데이터베이스나 미들웨어(연계 등)로부터 데이터를 가져와서 데이터를 갱신한다. 웹페이지..

2022. 6. 20. 19:58