OSI 7계층 전 세계적으로 가장 기반이 되고있는 네트워크 표준 모델이다. 네트워크 통신에 사용되는 전반적인 프로토콜이 모두 포함되어 있다. layer 1 - 물리(Physical) 계층 가장 첫번 째 단계인 물리 계층은 우리 피씨 혹은 노트북과 연결되어있는 와이파이 혹은 이더넷 연결 선으로 연결되어있는 케이블로 데이터를 전달하는 계층을 말한...

메모리 구조 프로세스와 쓰레드를 이해하기 전에 메모리 구조를 먼저 알고가면 좀 더 쉽게 이해가 가능하다. 출처: http://www.tcpschool.com/ 이미지와 같이 메모리는 Stack, Heap, Data, Code 영역으로 구분된다. Stack - 함수 호출 시 생성되는 지역변수와 매개변수를 저장하는 메모리 영역 Heap ...

React SSR Gatsby와 NextJS를 비교하기 전에 왜 이런 프레임워크를 써야하는지 알 필요가 있다. React에서 CRA로 프로젝트를 생성하게되면 SPA 기반 라이브러리로 CSR을 사용해 개발을 하게 된다. CSR이 가지는 장점도 있겠지만, SEO와 초기 렌더링 문제 등 CSR의 한계로 인해 오늘 날은 CSR + SSR 형태로 많이 개발을...

React v18 React에서 중요시하는 동시성에 관련한 사항들과 Suspense가 주요 업데이트 사항인것 같다. Automatic Batching (자동 일괄 처리) batching 처리란? 동일한 클릭 이벤트 내에 두 개의 상태 업데이트가 있는 경우 React는 항상 이를 하나의 재렌더링으로 일괄 처리한다. 다음 코드를 실행하면 클릭할 때...

1. 트리쉐이킹 NextJs 웹 어플리케이션 최적화 (트리셰이킹) 포스팅에서 설명처럼 사용하지 않는 모듈들을 제거하여 실제로 사용하는 모듈만을 남겨 파일의 크기를 줄이는 방식이다. 2. 블록 리소스 최적하 DOM (Document Object Model) 과 브라우저 렌더링 이 포스팅에서 설명했듯이 HTML 파싱을 차단하는 블록 리소스를 태그의 ...

Tree Shaking Tree Shaking은 실제로 사용하는 모듈만 로딩하게 하여 번들의 사이즈를 줄여 빌드 시간과 렌더링 시간감소를 기대할 수 있다. bundle-analyzer을 통해 번들 크기 시각화 @next/bundle/analyzer NextJs에선 위의 패키지를 통해 빌드 프로세스에서 번들링 된 패키지 크기를 시각화 하여...

NextJs Environmnet Variable NextJs에선 .env.local을 통해 로드 된 모든 환경변수를 사용할 수 있다. .env.local DB_HOST=localhost DB_USER=root DB_PASS=1234 위와 같이 설정하고 사용하려는데 계속 undefined가 표시되더라 그래서 NextJS 공식 문서를 다시 살펴...

여담 BlockReview라는 프로젝트를 진행하면서 리뷰를 NFT화 하는 Contract를 만들었는데 NFT를 저장할 때 통상 IPFS라는 시스템에 저장하게 되더라 일반 URL 저장과 무엇이 다른지 한 번 정리해보려고한다. IPFS 공식 문서에서는 IPFS는 파일, 웹 사이트, 응용 프로그램 및 데이터를 저장하고 액세스 하기 위한 분산 시스템이란...

블록체인의 채굴 블록체인에서의 '채굴' 이라는 단어는 사실 우리 사회적으로 통용되는 귀금속의 '채굴'과 비슷한 부분이 있지만, 엄연히 따지면 다르다. 블록체인의 채굴의 주된 목적은 보상금이나 새로운 코인의 생성이 아니다. 코인은 그저 블록체인에서 채굴 프로세스에 대한 인센티브일 뿐이다. 블록 생성의 보상으로 채굴자에게 주는 코인은 채굴자들이 네트워...

라이브러리 3개의 라이브러리를 다운받는다. recoil - 지갑의 address와 provider 등을 status 에 저장하기 위해서 ethers.js - Ethereum 블록체인을 JavaScript로 상호작용할 수 있게 해주는 라이브러리이다. web3modal - WalletConnect, MetaMask 등의 여러 지갑을 dapp에서 ...