브라우저 렌더링 이해하면 성능 최적화의 길이 보인다. 브라우저 렌더링 과정을 알면 웹 페이지 성능을 최적화하고, 디버깅을 쉽게 하며, 웹 애플리케이션의 사용자 경험을 개선하는 데 중요한 정보를 얻을 수 있습니다. 우선 간략하게 5가지로 나누어본후 상세로 설명하겠습니다.1. 성능 최적화렌더링 과정 최적화: 페이지가 어떻게 렌더링되는지 이해하면 페이지 로딩 속도를 빠르게 하거나, 불필요한 리소스를 줄이는 방법을 알 수 있습니다. 예를 들어, 이미지나 스크립트가 렌더링 성능에 미치는 영향을 파악하고, 이를 최적화할 수 있습니다.렌더링 차단 요소 분석: 자바스크립트나 CSS가 페이지 렌더링을 차단하는 방식에 대해 알면, 페이지 로딩을 더 빠르게 할 수 있는 방법(예: 비동기 로딩, CSS 최적화 등)을 찾을 수..

소스코드를 보고 개념을 설명하라의 공부방법을 적용해보려한다.그래서 모던자바스크립트의 책예제를 통해 소스코드를 분석해보자 const x = 1;const y = 2;function foo(a) { const x = 10; const y = 20; console.log(a+x+y); // 답1}foo(100);console.log(x+y); // 답2 답1 : 130답2 : 3소스코드의 흐름을 설명하시오.전역 스코프const x = 1과 const y = 2가 호이스팅되어 메모리에 할당됩니다.호이스팅: 변수들이 메모리에서 공간을 차지하지만 값은 초기화되지 않습니다.함수 호출foo(100)가 호출되면 새로운 실행 컨텍스트가 만들어집니다.함수 스코프에서 const x = 10과 const y = 20이 초기화..

컴포넌트를 분리하던중 깨닳은것을 적고자한다import React from "react";import Pagenation from "../common/Pagenation";import SearchBox from "../common/SearchBox";import heart from "../../images/icon/heart.svg";import "./../css/ProductList.css";import { Link } from "react-router-dom";const Product = ({ productLists }) => { return ( {productLists?.map((data) => ( ..

싱글페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. 이를 이해하기위해선 싱글페이지 애플리케이션이란 개념이 생기기전에 사용되던 멀티 페이지 애플리케이션이 어떻게 작동하는지 살펴봐야한다. 멀티페이지 애플리케이션에서는 사용자가 다른페이지로 이동할때마다 새로운 html을 받아오고, 페이지를 로딩할때마다 서버에서 CSS,JS, 이미지 파일등의 리소스를 전달받아 브라우저의 화면에 보여주었다. 각페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도했다. 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않..

브릿지란? 브릿지란 안드로이드와 웹뷰의 통신을 위해 만들어지는 javascript 용 인터페이스다. 웹뷰에서는 안드로이드의 메서드를 직접 호출하는 것이 불가능하기 때문에 브릿지라는 통로를 통해 호출해야한다. 브릿지는 웹뷰에 붙는 인터페이스의 구현체이다.

만약에 데이터를 update 해준다고한다면? graphql에서 update 되는 값이 ndefined 라면 동작을하지않는다. 그러면 비밀번호가 바뀐다면?? 바뀐비밀번호를 다시 암호화해서 넣어주는 작업이필요하다 개인정보수정을 크게 두가지로 나뉜다. 1. 수정할 User가 있을때 update - 비밀번호를 수정할때 ( 입력한비밀번호 -> 암호화 ) update - 나머지 필드 update - 성공시 return true 2. 수정할 User가 없을때 not update - 실패 return false ,error 2. 토큰값 설정 로그인후 토큰값이 설정된후 사용자가 프로필수정, 등록등 어떤 동작을취할때 토큰을 확인해 이 사용자구나 확인을한후 그 동작을 처리해준다 1. 로그인된경우 로그인 -> 개인 토큰값 생..