타미월드

리액트 개발일지 로그 기록 2022/05/13

타미힐핑거 — Fri, 13 May 2022 12:59:14 +0900

리액트 개발일지 로그 기록 2022/05/05

타미힐핑거 — Thu, 5 May 2022 15:31:49 +0900

로그 내용

필자는 원체 구글 워크스페이스와 구글 서브 애플리케이션들을 많이 활용해왔다. 최근 프로젝트들을 하면서
GCP(Google Cloud Platform)들도 활용해 보았으며 손쉽고 빠르게 처리 가능한 API token key 발행 등
복잡하지 않고 견고한 구조로 사용 가능한 점이 매우 독보적이었다.
깃허브와 리액트 테스트 프로젝트를 연동해 보기 위해서 깃허브 페이지를 생성 후 페이지 사이트 링크를 구글 도메인 DNS를 활용하여 TYPE A와 TYPE CNAME를 적용하여 도메인 변환에 성공하였다.
로그 기록 5월 5일 기점으로 약 3일간 프로덕션 버전의 필자 포트폴리오를 발행해 볼 생각이다.

커스텀 도메인 깃허브 페이지 가이드

Managing a custom domain for your GitHub Pages site - GitHub Docs

People with admin permissions for a repository can configure a custom domain for a GitHub Pages site. About custom domain configuration Make sure you add your custom domain to your GitHub Pages site before configuring your custom domain with your DNS provi

docs.github.com

구글 도메인 깃허브 페이지 설정 가이드

by WhatsApp FrontEnginner Trent Yang

How to setup google domain for github pages

Github pages is easy to setup, but to attach a custom domain with google domains, you may run into problems. Here is how you can do it in 4 steps.

dev.to

조시욱 포트폴리오 원격저장소

GitHub - github01main/shiwookcho-portpolio-website: 조시욱의 리액트 기반 포트폴리오 웹사이트 입니다.

조시욱의 리액트 기반 포트폴리오 웹사이트 입니다. Contribute to github01main/shiwookcho-portpolio-website development by creating an account on GitHub.

github.com

조시욱 포트폴리오 사이트 DNS converted

Freak Code

www.shiwookcho.com

리액트 개발일지 로그 기록 2022/05/04

타미힐핑거 — Wed, 4 May 2022 21:19:05 +0900

로그 내용

Typescript를 제외하고 오롯이 리액트와 js로만 구현해보려 노력해보았다. 유형을 설정해줘야 하는 파트
에서 쉼없이 막혀버리고 리액트 hook기능에 대한 기술 부족으로 좀 더 많은 기능들을 적용해보려 한다.
결국엔 호환성을 맞추어 google-map-react로 구현을 하였지만 애초에 만들어진 npm 오픈 소스를 활용
하게 되어 새로운 기능들을 추가해보는 것은 비효율적이었다. Typescript로 interface를 직접 만들어 오픈
소스를 만들어보지 않는 이상 typescript template 사용을 권장하지 않는다.
V2.1이었던 NASA API 기반 소스를 V3로 업데이트 후 개별 지오메트리 ID를 먹이면 원하는 자연재해에
대한 값들을 추출해올 수 있었다. 물론 hook기능을 활용한다면 셀렉트 버튼으로 원하는 데이터 값을 초기
에 불러올 수 있을 거 같다.
나사 API를 이용하여 Marker를 찍게 되면 웹사이트가 전반적으로 프레임이 떨어지는 것을 확인할 수 있었다.

NASA_V3 API 리액트 리포지토리

GitHub - github01main/wildfire_nasa_v3_test_project: NASA API + React 17.0.2 Nature Disaster Check Site. this project original s

NASA API + React 17.0.2 Nature Disaster Check Site. this project original source by mr.bradtraversy it's working with feature node.js version and compatibility is checked. - GitHub - github0...

github.com

NASA_V3 API Documentation

Earth Observatory Natural Event Tracker (EONET) | API Documentation

Version 3 is the latest version of the API. Version 2.1 is deprecated and tagged for removal but is still currently available. To see what’s changed, please view the changelog. There are also a few how-tos. Below are descriptions of the data model fields

eonet.gsfc.nasa.gov

리액트 개발일지 로그 기록 2022/05/03

타미힐핑거 — Tue, 3 May 2022 14:39:42 +0900

로그 내용

TypeScript로 전환 완료. ts. tsx확장자 중 리액트를 사용함으로. tsx를 사용. jsx도 섞어 써도 나쁘지
않을 거 같다.
나사 API 적용을 위해선 첫 브라우저 로딩 때부터 모든 libraries DATA의 position값을 불러와야 하는데
해당 위치 반경을 정해서 넣어야 할거같다. 시각적인 요소가 유저에겐 매우 크게 와닿기 때문이다.
한 번에 포지션에 대한 위치 값들을 불러오면 다중 서버를 통해서 처음 거쳐오고 클라이언트가
매번 위치 값에 대한 API request에 대한 비용 절감에도 protocol 다중 요청에 요청을 줄일 수 있을 거라
생각한다.
(개인적인 의견) 리액트 말고도 프레임워크가 다양하게 있는데 VUES.js 는 로고부터 이름도 마음에
하나도 알 수가 없을까 쓰고 싶지 않은 랭킹 1순위....
자바스크립트에서 볼 수 없었던 Type 선언에 대한 엄격한 체크 때문에 유형 값 설정이 안 되어있다면
브라우저 실행 자체가 되지 않았다 다만 아래와 같은 방식으로 유형 설정하게 되면 사용이 가능했다.

// map is not defined what is this type for? so set to any then error code is disappear.

const onLoad = useCallback((map) => (mapRef.current = map), []); [ x ] -> has no type'map'
    
const onLoad = useCallback((map:any) => (mapRef.current = map), []); [ o ] -> has type'map' : any

리액트 개발일지 로그 기록 2022/05/02

타미힐핑거 — Tue, 3 May 2022 14:28:26 +0900

로그 내용

Javascript 파일들을 TypeScript로 전환하기 위해 고려사항을 체크. 사실상 JS 100% 호환성과
Web version의 C 계열 컴파일 언어 지향과 유사함으로 안정성과 유지 및 보수 관리 용이해 보임.
구글 맵스 API, 오토 컴플리트, 등 활용한 구현 완료 근데 새로고침 하면 Marker가 없어지네..?
Marker 재설정을 위해 TypeScript로 전환하여 런타임상 전환 비용을 줄여보려고 함.
노슈켈 or RDBMS 데이터 저장 확립에 대한 고찰을 하였을 때 불필요한 데이터 저장으로 AWS
기능을 줄여 보자.

리액트 개발일지 로그 기록 2022/05/01

타미힐핑거 — Sun, 1 May 2022 00:47:30 +0900

로그 내용

SCSS를 쓰기 위해 node-sass or sass npm으로 설치해서 쓰는데 update log를 살펴보아
Download 횟수와 sass 쪽의 커뮤니티 형성이 컸음. 무료로 사용하는 만큼 새로운 에러 코드나
수정사항을 기여하도록 하자.
빠른 디버깅을 위해 WEBPACK을 사용하려 했으나 PRODUCTION 버전이 아니므로 아직
사용하진 않는다. DEV으로도 굳이 설정해서 할 필요도 없다.
17.02 버전을 베이스 버전으로 가려하였고 다운그레이드를 해보았으나 호환성 버그가 무수하였음
nodejs 최신 버전과 react@dom, react 메인 버전에 맞춰 작업하는 쪽이 좋음 상위 버전이 호환되는
라이브러리를 사용하는쪽으로 지양할 것.

Google-Map-React Repository / npm

타미힐핑거 — Thu, 28 Apr 2022 16:31:49 +0900

2.1.10 Version <- 호환성 문제로 비추천 사용방법과 용도가 다양함.

GitHub - google-map-react/google-map-react: Google map library for react that allows rendering components as markers

Google map library for react that allows rendering components as markers :tada: - GitHub - google-map-react/google-map-react: Google map library for react that allows rendering components as markers

github.com

2.10.1 Version <- 호환성 괜찮음 사용방법에 대한 기술 또한 적당.

@react-google-maps/api

React.js Google Maps API integration. Latest version: 2.10.1, last published: a day ago. Start using @react-google-maps/api in your project by running `npm i @react-google-maps/api`. There are 147 other projects in the npm registry using @react-google-maps

www.npmjs.com

EONET GSFC NASA documentation

타미힐핑거 — Thu, 28 Apr 2022 16:27:07 +0900

Earth Observatory Natural Event Tracker (EONET) | API Documentation

eonet.gsfc.nasa.gov

GCP (Google Cloud Platform) 시작하기

타미힐핑거 — Thu, 28 Apr 2022 13:14:18 +0900

Country : ex) Own Contury

What best describes your organization or needs? : ex) Startup...

Apply for additional credits (optional) :

As part of an organization you may be eligible for an additional $100 in Free Trial credits to help you evaluate Google Cloud. To qualify, just enter a work email for verification.

ex) company e-mail i'm not recommend this :)

Terms of Service

ex) just check for use

Account type

personal / business

ex) choose what is your use identity.

Tax information

personal / business

ex) as i mentioned Tax info gonna change by identity.

Name and address

name

Your name

Address line 1

Your main Address

Address line 2

Your Apartment or house Address

District

Your town or street

City

Your City

Do/Si

as same as above.

Postal Code

Your Postal Code

Phone Number

phone number (option)

주소 영문 변환 사이트

대한민국 - 주소영문변환 주소가

대한민국 도로명주소 우편번호 건물명 지번 주소영문변환 주소가

jusoga.com

GCP (Google Cloud Platform)

타미힐핑거 — Thu, 28 Apr 2022 12:58:00 +0900

$300의 무료 크레딧

신규 고객에게는 Google Cloud Platform을 전체적으로 체험하고 평가할 수 있도록 $300의 무료 크레딧도 제공됩니다. 업그레이드하지 않으면 비용이 청구되지 않습니다.

20여 개의 무료 제품

Compute Engine 및 Cloud Storage를 포함한 인기 제품을 월별 한도까지 무료로 실습해 보세요. 이러한 무료 서비스에는 유효기간이 없습니다.

무료 등급 제품

이러한 제품은 지정된 무료 사용량 한도까지는 사용 시 요금이 부과되지 않습니다. 무료 사용량 한도에는 유효기간이 없지만 변경될 수 있습니다. 자격 요건을 충족하는 고객에게 제공됩니다.

프리 클래스 제품 리스트

Google Cloud 무료 프로그램

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Google Cloud 무료 프로그램 Google Cloud의 기본사항을 알아보려는 신규 사용자이거나 신제품의 혁신적인 기능을 체험

cloud.google.com

구글 클라우드 플랫폼 스택 오버플로우

Human verification

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com