프로젝트 관련 개념 정리

오미희·2021년 12월 3일
0

project

목록 보기
1/1

TypeScript

: 자바스크립트 기반의 정적 타입 문법이 추가된 프로그래밍 언어

  • 정적 타입의 컴파일 언어로, 바벨을 통해 자바스크립트 코드로 변환.
  • 타입스크립트는 ES6(ECMASCript 6)문법을 포함하며, 클래스 인터페이스, 상속 모듈 등과 같은 객체 지향 프로그래밍 패턴 제공.

타입스크립트로 전환

  • 자바스크립트용 타입스크립트 컴파일러 사용
    //tsconfig.json파일을 통해 컴파일러 설정 세팅
{
"complierOptions":{
  	 "allowJs":true   
  	 "checkJs":false  //자바스크립트 파일에 대한 타입 체크
  	 "outDir":"./Dist"
  	 "rootDir":"./src"
  	 "strict":false
   }
}
  • 타입스크립트 기본 문법과 인터페이스
    ex) Boolean / Number / String / Object / Array / Any / Void 등 
export interface DealState {
    dealInfo:object,
    orderInfo:Array<string | number | Object>,
    orderNum:number
}
// interface => 타입을 정의한 규칙

타입스크립트 참고 사이트
https://www.s-core.co.kr/insight/view/%ED%99%9C%EC%9A%A9%EB%8F%84%EA%B0%80-%EB%86%92%EC%95%84%EC%A7%80%EB%8A%94-%EC%9B%B9-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%96%B8%EC%96%B4-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD/

React

: 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

  • SPA ( Single Page Application )
  • 컴포넌트 기반
  • html에서 바로 react 경험하기 // head부분에 아래 코드 추가
<!-- react사용을 위해 반드시 필요한 것 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 리엑트에서 자바스크립트 문법 사용을 가능하게 해주는 자바스크립트 컴파일러 jsx문법 사용 가능. -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

react 공식 문서
https://ko.reactjs.org/docs/introducing-jsx.html
react 참고 공식 git
https://github.com/ustwo/ustwo.com-frontend/tree/master/src/app/components
babel 관련 개념 참고 블로그
https://ljs0705.medium.com/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a

Next.js

: 서버사이드 렌더링을 제공하는 리엑트 프레임워크

// 리엑트의 SSR을 쉽게 구현할 수 있게 함. (리엑트 자체로도 SSR 구현을 하는 것이 가능은 함)

  • 기본적으로 SSR, 페이지 변경시에는 CSR방식으로 작동(자연스러운 페이지 전환 가능).

서버사이드렌더링 ( SSR : Server Side Rendering )

: 페이지가 전환될 때마다 새로운 페이지 전체를 렌더링 / 페이지 요청시마다 페이지 새로고침 발생 -> 페이지가 전환될 때 화면이 깜빡거림

  • 검색엔진 최적화 ( SEO )
  • 최초 페이지 렌더링을 빠름.
  • 서버에서 미리 html 페이지를 그려서 브라우저로 보내줌.
    => 컴포넌트가 최초로 생성되는 시점이 브라우저가 아닌 node.js환경임.

클라이언트사이드렌더링 ( CSR : Client Side Rendering )

: 처음 렌더링된 한 페이지에서 사용자의 필요에 따라 부분적으로 필요한 부분만 새롭게 렌더링됨.

  • 검색엔진 최적화 어려움
  • 최초 렌더링 오래걸림 --> 사용자 이탈 가능성 커짐
    // 최초 페이지 렌더링시 필요한 모든 데이터를 모두 불러옴.
  • 페이지 전환이 빠르고 자연스러움.
  • 빈 html 페이지를 받아 브라우저를 그려줌.

검색엔진최적화 ( SEO : Search Engine Optimiztion )

: 구글 네이버 등에서 검색시에 사용자에게 본인의 사이트가 가능한 많이 노출될 수 있도록 하는 것.
-- Next.js 를 사용하는 가장 큰 이유 중 하나.

검색 엔진 작동원리

: 검색엔진은 사이트의 데이터 검색시에 HTML파일을 통해 데이터를 검색
-- CSR은 사용자가 페이지에 들어와 해당 페이지를 요청하기 이전까지 데이터가 없는 빈 페이지 상태이므로 검색 엔진에 노출되기 어려움.
-- SSR은 브라우저에서 이미 서버에서 페이지를 그려서 전달하기 때문에 HTML페이지는 검색을 위해 요구되는 데이터를 이미 담고있음.

HMR ( Hot Module Replacement )

: webpack이 제공하는 유용한 기능
: 브라우저의 새로고침 없이 빌드한 결과물이 실시간으로 반영될 수 있도록 하는 것.
// 나중에 공부해볼 것

검색엔진관련 참고 블로그
https://ivorycode.tistory.com/entry/Nextjs%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0
서버사이드렌더링 참고 블로그
https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC%E1%84%8B%E1%85%B3%E1%86%AF-%E1%84%8B%E1%85%AB-%E1%84%8A%E1%85%B3%E1%86%AF%E1%84%81%E1%85%A1
서버사이드렌더링 관련 참고 블로그
https://velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

Node.Js

KIP-17

1. KIP-7

: 대체가능한 토큰 (Fungible Token)에 대한 표준

  • KIP-7은 ERC-20에서 파생

* 대체가능한 토큰

: 각 토큰 단위가 동일한 가치를 지니며 호환이 가능한 토큰

2. KIP-17

: 대체 불가능한 토큰 (NFT : Non-Fungible Token)

  • KIP-17은 ERC-721 토큰에서 파생

* 대체불가능한 토큰

: 고유한 가치를 지니고 있어 토큰 간의 호환이 불가능한 토큰

NFT

  • 블록체인 기술을 활용하여 고유한 해쉬값 부여하여, 디지털 소유권을 보장하고 거래 증명을 가능케 함.
  • 실물 자산과 예술품 사치품 수집품의 토큰화에 활용됨
  • NFT를 생성하는 다양한 프레임워크 존재 ex) ERC-721 / kip-17
  • KIP-17은 카카오의 계열의 그라운드X에서 자체 개발된 NFT표준.

kip-17 참고 사이트
https://support.klaytnapi.com/hc/ko/articles/4403232605711-KCT-KIP-7-KIP-17-%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94-
NFT 관련 참고 사이트
https://brunch.co.kr/@techmmedia/541
클레이튼과 트러플을 활용하여 나만의 NFT만들기 참고 사이트
https://ichi.pro/ko/klaytneseo-truffleeul-sayonghayeo-jasinman-ui-nftleul-mandeuneun-bangbeob-209666543079665

Caver.js

  • 개발자가 HTTP 또는 웹소켓 연결을 사용하여 Klaytn 노드와의 상호작용을 가능케 하는 자바스크립트 API 라이브러리.
  • 클레이튼 트랜잭션 지원
  • 클레이튼 네트워크에서 스마트 컨트랙트를 배포하고 실행하기 위한 자바스크립트 스마트 컨트랙트 패키지

caver.js관련 클레이튼 공식문서 사이트
https://ko.docs.klaytn.com/bapp/sdk/caver-js
caver.js github
https://github.com/klaytn/caver-js

MariaDB

S3 ( Amazon Simple Storage Service )

  • 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스
  • 아마존에서 제공하는 웹서비스 인터페이스를 사용하여 언제 어디서나 원하는 데이터에 대한 저장과 검색이 가능.
  • S3의 버킷은 무한대의 객체 저장 가능
  • 사용한 스트리지만큼의 요금 부과
  • HTTPS 프로토콜을 사용하여 SSL로 암호화된 엔드포인트를 통해 안전한 데이터 업로드와 다운로드가 가능
  • 객체(Object) : S3에 저장되는 기본 단위
  • 버킷(Bucket) : S3에 생성하는 최상위 디렉토리 개념

아마존 s3 공식 사이트
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/Welcome.html
s3 관련 참고 블로그
https://usefultoknow.tistory.com/entry/Amazon-S3%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

AWS

profile
오미희
안녕하세요

0개의 댓글