본문 바로가기

programming study/web

 (42)
웹스토리지 & 쿠키 본 내용은 10분 테코톡 디토님의 강의를 토대로 작성하였습니다. 1. 쿠키 브라우저에 저장되는 작은 크기의 문자열 역사 매직 쿠키에서 유래 프로그램이 수신한 뒤 변경하지 않고 보내는 데이터 패킷 넷스케이프 웹사이트 방문자가 이전에 사이트를 방문했었는지 여부를 판단하기 위해서 사용 HTTP의 비연결성, 무상태성으로 인해 사용 요청과 응답이 끝나면 연결이 끊김 상태를 유지하지 않음 특징 서버에서 쿠키를 저장 서버에서 주로 사용 http 요청시 Headers에 실려서 서버로 전송 같은 도메인에서 만들어진 쿠키만 전송 Expires 또는 Max-Age를 통해 만료기간을 정할 수 있음 둘 다 존재하면 Expires는 무시됨 영구 쿠키: 만료 기간을 정한 쿠키 브라우저 종료 시 삭제 세션 쿠키: 만료 기간을 정하지..
지속적 배포 본 내용은 10분 테코톡 웨지님의 강의를 토대로 작성하였습니다. 1. CI / CD 개발부터 배포까지의 과정을 자동화 개발된 내용이 사용자에게 빠르게 도달할 수 있게 해주는 방법론 CI: Continuous integration(지속적 통합) CD: Continuous Delivery & Continuous Deployment CI란 새로 추가된 코드가 성공적으로 배포 브랜치의 프로젝트 코드에 통합되도록, 소스 관리 및 테스트 및 리포트 과정을 자동화하는 것 CD란 Continuous Delivery & Continuous Deployment CI를 통해 새롭게 추가된 코드를 유저에게 바로 제공할 수 있도록 배포 과정을 자동화 2. CD Continous Delivery 지속적 제공 CI를 통해 이상없는..
이벤트루프 본 내용은 10분 테코톡 피터님의 강의를 토대로 작성하였습니다. 1. 콜백 함수 다른 함수의 인자로 넘겨지는 함수 콜백 수신 함수에 의해 특정 시점에 실행 동기 콜백의 경우 호출 즉시 실행 비동기 콜백의 경우 나중에 조건을 만족했을 때 실행 이벤트 리스너 타이머 / XMLHttpRequest 요청 2. 비동기적 실행 setTimeout과 같은 함수는 자바스크립트의 뒷편에서 실행된다. 비동기 코드 이벤트 루프에서 실행된다. 비동기 처리, 동시성 3. 자바스크립트 엔진 Webkit, V8 등 브라우저마다 엔진이 다름 자바스크립트 코드를 해석하고 실행하는 인터프리터 힙(Heap) + 호출 스택(Call Stack) 힙은 메모리 할당이 일어나는 부분 변수, 객체 등이 저장되는 일종의 창고 호출 스택(Call S..
프론트엔드 성능 측정 본 내용은 10분 테코톡 서니님의 강의를 토대로 작성하였습니다. 1. 성능측정의 의의 서비스의 지연 속도가 늘어날수록 이탈률이 급격하게 증가 구매 전환률 역시 감소 기업의 이익에 영향을 끼치게 됨 프론트엔드에서의 성능 측정이 필요한 이유는 사용성 개선을 통한 이익 증대를 이끌어내기 위함 2. 측정할 성능 로딩 속도 렌더링 시간 메모리 누수 확인 로딩 속도 FCP(First Contentful Paint) 첫 요소가 로드 될 때까지 걸리는 시간 FMP(First Meaningful Pain) 사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간 LCP(Largest Contentful Paint) 주요 콘텐츠가 로드 될 때까지 걸리는 시간 FMP의 경우 약 20%의 항목에서 정확하지 않아, 현재는 L..
인증과 인가 본 내용은 10분 테코톡 나봄님의 강의를 토대로 작성하였습니다. 1. 인증과 인가의 차이 인증 사용자가 누구인지 확인하는 작업 로그인 인가 사용자의 권한이 어디까지인지 관리자 권한 하의 게시글 삭제 2. 쿠키, 세션, 토큰 인증을 유지할 수 있는 수단 HTTP 비연결지향 한 번 통신하고 나면 끝남 상태없음 서버가 클라이언트의 상태를 보존하지 않음 장점 서버의 리소스를 절약할 수 있다. 서버 확장성에 용이 단점 상태를 보존하지 않는다. 쿠키 쿠키는 브라우저에 저장된다. 쿠키의 흐름 서버에서 Set-Cookie 헤더에 key=value를 포함해 보낸다. 클라이언트는 Set-Cookie 헤더 기반으로 브라우저에 저장한다. 다음 요청부터는 Cookie헤더에 key=value를 포함해 보낸다. Domain: 쿠키..
SSR, SSG, JAM Stack 1. SSR Server Side Rendering 스프링, JSP SEO 최적화 CSR(Client Side Rendering)의 반대 React, Vue 자바스크립트를 사용해서 HTML 요소를 동적으로 바꿈 대게 SPA 좋은 UX 규모가 크면 로딩 속도가 길어짐 SEO 미흡 2. Next.js, Nuxt.js Next.js: React의 SSR 페이지 제공 프레임워크 Nuxt.js: Vue의 SSR 페이지 제공 프레임워크 사이트의 원하는 부분을 SSR로 만들 수 있다. API 서버로부터 데이터를 서버에서 미리 받아옴(SSR모드) Next.js, Nuxt.js의 서버 Node.js가 깔린 서버에서 프로젝트를 어플리케이션으로 실행하여 프론트엔드를 배포 바로 나타나야할 것을 정할 수 있음 SSG(Stati..
모듈 번들러와 빌드도구 본 내용은 10분 테코톡 썬님의 강의를 토대로 작성하였습니다. 1. module 분리된 코드의 조각 시스템을 이루는 논리적인 일부분 EcmaScript modules(ESM): 자바스크립트의 모듈 시스템은 2015년에 정식으로 도입 2. CommonJS 많은 자바스크립트 파일을 스크립트 태그를 통해 가져왔을 때, 변수가 겹치면 덮어씌워질 것이다. 예측하기 어렵고 오류가 발생한다. 모듈화를 위해서 스코프: 각 모듈을 독립적 스코프를 가진다. 정의: 모듈을 정의할 수 있어야 한다. 사용: 모듈을 사용할 수 있어야 한다. 2009년 CommonJS 등장 각각의 파일이 독립적인 스코프를 가지며 module.exports를 통해 모듈을 정의 require 문법을 통해 모듈을 사용 모든 파일이 로컬에 존재하여 바로..
OSI 7 Layer 본 내용은 10분 테코톡 파즈님의 강의를 토대로 작성하였습니다. 1984년 ISO에서 발표한 7계층으로 이루어진 네트워크 모델 네트워크를 묘사하는 모델 현재 사용하는 모델은 TCP/IP 모델 세션 계층과 프레젠테이션 계층이 어플리케이션 계층으로 통합 7. Application Layer 응용 프로세스를 직접 사용하여 응용 서비스를 수행하는 계층 http, FTP, SMTP 등이 속한 계층 6. Presentation Layer 데이터의 변환, 압축, 암호화가 이루어지는 계층 서로 다른 통신 기기 간에 다른 인코딩을 사용할 수도 있기 때문에 해당 계층에서 데이터 변환 5. Session Layer 세션을 열고 닫고를 제공하는 메커니즘의 계층 세션 복구 지원 세션 도커는 체크포인트라는 것을 통해 동기화를 시..

티스토리툴바