Develog/Study 썸네일형 리스트형 프론트엔드 성능 측정 방법 프론트 엔드, 성능측정 해야하는 이유아카마이(분산컴퓨팅 및 클라우트 컴퓨팅을 전문으로 하는 미국의기업)의 이커머스 업계 성능 현황 보고서에 따르면 지연속도가 늘어날 수록 이탈률이 급격하게 증가하고, 구매전환율 역시 감소한다고 한다.2초 지역시 62%의 이탈률 증거와 25%의 구매 전환률 감소를 하고있으며 이는 4명중 한명꼴로 꽤 큰 비율이다.성능은 서비스 이용률 및 기업의 이익에 영향을 미친다.⇒ 프론트엔드 성능 측정이 필요한 이유는 사용자 개선을 통해 사업의 이익 증대를 끌어내기 위해서이다.프론트엔드에서 측정해야 하는 성능은 무엇일까?로딩시간FCP(First Contentful Paint) : 첫 요소가 로드될 때까지 걸리는 시간FMP(First Meaningful Pain) : 사용자에게 의미 있는 .. 더보기 [우아한-Tech 스터디] Framer-motion을 이용한 애니메이션으로 화려한 웹 페이지 만들기 - 2주차 - 개요Framer-mortion 으로 페이지 전환시의 효과를 구현한다.사용 개념motion.div의 initial ,animate, exit 를 이용했다. + react-router-dom-v6 도 준비물 motion.div, AnimatePresense, react-router-dom-v6, useLocation STEP 1경로에 맞는 페이지 만들기import { AnimatePresence, motion } from "framer-motion";import { useLocation } from "react-router-dom";const About = () => { const location = useLocation(); return ( AnimatePresence mode="w.. 더보기 [리팩터링]Object.keys() 타입 지정해서 사용하기 type CoffeePrice = { [K in CoffeeName]: number; }; type CoffeeName = "americano" | "latte" | "ade"; const obj: CoffeePrice = { // ~~~ error Property 'ade' is missing in type '{ americano: number; latte: number; }' but required in type 'CoffeePrice'.ts(2741 americano: 10, latte: 10, }; ade 가 없어서 완전히 일치하지 않기 때문에 오류가 나온다. 해결법 ? 연산자를 넣어주거나 부분만 포함하겠다는 partial 키워드를 넣어주면 된다. 위의 기초 연습을 토대로 내 코드를 리팩터링 하기.. 더보기 Drag AND Drop (react.js)구현하기 - 1 drag : 드래그 하고있는 상태의 아이템 dragend : 드래그 동작이 끝났을 때 dragenter : 드롭할수있는 target에 드래그 아이템이 들어왔을 때. dragleave: 드래그 아이템이 드롭타겟을 떠났을 때 dragover : 드래그 아이템이 드롭 타겟에 놓여졌을 때 dragstarg : 드래그 동작이 시작 됐을 때 drop : 아이템이 드롭 타겟에 놓였을 때 const onDragStart=(e)=>{ setX(e.clientX) //시작 위치를 저장 setY(e.clientY) e.dataTransfer.setData("data",e.target.id) e.dataTransfer.dropEffect="copy"; } const onDragOver = (e)=>{ //drop 이벤트가 발.. 더보기 반응형 웹제작을 위한 핵심기술 반응형 웹이란? pc,tv,내비게이션,스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공하는것을 말한다.반응형 웹을 만들때는 모든요소를 %로 계산한다고 한다.화면에 보이는 영역인 뷰포트, 화면의 크기와 환경을 감지하여 구조를 바꿀 미디어쿼리ViewPort스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 스마트기기에선 화면의 크기를 정확하게 감지하지 못한다.그래서 미디어쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록, 뷰 포트라는 기술을 사용한다.디바이스 기기에 따라 가로세로가 설정되도록 메타태그를 넣어준다.미디어 쿼리가 화면의 사이즈를 감지해 스타일을 적용시킨다.각각 320px, 768px, 960px 이상일때 배경색을 변경한다.가변그리드 공식(가변크기로 만들 박스의 .. 더보기 React 중첩라우팅 https://ostarblog.tistory.com/9 React Router v6 정리 React Router v6 React Router는 현재 리액트의 라우팅 기능을 지원하는 가장 인기있는 라이브러리입니다. 이 React Router가 지난 2021년 11월에 정식 6.0 버전이 릴리즈되었습니다. 5.0 버전에서 큰 변경사항 ostarblog.tistory.com React-dom-router 의 대한 정보를 찾다가 v5랑 v6랑 섞인 정보가 많아 혼란스러웠다. 내가 원한건 페이지에서 -> 링크를 눌러서 하위 페이지로 이동할 경우에 따른 페이지를 보여주는걸 구현하고 싶었다. 이 페이지에서 nav 바를 누름에 따라 오른쪽 공간에 다른 정보가 보이게 하고 싶었는데. 이 블로그의 글을 읽고 중첩라우팅을.. 더보기 [Udemy Web 부트캠프] 섹션 19,20,21 루프의 구조, 함수란?, 함수 레벨업 섹션 19 루프의 구조 for of 메소드와 객체에는 .length같은 길이가 없어서 for of에 사용할 수 없다 (반복가능한 객체가 아니기 때문에) 그래서 Object.key()와 Object.value()등을 이용해서 for of 문을 돌릴수있다. 해당 메소드들은 키값과 value값을 배열로 만들어서 반환하기 때문에 for of를 돌릴 수 있기 때문이다. For(let score of Object.values(객체명)){ } 18) { input = prompt(`The number is lower then ${input}`); } } //미니 ToDo List만들기 let todoes = []; let countTodo = 0; let input = prompt("명령어를 입력해 주세요!"); w.. 더보기 [Infrearn]스프링 부트와 JPA 활용1 을 시작! Intellij 설정과 자바설치, 버전오류, Junit 버전 오류를 거쳐 드디어 환경설정 1강을 끝냈다.내가 서버에대해 지식이 부족했단 걸 깨달았다. 일단 활용편을 훑은 후 기본편을 들을 생각이다. 용어정리ORM (Object-Relational Mapping) - 객체 관계 매핑:객체는 객체대로 설계, 관계형 데이터베이스는 관계형 데이터베이스 대로 설계ORM프레임 워크가 중간에 객체와 DB를 매핑해준다.ORM은 객체와 RDB 두 기둥 위에 있는 기술 JPA (Java Persistence API): 현재 자바 진영의 ORM 기술 표준으로, 인터페이스의 모음이다. Spring Framework:Application 프레임워크, OpenSource SW엔터프라이즈 애플리케이션 개발을 좀 더 쉽게 하기위.. 더보기 이전 1 2 3 4 다음
