본문 바로가기

TIL/2022 TIL86

22.06.28 TIL NEXT.js + typescript: 초기세팅 (오늘의집 클론코딩 초기세팅) 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을 실행시킬 수 있당.. 이제 타입스크립트 관련.. 2022. 6. 28.
22.06.27 TIL Call Stack Javascript는 단일 스레드 단일 동시(싱글스레드) 언어입니다. 이 말은 결국 한번에 하나의 싱글 콜 스택만을 가지고 있다는 말입니다. 즉, 한 번에 하나의 작업 또는 한 번에 코드 조각을 처리할 수 있습니다. 힙, 큐와 같은 다른 부분과 함께 Javascript 동시성 모델을 구성 하는 단일 호출 스택 이 있습니다(V8 내부에서 구현됨). 1. 콜스택 기본적으로 우리가 있는 프로그램에서 함수 호출을 기록하는 데이터 구조입니다. 실행할 함수를 호출하면, 스택에 무언가를 push하고 함수에서 돌아올 때 스택의 맨 위에서 pop합니다. 스택은 쌓아 올리는 것입니다. 자바스크립트 함수를 그 스택 위에 올리고, 함수를 다 실행하면 제거합니다. 스택을 다 처리하면 ? 실행시킬 것이 없어집니다. 리스트가 존재.. 2022. 6. 27.
2022.06.23 TIL 리액트 18버전 리액트 18버전에서 추가된 사항은 자동 배치, 동시성 제어 기능, 서스펜스를 지원하는 새로운 서버 사이드 렌더링 아키텍처입니다. 1️⃣ 자동배치 (Automatic Batching) 배치란, 리액트가 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링(re-render)으로 묶는 작업을 뜻합니다. // ~React 17 ReactDOM.render(, container); // React 18 const root = ReactDOM.createRoot(container); root.render(); 이 변경은 단순하게 인터페이스만 바뀌는 것이 아닙니다. 기존의 render 함수는, 컴포넌트 트리를 React 17과 그 이전의 동작과 동일한 방식으로 동작합니다. 새로운 createRoot 함.. 2022. 6. 23.
2022.06.21 TIL 리액트 타입스크립트 적용하여 다크모드 만들기 타!입!스크립트! 한번쯤 써보고 싶었다. 우선 타입스크립트 설치 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 .. 2022. 6. 21.
2022.06.20 TIL 스레드란 프로세스가 뭔가요? 프로세스는 운영체제로부터 자원을 할당받은 작업의 단위이다 스레드가 뭔가요? 스레드는 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위이다 프로그램 > 프로세스 > 스레드 📌 프로세스와 스레드는 어떤 차이가 있나요? 그냥 면접관이 프로세스와 스레드의 차이가 궁금해서 물어볼까? 아니다. 기본적인 이유는 본문 맨 위에서 언급했듯 지원자가 프로그램, 프로세스, 스레드에 대한 기본 개념에 대해 잘 이해하고 있는지 확인하기 위함이다. 프로세스와 스레드는 개념의 범위부터 다르다. 스레드는 프로세스 안에 포함되어 있기 때문이다. 프로세스는 프로그램을 실행하는 순간 해당 파일이 컴퓨터 메모리에 올라가게 되고, 이 동적인 상태의 프로그램을 프로세스라고 한다. 스레드는 프로세스를 구성하는 더 작은 실.. 2022. 6. 21.
2022.06.16 TIL ( 웹팩이란 ) 🍄 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(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 }.. 2022. 6. 16.

티스토리툴바