next js 의 장점 검색앤진최적화(Search engine Optimization, SEO) 빠른 첫페이지 로딩 & 새로고침시 화면 번쩍임 X pages폴더는 라우터 next로 앱 설치 yarn create next-app --typescript or npx create-next-app --typescript create-react-app은 뒤에 파일명을 붙여줘야 되지만, next로 만들게 되면 이건 따로 안해줘도 된다 ㅎㅎ 앱을 만들면서 이름 뭐로 할건지 물어보기 때문 !! 이렇게 파일들이 생겼다 ! 와우 신기 ! yarn add next react react-dom yarn dev yarn start가 아닌 yarn dev로 localhost:3000을 실행시킬 수 있당.. 이제 타입스크립트 관련..

Javascript는 단일 스레드 단일 동시(싱글스레드) 언어입니다. 이 말은 결국 한번에 하나의 싱글 콜 스택만을 가지고 있다는 말입니다. 즉, 한 번에 하나의 작업 또는 한 번에 코드 조각을 처리할 수 있습니다. 힙, 큐와 같은 다른 부분과 함께 Javascript 동시성 모델을 구성 하는 단일 호출 스택 이 있습니다(V8 내부에서 구현됨). 1. 콜스택 기본적으로 우리가 있는 프로그램에서 함수 호출을 기록하는 데이터 구조입니다. 실행할 함수를 호출하면, 스택에 무언가를 push하고 함수에서 돌아올 때 스택의 맨 위에서 pop합니다. 스택은 쌓아 올리는 것입니다. 자바스크립트 함수를 그 스택 위에 올리고, 함수를 다 실행하면 제거합니다. 스택을 다 처리하면 ? 실행시킬 것이 없어집니다. 리스트가 존재..

리액트 18버전에서 추가된 사항은 자동 배치, 동시성 제어 기능, 서스펜스를 지원하는 새로운 서버 사이드 렌더링 아키텍처입니다. 1️⃣ 자동배치 (Automatic Batching) 배치란, 리액트가 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링(re-render)으로 묶는 작업을 뜻합니다. // ~React 17 ReactDOM.render(, container); // React 18 const root = ReactDOM.createRoot(container); root.render(); 이 변경은 단순하게 인터페이스만 바뀌는 것이 아닙니다. 기존의 render 함수는, 컴포넌트 트리를 React 17과 그 이전의 동작과 동일한 방식으로 동작합니다. 새로운 createRoot 함..

타!입!스크립트! 한번쯤 써보고 싶었다. 우선 타입스크립트 설치 yarn create react-app "앱이름" --template typescript 리액트 앱을 생성할 때 같이 깔아주거나 혹은 만들어진 리액트앱에 타입스크립트를 추가할 때는 터미널에 이 명령어를 입력해주면 된다. npm install --save typescript @types/node @types/react @types/react-dom @types/jest yarn add typescript @types/node @types/react @types/react-dom @types/jest 그런 다음 이렇게 타입스크립트로 설정된 채 리액트 앱이 만들어진 것을 볼 수 있다. yarn add @types/styled-components ..

프로세스가 뭔가요? 프로세스는 운영체제로부터 자원을 할당받은 작업의 단위이다 스레드가 뭔가요? 스레드는 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위이다 프로그램 > 프로세스 > 스레드 📌 프로세스와 스레드는 어떤 차이가 있나요? 그냥 면접관이 프로세스와 스레드의 차이가 궁금해서 물어볼까? 아니다. 기본적인 이유는 본문 맨 위에서 언급했듯 지원자가 프로그램, 프로세스, 스레드에 대한 기본 개념에 대해 잘 이해하고 있는지 확인하기 위함이다. 프로세스와 스레드는 개념의 범위부터 다르다. 스레드는 프로세스 안에 포함되어 있기 때문이다. 프로세스는 프로그램을 실행하는 순간 해당 파일이 컴퓨터 메모리에 올라가게 되고, 이 동적인 상태의 프로그램을 프로세스라고 한다. 스레드는 프로세스를 구성하는 더 작은 실..

🍄 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 🍄 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 🍄 모듈이란? 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // 📁 math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const PI = 3.14; export { sum, substract, PI }..