프론트 엔드

[React-Native]React-Native 시작하기

❓React-Native란 React Native는 Facebook에서 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다. 👉이는 React.js를 기반으로 하여 iOS 및 Android 애플리케이션 개발을 위한 선언적인 구문을 사용하며, 네이티브 애플리케이션과 동일한 성능을 제공합니다. ⚡React-Native의 특징 React Native는 많은 개발자들이 선택하는 프레임워크 중 하나이고 다음과 같은 장점을 가지고 있습니다. 📌크로스 플랫폼 개발 React Native를 사용하면 iOS와 Android 애플리케이션을 동시에 개발할 수 있습니다. 이는 개발 시간을 단축하고 애플리케이션의 사용자 범위를 확장할 수 있는 장점을 제공합니다. 📌높은 성능 React Native는 네이티브 애플리케이션과 거..

좋은 CSS를 만드는 법

👋글을 시작하기에 앞서...... Css는 정말 무궁무진하고 자유롭게 제작이 가능하기 때문에 때로는 잘 만들어진 화면이더라도 내부의 CSS고통을 겪고 있을지 모릅니다. 눈으로 보이지 않기 때문에 저를 비록 한 초보자들이 많이 모르고 지나쳤을 꺼라 생각되어 이 글을 끄적입니다......... 👆좋은 CSS를 만드는 법 단순히 화면만 이쁘게 만들어 진다고 좋은 Css가 아닙니다. 👉아래 내용을 참고해서 자신의 코드를 평가해 보세요 📍단순하고 체계적으로 유지 명확하고 일관된 레이아웃을 사용하고 너무 많은 스타일과 요소를 사용하지 마십시오. 📍CSS 전처리기 사용 Sass 또는 Less와 같은 CSS 전처리기를 사용하면 변수, 함수 및 혼합을 사용하여 보다 효율적이고 유지 관리 가능한 코드를 작성할 수 있습니다..

[CSS]React에서 스크롤시 화면 변화

❗필요! React에서 scroll 했을 때 애니메이션 효과는 useState, useEffect으로 만들 수 있습니다. import React, { useState, useEffect } from "react"; 또한 CSS 라이브러를 사용하면 애니메이션을 더 편하게 사용할 수 있습니다. npm install animate.css --save import "animate.css/animate.min.css"; animate.css의 자세한 사용법은 다음 사이트를 참고해 주세요 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-..

Promise result값 사용하기

비동기 데이터를 다루기 위해 항상 비동기 함수 내부에서 함수를 호출해 값을 계산하거나 저장했습니다. useEffect(() => { console.log("Works!before"); setTimeout(function () { console.log("Works!"); axios .get("http://localhost:4000/data") .then(async function (response) { // response setdata(response.data); console.log(response.data); //데이터 전송 성공시 }) .catch(function (error) { // 오류발생시 실행 }) .then(function (response) { // 항상 실행 }); //컴포넌트가 리랜..

[HTML]웹 브라우저(Web Browser)

❓What Is browser? Web Server에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 GUI(그래픽 사용자 인터페이스) 기반의 응용 소프트웨어이다. 🧱브라우저의 구성요소 모든 브라우저에는 back-end와 front-end라는 두 개의 요소가 존재합니다. 👉front-end는 우리가 상호작용하는 인터페이스로 상당히 간단합니다. 반면 back-end의 경우 브라우저의 핵심 기능들을 용이하게 만들어주는 부분으로 상당히 복잡합니다. 다음은 브라우저의 구성 요소를 나타낸 사진입니다.👇 사용자 인터페이스 ➡유저가 브라우저와 상호작용하는 공간입니다. 앞으로 가기 뒤로 가기 및 브라우저 화면의 기타 모든 옵션이 포함되어 있는 공간입니다. 브라우저 엔진 ➡사용자 인터페이스와 렌더링 엔진 ..

[UI&UX]Optimization(최적화)

❓What Is Optimization? Optimaztion(최적화)는 주어진 조건에서 최댓값 혹은찾는 것입니다. 👉제약된 환경 속에서 최고의 효율을 뽑아내는 것이라 볼 수 있습니다, ❓Why We Need Optimization? 그렇다면 우리는 왜 최적화를 사용해야 하는 것일까요? 📌이탈률 감소 최적화가 잘 되어 있지 않은 웹의 경우 웹페이지 화면 로딩에 오래 걸릴확률이 높습니다. ❗하지만 사용자는 대다수는 웹페이지가 5초 안에 로딩되지 않으면 페이지를 떠나버립니다. 👉따라서 이탈하는 사용 자을 붙잡기 위해서는 최적화가 필요합니다, 📌전환율 증가 이탈률이 감소하면서 빈사 이익으로 전환율이 높아질 확률도 커집니다. 👉사용자가 이탈하지 않으면 사용자들의 숫자는 새로운 유입으로증가하게 됩니다. 📌수익 증..

[React]Virtual DOM

❓What Is Virtual DOM Virtual DOM은 React에서 DOM을조작시켜주기 위해 등장한 프로그래밍 개념입니다. 프런트엔드 개발자들은 애플리케이션을 빌드할 때 DOM을 조작해야 합니다. 👉하지만 웹이 커질수록 DOM의 관리는 사람이 해결할 수 없을 정도로 복잡해졌습니다. 다음과 같은 문제를 해결하기 위해 자바스크립트 기반의 프레임 워크나 라이브러리가 급증하게 되습니다, 👉다음은 가장 인기 있는 UI프레임 워크의 사용자 추이입니다, 위의 그래프에 상위를 차지하고 잇는 'React'와 'Vue'에서 DOM변경관리를 위한 새로운 개념을 재공 했는데 바로 이 개념이 virtual DOM입니다 ❓Why We Use Virtual DOM 어째서 virtual DOM이 기존의 DOM조작 방식보다 뛰..

[React]Webpack

❓What Is webpack webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다 ❓Why We Use webpack 정적 모듈 번들러에는 Webpack을 비롯하여 여러 개의 번들러들이 존재합니다. Webpack을 사용해야 하는 이유는 다음과👉 같습니다. 🤖성능 최적화 & 자동화 코드 축소와 더 붙어 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행할 수 있습니다. 👉HTTP 요청수가 감소하여 웹 사이트의 빠른 속도로 이용할 수 있습니다, 🎧Load What you need, when you need 코드 스플리팅(code spliting)을 이용하여 필요한 모듈만을 요청할 수 있습니다. 👉필요한 스크립트만 로드하여 빠른 속도로 페이지를 로드할 수..