분류 전체보기92 이벤트 루프(Event Loop)란? 이벤트 루프(Event Loop)를 알려면 우선 자바스크립트(JavaScript)에 대해 알아야 한다. 자바스크립트는 싱글 스레드 프로그래밍 언어(Single Thread Programming)이다.즉, 싱글 스레드 런타임(Single Thread Runtime)을 가지고 있다는 말인데 이것은 한 번에 하나의 싱글 콜 스택(Single Call Stack)만을 가지고 있다는 말이다. 이 의미는 싱글 스레드라는 의미이며 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것이다. (one thread == one call stack == on thing at a time) 방금 말한 내용을 시각화해 보면 다음과 같다.콜 스택은 data Structure로 실행되는 순서를 기억하고 있다. 따라서 함수를.. 2024. 8. 21. 프론트엔드 관련 CS 생활하면서 받았던 CS 관련 질문과 답을 정리하려고 한다. 추가 질문을 받는 대로 업데이트를 할 예정이다.1. Array와 List의 차이(1) 배열 Array배열은 원소들을 연속적인 메모리 공간에 저장하는 자료구조이다. 배열의 크기는 고정되어 있다.장점으론 인덱스를 통한 빠른 데이터 접근이 가능하지만 단점으론 삽입과 삭제가 번거롭고 시간이 오래 걸린다. (2) 리스트 List리스트는 비연속적인 메모리 공간에 저장을 하는 자료구조이다. 리스트의 크기는 가변적이다.장점으론 사입과 삭제가 빠르지만 순차적으로 접근해야 하는 단점이 있다. 2. Virtual Dom을 사용하는 이유(1) Virtual Dom 이란?실제 DOM 문서를 추상화한 개념으로 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 .. 2024. 8. 13. Next.js란? 넥스트는 리액트로 웹을 편하게 개발할 수 있도록 도와주는 프레임워크이다. 초기에는 주로 서버 사이드 렌더링(SSR, Server Side Rendering) 프레임워크의 역할을 했지만, 요즘에는 리액트 프로젝트 시작할 때 권장되는 프레임 워크이다. 주요 특징CRA(Create React App)이나 Create Vite보다 더 많은 편의 기능을 제공한다.라우팅 : 리액트 라우터를 별도로 구성하지 않아도 되는 파일 기반 라우팅 시스템을 제공한다. 렌더링 : 클라이언트 사이드 렌더링뿐만 아니라 서버 사이드 렌더링도 지원한다.데이터 호출 : fetch를 확장해서 제공할 뿐만 아니라 데이터 캐싱, 유효성 확인 등의 기능을 제공한다.스타일링 : CSS 모듈 방식, CSS in JS 방식, Tailwind를 바로 .. 2024. 8. 10. Webpack의 주요 속성 웹팩의 주요 속성 4가지를 도식으로 나타내면 아래 그림과 같다.1. Entry : Webpack을 실행할 대상 file 즉, 진입점2. Output : Webpack의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의3. Loader : JS파일이 아닌 CSS, 이미지 같은 파일을 웹팩이 인식하게 해주는 속성. 오른쪽에서 왼쪽 순으로 적용4. Plugin : Webpack으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용하는 속성. Webpack의 전반적인 제어권을 가지고 있다. 아래는 전체적인 Webpack 예시이다.var path = require('path')var webpack = require('webpack')module.exports = { entry:.. 2024. 8. 9. 이전 1 2 3 4 ··· 23 다음
