frontend (21) 썸네일형 리스트형 Developer essentials: JavaScript console methods https://developer.mozilla.org/en-US/blog/learn-javascript-console-methods/ Developer essentials: JavaScript console methods | MDN Blog The JavaScript console is an essential tool for web development. Learn new and fun ways to use the console to display data and debug your code. developer.mozilla.org JavaScript로 개발할 때 console.log()는 반드시 쓰게 된다. 그동안 console.log, warning, info, error는 많이 써왔는데 이 글을 읽.. Naver FE News 2024-01) What Every Developer Should Know About GPU Computing: GPU의 작동원리와 배경지식 Naver FE News 원문 What Every Developer Should Know About GPU Computing A primer on GPU architecture and computing codeconfessions.substack.com 대부분의 개발자는 CPU 용 코드를 작성하면서 자랐기 때문에 CPU와 순차적 프로그래밍에 대해 잘 알고 있지만, GPU의 내부 작동 방식과 그 특별한 기능에 대해서는 잘 모르는 경우가 많다. 지난 10년 동안 GPU는 딥 러닝에 널리 사용되면서 그 중요성이 엄청나게 커졌다. 이 글은 GPU의 작동 원리에 대한 배경지식에 대해 소개한다. CPU vs GPU CPU와 GPU의 주요 차이점에 대해 소개한다. 첫번재 차이점, 설계 목표 CPU의 설계 목적은 순차.. Frontend Tool) Vite(비트)란 무엇인가 🔹 vite (veet) : 프랑스어로 “빠르다” 🔹 vue를 개발한 Evan You 🔹 다양한 프레임워크 지원 (Vue, React, TypeScript, VanilaJS 등) 🔹 실제 프로덕션 제품의 성능을 향상시키는 것이 아니라 개발 속도를 향상시키는데 도움을 주는 툴 1. 배경지식 vite의 동작방식과 어떤 역할을 하는지 알아보기 전에 필요한 배경지식들을 공부하고 정리했다. 번들링 컴포넌트로 모듈화된 소스코드를 브라우저에서 실행할 수 있는 하나의 파일로 묶어 연결해주는 작업 대표적인 번들링 툴: webpack, rollup, parcel HMR(Hot Module Replacement) 앱을 종료하지 않고 갱신된 파일만 교체하는 방식 코드에 변경이 발생하면 모든 파일을 다시 번들링하지 말고 갱신된.. Frontend) Vite란 무엇인가 매우 빠른 웹 번들러 툴 1. 등장 배경 자바스크립트의 기능과 규모가 확대됨에 따라 모듈화를 하기 시작했다. ESM (ECMAScript Module)이라는 것이 등장해서 자바스크립트 자체에서 모듈화를 지원하기 시작했다. 코드에서 빠질 수 없는 import, export 구문이 바로 이 문법이다. 모듈화된 여러 개의 파일들을 비동기 로딩하는데 특정 파일이 너무 큰 경우 로딩이 지연돼서 전체 성능이 저하하게 되는데 이 문제를 해결하기 위해 webpack, parcel, rollup 등과 같은 번들러가 등장했다. 여러 개의 모듈화된 파일들을 하나의 파일로 만들어준다. 다만 이 번들러들은 많게는 수십, 수백개의 파일들을 하나로 합치는 작업을 하기 때문에 프로젝트가 커질수록 빌드 속도가 아주 느려지는 문제가 발.. React) 에러 해결 - Warning: Can't perform a React state update on an unmounted component.This is a no-op, but it indicates a memory leak in your application.To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. useRef를 사용해서 특정 컴포넌트들의 offsetTop값을 알아야 해서 useEffect 내에서 ref를 건 컴포넌트들의 값을 useState로 값을 저장했다. 그리고 그 useRef를 사용한 컴포넌트가 포함된 경로에서 다른 경로로 이동하니까 아래와 같은 에러가 떴다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 해석해보자면 마운트되지 않은 .. Javascript) 자바스크립트의 핵심 원리 : 실행 컨텍스트 Execution Context 실행 컨텍스트란? ECMAScript 스펙에 따르면 실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다. 즉, 코드가 실행되기 위해 필요한 환경을 말한다. 하나의 컨텍스트는 하나의 동작을 실행하는 환경으로 이와 관련 없는 함수나 변수 등의 코드를 만나게 되면 새로운 컨텍스트를 생성한다. 그리고 이 컨텍스트들은 한번에 하나의 동작만 처리하는 자바스크립트의 콜백 스택에 쌓이게 된다. 자바스크립트 엔진의 동작 방식은 다음과 같다. 실행 가능한 코드 (잔역 코드, 함수 내 코드 등)를 만나면 실행 컨텍스트 스택이 생성된다. 전역 코드가 스택에 들어오면 전역 실행 컨텍스트가 생성되어 스택에 쌓인다. 전역 실행 컨텍스트는 해당 애플리케이션이 종료될때까지 유지된다. 함수가 호출되면 이 함수를 위.. Javascript) Event Loop 비동기 콜백, 자바스크립트 동작 원리 자바스크립트 == 싱글 스레드 프로그래밍 언어 여기서 말하는 스택은 어떤 프로그램의 코드가 어떤 순서로 실행되는지 기록하는 작업 스케줄링과 관련된 자료구조이다. 일단 어떤 함수를 실행하면 그 함수가 stack 에 push되어 stack의 맨위에 쌓이게 된다. 글고 이 함수가 어떤 값을 리턴하거나 실행을 종료하면 그 함수를 다시 스택에서 pop하여 꺼낸다. 자바스크립트는 이 코드를 스케줄링하는 스택이 하나뿐이기 때문에 한 번에 하나의 작업만 처리할 수 있어서 싱글 스레드 언어라고 하는 것이다. 그렇다면 자바스크립트는 병렬처리를 할 수 없는 것인가? NO! 그래서 나온 것이 비동기 콜백! Asynchronous Callback 비동기 콜백 Asynchronous Callback 자바스크립트가 브라우저 엔진에.. Javascript) Web Storage Web Storage 키 밸류 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴 쿠키는 한 번 설정하면 이후 모든 웹 요청에 이 쿠키가 포함되어 서버로 전송되지만 웹 저장소에 저장된 데이터는 클라이언트에 존재할 뿐 서버로 전송이 이어지지 않아 네트워크 트래픽을 줄인다. 문자열 기반 데이터 이외에 구조회된 객체를 저장할 수 있다. 쿠키는 하나당 최대 4KB로 한 사이트당 최대 20개까지로 용량 제한이 있지만 웹저장소는 용량제한이 없다. 쿠키는 만료 일자를 지정하여 그 날짜에 제거되고 만약 만료 일자를 지정하지 않으면 세션 쿠키가 된다. 웹저장소는 만료 기간 설정 자체가 없어 한번 저장한 데이터는 영구적으로 저장된다. Local Storage 명시적으로 지우지 않는 이상 영구적 보관이 가능하다... 이전 1 2 3 다음
