아이패드와 몇몇 아이폰 기종에서 Date가 안나오고 NaN이라고 뜨는 이슈가 있다. 자바스크립트에서 흔히 사용하는 Date 객체에 String 타입의 날짜를 담아 사용할 때, ex : new Date('2021-11-01'); 사파리에서는 Invalid Date error를 내뱉는다. 해당 이슈를 해결하기 위해 moment.js 날짜 라이브러리를 사용했다. moment.js를 사용하면 모든 기종 및 사파리에서도 사용 가능하다. date 객체를 생성할 때 new Date(); 를 사용한다면 moment.js 에서는 moment();, moment(new Date()); 를 사용하여 현재 날짜를 가져올 수 있다 yarn add moment or npm install moment 해당 라이브러리를 설치 한 후..

React 애플리케이션에서 환경 변수를 설정하고 사용하는 방법은 Create React App, Next.js 등의 프레임워크를 사용하고 있다면, dotenv 모듈을 직접 사용하지 않고도 환경 변수를 사용할 수 있습니다. React에서 환경 변수를 설정하려면, 프로젝트 루트에 .env 파일을 만들고, 그 안에 REACT_APP_ 접두사로 시작하는 환경 변수를 설정하면 됩니다. REACT_APP_API_URL=https://myapi.com REACT_APP_SECRET=mysecretkey 그런 다음 애플리케이션에서 process.env.REACT_APP_API_URL 또는 process.env.REACT_APP_SECRET와 같이 접근할 수 있습니다. console.log(process.env.REAC..

일반적으로 평소 자바스크립트 기반 React 프로젝트를 만들 때 npx create-react-app 프로젝트명 을 한다. TypeScript도 별반 다를게 없다. 뒤에 typescript 로 된 프로젝트를 만든다고 명시해 주기만하면 typescript 기반 react 프로젝트를 만들 수 있다. npx create-react-app 프로젝트명 --template typescript 만들어진 폴더 구조는 아래와 같다. .ts파일이 있는 반면에 .tsx파일도 있다. 이 둘의 차이점은 무엇일까? .ts파일은 pure typescript 파일이다. javascript에서 .js에 대응한다고 생각하면 편하다 .tsx는 typescript의 react문법을 담아내기 위한 확장자 이다. .jsx에 대응한다고 생각하면..

메타마스크를 활용하면 특정 메시지에 서명한 값을 가지고 서버에서 메시지를 검증하여 사용자가 맞는지 확인하여 로그인, 사용자 검증 등에 사용할 수 있다. 아래는 메타마스크의 인스톨 여부와 권한을 요청하는 구문이다. /* Metamask message 서명 함수 */ const signing = () => { let from = user.account; let params = ['Hello']; let method = 'personal_sign'; try { web3.currentProvider.sendAsync( { method, params, from, }, function (err, result) { if (!err) { /* err가 아닐 경우 ... */ } else if (err) { consol..

웹서비스를 하면서 다국어를 지원해야 하는 경우가 있다. 접속하는 국가 또는 지역에 따라서 다른 언어가 자동으로 지원되거나, 웹사이트에서 내에서 언어를 변경하는 기능이 제공 되기도 한다. react-i18next react-i18next는 React와 React Native 에서 사용할 수 있는 국제화 프레임 워크이다. 설치 방법 npm install react-i18next i18next — save react-i18next는 react와 함께 사용할 수 있는 기능을 제공하고, i18next는 다국어 핵심 기능을 제공한다. 사용 방법 다국어 기능을 사용하기 위해서는 i18n 모듈을 임포트 하고 지원하고자 하는 언어별로 리소스를 추가하고 i18n 옵션 설정과 함께 초기화 시켜주면 된다. //i18n.js ..

1. 정의 a) 자료구조란? 대량의 데이터를 효율적으로 관리하기 위해, 데이터를 저장 및 정렬하는 방식을 말한다. 데이터를 어떤 방식으로 저장하고 정렬하느냐에 따라 추출 방식 등 데이터를 처리 및 조작하는데 필요한 코드가 달라진다. 2. 자료구조 (Data Structure) a) 배열(Array) 한가지 데이터 타입의 데이터를 순차적으로 저장 및 정렬하는 자료구조 각 데이터마다 index를 부여하여 데이터 검색에 용이(장점) 배열은 크기가 고정적(단점) 데이터가 삭제되면 배열 전체의 데이터를 재정렬(단점) b) 큐(Queue) FIFO(First In, First Out)방식으로 데이터를 저장 및 정렬하는 자료구조 FIFO방식으로 인해 데이터 삭제시, 재정렬이 필요없다. 운영체제(OS)에서 프로세스 스..