1. 사건의 발달 저번 프로젝트 진행하면서 URL을 stateless 하게 설계했음.// 예시 - 자신이 작성한 글 조회/api/v1/users/{user_id}/boards그런데 인증, 인가를 검증하는 단계에서 URL의 정보와 JWT 속 정보를 지속적으로 비교 검증해야 번거로운 문제가 발생함. 1. JWT 토큰이 유효한지 확인.2. URL 속 user_id가 JWT 토큰 속 user_id와 같은지 확인. -> 문제점!3. user_id를 PK로 하는 사용자가 유효한지 확인.사용자 정보를 2번 받기 때문에 인증, 인가가 복잡해짐. → REST API의 stateless에 대하여 잘못 이해하고 있는 것을 깨달음. 2. Rest API의 stateless란 REST API가 stateless를 추구하는 이유..

생각보다 프로젝트 주제를 정하는 것은 쉽지 않다.가장 개인적인 것이 가장 창의적인 것이다.무언가 깊게 경험해보고 그곳의 문화를 이해해야 사람들에게 무엇이 필요한지 파악할 수 있다.Connecting dot! 모든 경험이 결국 이어진다. 무엇이든 열심히 해야한다.수평적인 커뮤니케이션은 중요하다. 다만 중심은 있어야 한다. 프로젝트를 성공적으로 마무리하기 위해선 강한 추진력이 필요하다.의식적으로 휴식시간을 가지자. 에너지가 부족하면 쉽게 날카로워 진다.시끄러운 곳에 있으면 쉽게 피곤해진다. 소음은 관리해야 한다.마음만 앞서서 일의 순서를 망각하면 안된다. 구현에 바로 뛰어들면 프로젝트가 망한다. 계획 및 설계의 시간을 충분히 가지자.좋은 팀 문화를 만드는 것이 팀장의 가장 중요한 역할인 것 같다.  프로젝트..

1. HTTPS 필요 Nginx SSL Termination이란 Nginx 서버가 클라이언트와의 SSL/TLS 연결을 종료하고, 그 이후의 트래픽을 암호화 없이 백엔드 서버로 전달하는 과정을 의미한다. 이를 통해 백엔드 서버의 부담을 줄이고, SSL/TLS 관리와 인증을 Nginx가 처리할 수 있도록 한다. 외부와의 통신은 보안이 중요한 만큼 HTTPS를 사용하여 데이터를 암호화한다. 외부에서 제3자가 데이터가 전송되는 동안 데이터를 들여다볼 수 없게 만든다. 서버 내부에서는 암호화의 필요성이 줄어들기 때문에 효율성을 위해 HTTP를 사용하여 통신한다. 이렇게 하면 백엔드 서버에서 복호화하는데 필요한 부담을 줄일 수 있다. 2. 원리  (HTTPS 통신에 대한 간단한 설명 참고) 3. 로컬 개발 환경에서..

NGINX Reverse Proxy | NGINX DocumentationNGINX Reverse Proxy Configure NGINX as a reverse proxy for HTTP and other protocols, with support for modifying request headers and fine-tuned buffering of responses. This article describes the basic configuration of a proxy server. You will learn how to pdocs.nginx.com 1. 리버스 프록시 설정법 위와 같이 path가 /일 경우는 react를 빌드한 정적인 파일을 주고 path가 /api/v1인 경우 8080 포트의 Spr..

1. Nginx란? Nginx - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전.ko.wikipedia.org Nginx는 웹 서버 소프트웨어이다. 기본적인 웹 서버 기능을 제공할 뿐만 아니라, 리버스 프록시, 로드 밸런서, http 캐싱 그리고 메일 프록시 기능을 제공한다. HTTP 프록시와 웹 서버 기능정적 파일과 인덱스 파일 표현, 자동 인덱싱 기능.캐싱을 통한 리버스 프록시로드 밸런싱고장 진단SSL 지원캐싱을 통한 FastCGI 지원Name-, IP-기반 가상서버FLV 스트리밍MP4 스트리밍 모듈을 이용한 MP4 스트리밍웹페이지 접근 인증gzip 압축10000개의 동시 접속을 처리할 수 있는 능력URL 다시 쓰기 (URL rewriting)맞춤 로깅서버 사이드 기능 포함WebDAV..

1. 상태 관리  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 모든 Vue 컴포넌트 인스턴스는 이미 자체 반응형 상태를 관리한다. 상태(State) : 앱 구동에 필요한 기본 데이터뷰(View) : 상태를 선언적으로 매핑하여 시각화기능(Actions) : 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작  이때 단방향 데이터 흐름을 가진다. 하지만 이런 상태 관리의 단순성이 무너지는 시점이 오는데… 여러 컴포넌트가 상태를 공유할 때 단순성이 무너지기 시작한다. 가. 여러 뷰가 동일한 상태에 종속된 경우 여러 뷰가 하나의 상태의 변화에 따라 복잡하게 상호작용 할 수 있다. 공유하는 상태를 공통 조상 컴포넌트로 끌어올린 ..

Vue Router v3.router.vuejs.org 시간이 없는 관계로 따로 정리하진 않지만 중요해서 따로 링크를 남긴다. 아래에 언급한 내용은 특히 중요하다.라우터 사용법중첩된 라우트프로그래밍 방식 내비게이션Navigation guard

Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 1. Props  Props: 컴포넌트에 등록할 수 있는 사용자 정의 속성.: 상위 컴포넌트가 하위 컴포넌트에게 전달하는 값. 가. defineProps() {{ title }}defineProps는 Props의 이름뿐 아니라 다양한 옵션도 추가할 수 있다. 나. 정적 Props 다. 동적 Props 라. 주의점 식 컴포넌트 내부에서 props를 변경하려 하면 안 된다. Props는 읽기 전용입니다! 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성한다. 부모 ..