전체 글
-
typescript interface/type개발 2022. 9. 7. 20:30
javascript 에선 객체 타입이 따로 존재하지 않아 받은 객체의 모양을 알 수 없었는데 타입스크립트에서는 interface와 type을 이용해서 객체의 형태를 유추 할 수 있게 됐다. 오랜 기간 javascript 로만 프로젝트를 진행 했었는데 typescript의 interface 와 type 덕분에 런타임 에러를 확 줄일 수 있었다. Interface Car라는 interface를 사용했고 showCarInfo 함수에 정보를 노출하게 했다. 특정 객체만 받도록 형태를 지정할 수 있게 됐다. interface Car { name: string, color: string } function showCarInfo(car: Car) { console.log(car.name) console.log(car..
-
REST, REST API, RESTful개발 2022. 9. 2. 19:55
REST는 Representational State Transfer의 약자로 네트워크상에서 존재하는 애플리케이션을 만들기위한 아키텍처 스타일을 뜻한다. REST에는 6가지 아키텍처 가이드라인이 있는데 개발자라면 이미 몸소 체득했을 것이다. REST Guidelines Uniform Interface Resource 에 대한 요청을 통일되고 한정적으로 수행해야한다. 요청하는 Client 플랫폼에 종속되지 않고 사용할 수 있는 형태가 돼야함을 말한다. Client - Server 유저의 인터페이스는 클라이언트에서 데이터와 관련된 것은 서버에서 처리해 관심사를 분리한다. 다른 말로 하면 클라이언트와 서버가 따로 독립적으로 개선될 수 있어야 한다. Stateless 클라이언트와 서버는 요청을 완료 할 때 필요한..
-
nextjs 스크롤 저장 기억하기개발 2022. 8. 9. 20:00
일반적으로 뒤로가기 버튼을 클릭 할 때 유저는 현재 페이지에 진입하기 직전에 내가 있던 상태로 되돌아가는 것을 기대한다. 상태에는 내가 이전에 있던 페이지 경로 뿐만 아니라 보고 있었던 스크롤 위치도 포함된다. 그래서 아래 사이트처럼 내가 스크롤했던 위치를 잃어버리는 경우는 유저 경험에 크게 좋지 못한 케이스에 해당한다. 이런 상태로라면 책 팔기가 쉽지 않을 것 같다. 왜 이런 일이 발생하는 걸까? 앱개발을 했을 때는 새로운 화면 진입점마다 새로운 창을 만들어 줬기 때문에 이전 화면에서 읽어온 데이터와 스크롤 위치는 이전의 창에 그대로 저장돼 있어 딱히 상태 저장문제를 고려하지 않아도 됐다. 그런데 nextjs 에서 화면 이동시 사용하는 router.push 는 Activity와 달리 path만 이동하는..
-
지긋지긋한 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..