전체 글
-
지긋지긋한 CORS error. 이제 제대로 공부해보자.개발 2022. 7. 30. 14:13
프론트엔드 웹개발을 하다 보면 백엔드 서버에 보낸 요청이 CORS로 돌아오는 경우가 종종 있다. 분명히 나는 curl을 이용해서 테스트 했을 때는 문제가 없었는데 이상하게 브라우저상에서 요청을 보낼 때는 빨간 에러가 돌아오는것이 미칠 노릇일 것이다. 이번 포스트에서는 CORS 에러가 무엇인지, 그리고 어떻게 대응하는 것이 적절한 해결책인지 확인해보고자 한다. 1. CORS CORS는 Cross Origin Resource Sharing에 약자다. Origin은 url 주소상에서 프로토콜, Domain 이름, 포트까지 포함한 개념이다. 예로 로컬에 nextjs 프론트엔드 서버를 3000번으로 띄웠다면 http://localhost:3000 이 Origin에 해당한다. Same Origin이란 같은 Ori..
-
css - flex개발 2022. 7. 11. 20:38
flex는 container 내에 존재하는 요소를 배치하는 방법을 설정 할 수 있다. 기존에 밋밋한 방식 보다 다양하게 배치가 가능해 css 작업시 유용하게 써먹을 수 있다. display: flex, inline-flex flex로 선언된 요소는 부모의 width를 전부 차지하고 내부에 속한 요소는 가로로 정렬된다. inline-flex 로 선언된 요소는 자식 요소가 차지하는 width 만큼만 공간을 차지한다. flex-direction: column flex-direction 값을 설정하면 세로로도 정렬할 수 있다. 크게 row, column 으로 나뉘어 있고 row 인 경우에는 가로, column 인 경우에는 세로다. 이외에도 row-reverse, column-reverse가 있으며 역순으로 배치..
-
css - position개발 2022. 7. 10. 15:26
Position 은 문서에서 어떻게 요소를 배치할 것인지 결정하는 속성이다. 웹 프론트엔드 작업을 할 때마다 주먹구구 식으로 수정해왔는데 이번에 제대로 개념을 정리하고 가려고 한다. static position 속성의 기본 값이며 position 값을 채우지 않으면 자동으로 이 값으로 설정된다. 상위 부모를 배치 기준으로 삼으며 top, left, right, bottom 값은 유효하지 않다. 위에서부터 차곡차곡 쌓인다. 그림에서 static 2를 보면 static 요소 바로 밑에서 위치하는 것을 확인 할 수 있다. top이 먹지 않기 때문에 margin을 이용해서 여백을 만들었다 static position 의 기본값이다. 특별한 값을 세팅하지 않으면 위에서부터 차곡차고 쌓여간다. top, left, ..
-
kubernetes - Service개발 2022. 6. 20. 20:52
쿠버네테스 상에선 서비스를 클러스터 네트워크에서 노출되는 Pod의 논리적인 집합으로 정의한다. 클러스터상에 존재하는 Pod은 selector를 통해 연결하고자 하는 고유의 서비스를 설정할 수 있고, 서비스는 연결된 Pod을 End Point로 둔다. 서비스는 고유의 VIP를 갖고 있기 때문에 클러스터 상에선 서비스를 이용해 내부 Pod에 접근할 수 있게 되며 연결된 Pod이 여러개 있는 경우 서비스는 부하 분산도 같이 담당하게 된다. 리버스 프록시의 역할과 로드밸런서의 역할을 한다. 예제 먼저 서비스 오브젝트를 만들어보자. 아래와 같은 yaml 파일을 만들고 kind: Service apiVersion: v1 metadata: name: service-example spec: selector: app.k..
-
Kubernetes - Deployment vs StatefulSet개발 2022. 6. 17. 20:00
Kubernetes는 Pod을 배포하는 방법으로 StatefulSet과 Deployment를 제공한다. Deployment를 주로 사용해본 입장에선 StatefulSet이 Deployment와 어떤 차이가 있는 것인지 이해하는게 난감했다. 공식 문서상에선 Pod의 순서와 특징의 보존을 보장한다는 설명이 있는데 여전히 잘 와닿지 않는 개념이다. Stateful and Stateless Application StatefulSet을 이해하기 위해선 먼저 Stateful Application과 Stateless Application을 먼저 이해하는게 좋을 것 같다. Stateless 인 경우에는 상태를 저장할 필요가 없는 애플리케이션이다. 만약 서버상에 인스턴스가 저장 관련 작업이 모두 외부 클라우드에 업로드한..
-
kubernetes - Configmap 생성하기개발 2022. 6. 10. 20:23
kubernetes에서 configmap 을 생성하는 여러가지 방법이 있는데 여기선 파일을 이용한 두가지 방식을 다뤄보려고 한다. 아래 game.properties 라는 파일을 컨피그맵에 추가한다고 해보자 ➜ ~ cat game.properties enemies=aliens lives=3 enemies.cheat=true enemies.cheat.level=noGoodRotten secret.code.passphrase=UUDDLRLRBABAS secret.code.allowed=true secret.code.lives=30% 파일 그 자체를 value로 넣고 싶다면 컨피그 생성 옵션으로 --from-file을 넣는다. 그러면 game.properties 라는 키 값과 파일 내부에 값이 추가가 된다. ➜..
-
kubernetes - Configmap개발 2022. 6. 8. 23:25
쿠버네테스 상에서 Configmap 이라는 오브젝트는 어렵게 생각할 필요 없이 클러스터 내에서 Key-Value 쌍의 데이터를 저장하는데 사용하는 API 오브젝트다. 논리적 컴퓨터에 해당하는 Pod은 같은 클러스터 내의 다른 오브젝트의 볼륨에서 환경변수나 구성 파일을 Key-Value로 지정할 수 있는데 이때 사용하는 Object 가 Configmap 이다. kubectl get configmaps 로 클러스터내에 존재하는 configmap 오브젝트를 검색할 수 있다. ➜ ~ kubectl get configmaps NAME DATA AGE aim-configmap 7 6s data: 내부에 있는 값이 configmap에서 key-value 로 저장하는 값이다. 아래 코드에서 enemies, enemie..