https://nivo.rocks/components/
Components | nivo
nivo.rocks
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
| [AWS] 여러가지 알아야 할것들 (3) | 2024.07.12 |
|---|---|
| Docker 간단히 이해하기 (0) | 2024.07.11 |
| REST API (0) | 2017.06.20 |
| react 시작하기!! (0) | 2016.12.29 |
VPC의 구성
VPC(Virtual Private Cloud)는 AWS의 사용자 젖용 가상 네트워크 입니다.
각 지역별 리즌들이 있고 이 리즌 내에 VPC를 구성 하는 것이죠.
VPC내에 하나 이상의 서브넷을 구성할 수 있습니다.
기본 VPC는 Amazon VPC를 사용하기 시작하는 경우 각 AWS 리전에 기본 VPC가 있습니다. 기본 VPC는 각 가용 영역의 퍼블릭 서브넷, 인터넷 게이트웨이 및 DNS 확인 활성화 설정과 함께 제공됩니다. 따라서 기본 VPC로 Amazon EC2 인스턴스를 즉시 시작할 수 있습니다. 기본 VPC에서 Elastic Load Balancing, Amazon RDS, Amazon EMR 같은 서비스를 사용할 수도 있습니다.
VPC를 생성할 경우
다음 절차에 따라 Virtual Private Cloud(VPC)를 생성합니다. VPC에서 AWS 리소스를 생성하려면 먼저 VPC에 서브넷, 라우팅 테이블, 게이트웨이와 같은 추가 리소스가 있어야 합니다
ECS
ECS 는 docker 와 달리 bridge network 를 기본 사용하지 않습니다.
host network 를 사용합니다.
즉, 하나의 Task Definition 에서 정의된 컨테이너들은 동일한 EC2 내에 호스트 네트워크를 그대로 사용한합니다.
따라서 localhost 로 컨테이너간 통신이 가능합니다.
만약 실행시 위와 같은 에러가 발생했다면 아마 나처럼 M1, M2 macOS 를 사용중일 것입니다.
AWS 도 차츰 arm 아키텍처를 적극지원하지만, 아직은 대다수의 환경이 amd64(intel) 로 되어 있는 것은 어쩔 수없습니다.
원인
docker image build 는 M1 (arm64) 에서 했기 때문에 arm64 이미지를 생성한 상태고, ECS Fargate 아키텍쳐는 x86_64 (amd64) 기 때문입니다.
즉 이미지를 만든 provider와 task executor 실행 환경이 다르기 때문에 발생한 문제입니다.
| [React] Components (0) | 2024.09.07 |
|---|---|
| Docker 간단히 이해하기 (0) | 2024.07.11 |
| REST API (0) | 2017.06.20 |
| react 시작하기!! (0) | 2016.12.29 |
| [React] Components (0) | 2024.09.07 |
|---|---|
| [AWS] 여러가지 알아야 할것들 (3) | 2024.07.12 |
| REST API (0) | 2017.06.20 |
| react 시작하기!! (0) | 2016.12.29 |
REST (Representaional Safe Transfer , Representaional State Transfer)
웹 창시자 중의 한사람인 로이 필딩(Roy Fielding)이 2000년에 발표한 논문에 의해서 소개되었습니다. 현재의 아키텍처가 웹의 본래 설계의 우수성을 많이 사용하지 못하고 있다고 판단했기 때문에 웹의 장점을 최대한 활용할 수 있는 네트워크 기반의 아키텍처를 소개했는데, 이것이 바로 REST입니다.
REST는 근래에 들어 HTTP와 JSON을 함께 사용하여 OPEN API를 구현하는 방법으로 주류를 이루고 있으며, 대부분의 OPEN API는 이 REST 아키텍처를 기반으로 설계 및 구현되고 있습니다.
REST는 크게 리소스, 메서드 , 메세지 3가지 요소로 구성됩니다.
예를 들어서 "이름이 Terry 인 사용자를 생성한다" 라는 호출이 있을때 '사용자'는 생성되는 리소스, '생성한다'라는 행위는 메소드, 그리고 '이름이 Terry인 사용자'는 메세지가 됩니다.
이를 REST 형태로 표현해보면 ,
'생성하다' 메소드 - HTTP POST 메서드
'사용자' 리소스 - http://myweb/users 라는 형태의 uri
'생성하고자 하는 사용자 Terry' - JSON 문서로 표기
HTTP POST , http://myweb/users/
{
"users":{
"name":"terry"
}
}
REST에서는 앞에서 잠깐 언급한 바와 같이 행위에 대한 메서드를 HTTP 메서드를 그대로 사용합니다.
HTTP에는 여러가지 메서드가 있지만, REST에서는 CRUD(Create Read Update Delete) 에 해당하는 4가지의 메소드만 사용합니다.
POST - Create
GET - Select (의미상 Read)
PUT - Update
DELETE - Delete
이와 같이 4개의 method가 CRUD에 대응됩니다.
Idempotent (멱등성) - 몇번을 수행해도 같은 결과가 나오는 것을 의미합니다.
예를 들면, a++ 은 항상 결과가 1이 증가되기 때문에 "Idempotent 하지 않다"고 하고, a=4 는 항상 4가 a에 대입되기 때문에 "Idempotent 하다"고 합니다.
POST 연산은 리소스를 추가하는 연산이기 때문에 Idemopont 하지 않습니다.
GET,PUT,DELETE는 반복 수행해도 Idempotent 합니다.
이 Idempotent의 의미가 중요한 이유는 , REST 는 개별 API를 상태 없이 수행하게 됩니다. 그래서 해당 REST API를 다른 API와 함께 호출하다가 실패하였을 경우에, 트랜젝션 복구를 위해 다시 실행해야 하는 경우가 있는데, Idempotent하지 않은 메소드의 경우에는 기존 상태를 저장했다가 다시 원상복구 해줘야 하지만, Idempotent한 메소드의 경우에는 반복적으로 다시 메소드를 수행해주면 됩니다.
개시물 조회 API를 만들었는데, 개시물을 조회할때마다 조회수를 +1 자동으로 하도록 되어있다면, 조회 실패시에는 -1을 다시 해줘야 합니다.
REST 리소스
REST는 리소스 지향 아키텍처 스타일이라는 정의 답게 모든 것을 리소스, 즉 명사로 표현하며, 각 세부 리소스에는 ID를 붙입니다. 즉, 사용자라는 리소스 타입을 http://myweb/users라고 정의 했다면, terry라는 id를 갖는 리소스는 http://myweb/users 라는 형태로 정의합니다.
REST 의 리소스가 명사의 형태를 띄우다 보니 명령(opertation) 성격의 API를 정의하는 것에서 혼동이 올수 있습니다. 예를 들면 "푸시 메시지를 보낸다"라는 보통 기존의 RPC(Remote Procedure Call)나 함수성 접근에서는 /myweb/sendpush 형태로 정의될 수도 있습니다.
동사를 명사형으로 변경하여 "푸시 메시지 요청을 생성한다" 라는 형태로 정의를 변경하면 POST/myweb/push 형태와 같이 명사형으로 정의 할 수 있습니다.
모든 형태의 명령을 이런 형태로 정의가 가능한 것은 아니지만, 될수 있으면 리소스 기반의 명사 형태로 정의하는 게 REST 형태의 디자인이 됩니다.
예)
생성
HTTP Post, http://myweb/users/
{
"name":"terry",
"address":"seoul"
}
조회
HTTP Get , http://myweb/users/terry
업데이트
HTTP PUT, http://myweb/users/terry
{
"name":"terry",
"address":"suwon"
}
삭제
HTTP DELETE, http://myweb/users/terry
[참고 : 조대협의 서버사이드 대용량 아키텍처와 성능 튜닝 - 조대협]
| [React] Components (0) | 2024.09.07 |
|---|---|
| [AWS] 여러가지 알아야 할것들 (3) | 2024.07.12 |
| Docker 간단히 이해하기 (0) | 2024.07.11 |
| react 시작하기!! (0) | 2016.12.29 |
http://hardworkers.tistory.com/150
react 시작하기!!
http://nepi.tistory.com/entry/React-%EC%8B%9C%EC%9E%91
node js 튜토리얼....렁!!!
https://velopert.com/node-js-tutorials
react , redux , express 등
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
db 는 mongo db
[Webpack]
web 성능개선을 위해 매우 중요!!!
https://webpack.js.org/
http://webpack.github.io/docs/node.js-api.html
webpack.config.js [configuration 파일]
- devtool : 개발환경 관련해서 설정하는 부분.!!!
- 'source-map' : bundle.js 등 으로 합쳐진 코드를 디버깅하기에는 무척 난해함,
개발할때 original source와 mapping 시켜서 디버깅 할 수 있도록 도와주는 툴
---- https://survivejs.com/webpack/building/source-maps/
--- 디버깅을 위해서는 source map이 중요합니다.!!!
- debug...
https://webpack.js.org/concepts/ : 컨셉 page 한눈에 알수 있음.ㅋ
디버깅 환경에서 실행하기.!!!
webpack.config.js 파일에
devtool:'source-map',
을 추가하기!!
npm run development
[김 땡땡]
어제 제가 redux-persist라고 redux 데이터 새로고침해도 유지되게 라이브러리 붙였는데요
window analyzer/system analyzer 등 모든화면에서 괜찮은데
memo list에서 새로고침하면 lockup 비스무리하게 되더라구요
어제보다가 모르겠어서 말긴했는데;; 혹시 여유되시면 한번 봐주세요
새로고침 안했을때는 잘 동작하는데 그화면에서 새로고침하면 bottom navigation이 안먹고 memo 추가하는것도 안되고 락업처럼 되더라구요
redux-persist 적용되고 개발하기 완전 편해짐
-----------------------------------------
[이 땡땡]
packsge.json 파일에서 build부분에 아래처럼 webpack 뒤에 --watch 붙이고
"build": "babel server --out-dir build --presets=es2015 && webpack --watch",
webpack.config.js 파일에서 plugins 내용을 기존꺼 대신
plugins:[
new webpack.HotModuleReplacementPlugin()
]
이렇게 바꾸면 빌드속도가 20초에서 3초정도로 주는거같네요
-----------------------------------------------------
| [React] Components (0) | 2024.09.07 |
|---|---|
| [AWS] 여러가지 알아야 할것들 (3) | 2024.07.12 |
| Docker 간단히 이해하기 (0) | 2024.07.11 |
| REST API (0) | 2017.06.20 |