오늘의 CODE

우선 react로 설치한 뒤 아래의 순서에 맞춰 지갑을 연동해보았다. 만약 아래와 같이 진행했지만 뭔가 정상적이지 않다면 오타의 가능성이나 버전을 먼저 확인해보길 바란다. 멀고도 험한.. 블록체인의 길.. 걸음마부터 출발! 설치 npm i @web3-react/core @ethersproject/providers 설정 설치한 @web3-react/core에서 제공하는 Web3ReactProvider를 App root의 provider로 제공하고 web3 객체를 인스턴스화 하는 getLibrary 함수를 정의하여 props로 전달한다. src/index.js import React, { StrictMode } from 'react'; import ReactDOM from 'react-dom/client';..

package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다. 일반적으로 Root 디렉토리에 위치한다. npm init 으로 package.json을 생성했다면 터미널에서 입력 프로세스와 함께 프로젝트 정보는 이미 name(프로젝트명)과 version(1.0.0)이 자동 입력되어 생성되었을 것이다. 패키지 변경은 버전 변경과 함께 제공되어야 한다는 것만 우선 기억하도록 하자. 이번 글은 패키지 정보에 포커스를 맞출 것이므로 프로젝트 정보에 대한 추가 설명을 진행하지 않겠다. 패키지와 모듈 1. 패키지 패키지는 package.json으로 설명되는 파일 또는 디렉토리이다. 패키지는 npm 레지스트리에 공개되기 위해 반드시 package.json 파일을 가지고 있어야 한..

클라이언트에서 요청(request)를 보내면 서버는 요청을 처리해서 응답(response)을 한다. 이 때 브라우저와 서버간에 데이터를 주고 받기 위한 방식으로 HTTP 프로토콜을 사용한다. HTTP 프로토콜이란 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 상호간에 정의한 (데이터 교환 교환을 위한)규칙을 말한다. HTTP 프로토콜은 서버에 연결하고 요청해서 응답을 받으면 연결을 끊어버리는 Connectionless(비연결지향)와 연결을 끊는 순간 통신이 끝나며 상태 정보를 유지 않는 Stateless(상태정보비유지)라는 특징을 가진다. 이러한 특징 때문에 세션과 같은 별도의 추가 정보를 관리하지 않기 때문에 이러한 추가 정보를 가지고 있어야 하는 상황에는 쿠키, 세션 등을 이용해 클라이언트..

클론 코딩 책을 보고 따라하던 중 기재된 내용과는 다르게 자꾸 에러가 나는 상황이 발생했다. 아무래도 책이다보니 출판 후 업데이트 되기가... ㅎㅎ React-router가 v6로 업데이트 되어 생기는 에러가 대다수였다. 최신 뉴스는 아니었지만 그동안 React에 소홀했던 나에겐(반성반성😑 ) 당황스러웠다. 내용을 잊지 않기 위해 정리해본다. Migration 프로세스 1. React V16.8 이상으로 업그레이드 2. React Router V5.1 이상으로 업그레이드 내부의 모두 제거 커스텀 리팩토링 - components나 render 속성을 사용하는 대신 children 속성 사용 3. React Router V6으로 업그레이드 V6버전은 V5버전 대비 번들 사이즈가 많이 줄었다고 한다. (이전 ..

회사에서 지난 프로젝트의 소스코드를 유지, 수정하고 새로운 기능을 추가해야 하는 추가 프로젝트에 참여하게 됐다. 기존 소스 코드는 React로 만들어진 프로그램으로 아직 수정될 내용이나 추가될 기능에 대한 기획서를 받아보지 못한 상태에 코드 분석을 먼저 진행하기 위해 소스코드를 클론했다. 근데... npm install을 해도 아무리 해도 node_modules 폴더도 생성되지 않았으며 당연히 실행되지 않았다. 검색 및 지인 찬스를 이용해 결국 버전이 너무 낮은 모듈 때문에 그랬던 것으로 확인했다. 그도 그럴 것이 소스코드 마지막 수정이 3년전... 해당 모듈을 stable한 버전으로 변경하니 실행되는 것을 확인했다. 어찌저찌 상황은 해결했지만 보다 근본적인 의문이 생겼다. 그동안은 그냥 튜토리얼을 보고..

스택이란? 스택(STACK)은 객체들의 집합소로 데이터를 기록하는 구조라고 보면된다. 스택이란 쌓아올린다는 것을 의미한다. 따라서, 스택 구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아올린 형태의 구조를 말한다. 스택의 특징 스택은 같은 구조와 크기의 자료를 정해진 방향으로만 쌓을 수 있고, 정해진 곳을 통해서만 접근할 수 있다. 아래가 막혀있고 위가 뚫린 형태로 차곡차곡 쌓는 구조로 볼 수 있는데, 이러한 경우 가장 위의 자료가 가장 최근에 쌓인 자료가 된다. 스택은 시간 순서에 따라 자료가 쌓여 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는 구조적 특징을 가진다. 이를 후입선출(LIFO, Last-In-First-Out)구조라고 한다. 스택에서 삽입은 PUSH, 삭제는 POP이라는 용어로 사용하고 ..

arr.reduce(callback [,initialValue]) 자바스크립트의 reduce 함수는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환한다. 파라미터 1. callback function accumulator - accumulator는 callback 함수의 반환값을 누적 currentValue - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 callback 함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환한다. 2. initialValue(Optional) 최초 callback 함수 실행 시 accumlator 인수에 제..

요소를 더하거나 지우기 Array.push(...items) - 맨 끝에 요소 추가 const list = [1, 2, 3, 4, 5]; list.push(6); // 6 list; // [1, 2, 3, 4, 5, 6] Array.pop() - 맨 끝 요소 추출 const list = [1, 2, 3, 4, 5]; list.pop(); // 5 list; // [1, 2, 3, 4] Array.unshift() - 맨 앞에 요소 추가 const list = [1, 2, 3, 4, 5]; list.unshift(0); // 0 list; // [0, 1, 2, 3, 4, 5] Array.shift() - 맨 앞에 요소 추출 const list = [1, 2, 3, 4, 5]; list.shift(); /..

undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. null과 undefined는 둘다 Javascript의 여섯가지 기본값에 포함되며, Javascript의 falsy value에 포함된다. 여섯가지 기본값(Six primitive value in Javascript) Boolean Null Undefined Number String Symbol falsy value false 0 (zero) "" (empty) null undefined NaN (Not a Number) typeof를 통해 자료형을 확인해보면 typeof null // 'object' typeof undefin..

문제. 노치라는 영역은 웹뷰에서는 문제없이 노출되지만 아이폰으로 확인 시 가려지거나 짤려보이는 현상을 말한다. 노치는 다른 표현으로 안전영역(safe Area)라고 할 수 있다. 아이폰 화면의 레이아웃이 변경되면서 생긴 문제로 X버전부터 이런 문제가 발생하기 시작했다. 해결. 1. 전체 화면 설정 meta 태그를 추가한다. viewport-fit이란? viewport에 새로 추가된 속성으로 단순한 사각형 모양의 디스플레이가 아닌 디스플레이를 위한 속성이다. vieport-fit을 지정하지 않으면 기본값은 auto로 콘텐츠를 모두 보여줄 수 있도로 콘텐츠를 축소하여 보여준다. viewport-fit을 위와 같이 cover로 지정 시 viewport를 스크린 전체로 확대한다. 아이폰X가 나오면서 단순히 네모..