판교너굴맨의 개발노트

사내에서 담당하고 있던 React 프로젝트의 개발이 진행될수록 첫 페이지가 나타나기 전의 흰 화면 상태가 점점 더 길어지는 이슈를 처리하게 되었다. 목차 웹페이지 구성 방식 MPA VS SPA SSR 정의와 장단점 CSR 정의와 장단점 렌더링 방식 선택 1. 웹페이지 구성 방식 MPA VS SPA MPA (Multi Page Application) MAP 구성 방식은 이름 그대로 여러 페이지로 구성된 웹 어플리케이션이다. SSR 방식을 채택하고 있다. 새로운 페이지를 요청할 때마다 서버에서 렌더링이 준비된 정적 리소스(HTML, CSS, JS 등)를 다운 받아 페이지 전체를 새로 렌더링 하는 전통적인 웹페이지 구성 방식이다. SPA (Single Page Application) 이름 그대로 하나의 페이지..

환경변수 환경변수라는 단어를 검색하면 아래와 같이 설명한다. 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다. 즉, 환경변수는 운영체제가 참조하는 변수이다. 환경변수 path windows에서 Java를 설치할 때, 또는 Android studio를 설치한 후 path 변수에 설정해주던 기억이 있다. 블로그에서 설치 순서라며 막연히 따라만 해보다가 문득 path에 설정해주는 이유가 궁금하게 되었다. 환경변수 위키백과에서는 path에 대해 이렇게 설명한다. PATH : 디렉터리 경로의 목록. 사용자가 전체 경로를 지정하지 않고 명령을 입력하면 이 목록을 확인하여 해당 명령어가 경로에 속하는지를 살펴본다. 예를 들어 Java의 컴파일러인 javac 명령어를 사용하려고 한다. 윈도..

1. 쿠키와 세션을 사용하는 이유 쿠키와 세션은 HTTP의 특징이자 약점을 보안하기 위해 사용된다. HTTP 프로토콜은 Connectionless 및 Stateless의 특징을 가진다. 1. Connectionless 클라이언트가 서버에 요청(Request)를 보낸 후 응답(Response)을 받으면 그 연결을 끊어버리는 특징이다. HTTP 1.1 버전에서는 헤더에 keep-alive 값을 줘서 연결을 유지하고, 재활용하는 기능이 Default로 추가되었다. 아래 이미지는 유효 연결이 열려 있어야 하는 최소한의 단위이다. 시간이 지나면 연결을 끊는다. 2. Stateless 통신 연결이 끝나면 상태 정보를 유지하지 않는 특징이다. 예를들어 쿠키와 세션을 사용하지 않고 어떤 페이지에 로그인을 했음에도, 상..

SOP (Same-Origin Policy) 동일 출처 정책 어떤 출처(Origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 즉, 클라이언트의 Origin과 서버의 Origin이 같지 않으면 통신을 제한하는 것. 출처 (Origin) : URL의 스킴(프로토콜), 도메인(호스트), 포트로 정의된다. 개발자 도구에서 location명령어를 입력하면 출처에 대한 정보가 출력된다. 아래는 구글 크롬의 출처 정보이다. CORS를 통해 제한을 해제할 수 있다. CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 추가 HTTP 헤더를 사용하여, 한 출처(Origin)에서 실행 중인 웹 애플리케이션이 다른 출처..

이번 스프린트에서 실시간 데이터 전송에 대한 작업을 맡게 되었다. 프로젝트를 하면서 Polling과 WebSocket 에 대한 학습한 내용을 블로그에 공유해보려 한다. Polling 방식 클라이언트에서 주기적으로 서버에 새로운 데이터를 요청하는 단방향성 방식이다. setInterval( getDataFunction , 5000); 특징 기존 HTTP 실시간 통신 방식(COMET)이다. 업데이트 된 데이터가 없어도 계속해서 데이터를 줘야하므로 서버의 리소스를 낭비하게 된다. 폴링의 주기가 짧으면 서버 성능에 부담이 간다. 폴링의 주기가 길면 실시간성이 떨어진다. 실시간으로 데이터를 주는 건 불가능하다. 실시간 효과를 내려면 주기의 간격을 줄여야 한다. 그렇게 되면 서버에 매우 큰 부하를 주게 된다. 폴링 ..