0708_오전 - Githubissues

✔http 상태 코드 : 1xx 정보 응답 (요청에 대한 처리가 진행 중) 2xx 성공 응답 (요청에 대한 응답을 성공적으로 완료) 3xx 리다이렉션 메시지 (요청을 완료하기 위해 리다이렉션) 4xx 클라이언트 에러 응답 5xx 서버 에러 응답

✔쿠키 : 웹 서버가 생성해 웹 브라우저로 전송하는 작은 정보 파일. 클라이언트의 요청을 기억하고 구분하려는 용도로 쿠키를 사용. 서버에서 구동되는 도메인 별로 관리.

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies ✔http 쿠키 (웹 쿠키, 브라우저 쿠키) : 세션관리 (서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리) 개인화 (사용자 선호, 테마 등의 세팅) 트래킹 (사용자 행동을 기록하고 분석하는 용도)

✔해킹요소.. 쿠키 취약... 이걸 위해 session 등장.. 어플리케이션 저장용량 쿠키..

✔웹소켓 http의 클라이언트와 서버의 연결을 유지하지 않는 '비연결성'. 요청 없이 서버에서 응답을 보낼 수 없음.

✔https://tonejs.github.io/ 웹 api 인데 소리를 가져올 수 있음

✔웹 Application 디자인 패턴 [MPA, SPA, SSR] : MPA 웹 페이지에서 서버로 데이터를 요청하고 응답을 받을 때 매번 새로운 HTML 페이지를 받는 방식. 웹이 탄생했을 때부터 지금까지 사용되고 있는 디자인 패턴. : SPA ajax 의 등장으로 클라이언트에서 데이터를 요청할 때 새 HTML 페이지를 받지 않고 데이터를 갱신. 응답 받은 데이터를 웹 페이지에서 직접 변경. 렌더링을 클라이언트에서 함. CSR 이라고도 함. 웹 페이지 전체를 다시 로딩하지 않고 변경되는 부분만 업데이트됨. url의 개념이 없음. 관련 개념 DOM.. 이건 HTML, CSS 요소를 자바스크립트가 이해할 수 있도록 객체화해 제공하는 모델임. 자바스크립트가 DOM에 직접 접근하면 내부적으로 연속적인 처리가 발생해 속도나 성능 면에서 불리함. 그래서 자바스크립트 프레임워크(앵귤러, 리액트, 뷰)는 이 문제를 해결하기 위해 DOM을 제어하는 알고리즘을 제공함. 앵귤러는 증가DOM방식, 리액트와 뷰는 가상의 COM 방식의 알고리즘 제공.

JSON : 자바스크립트 객체 형식, 즉 키(key)와 값(value) 의 조합으로 데이터를 표현하는 데이터 포맷. JOSN에 저장할 수 있는 값은 문자열, 숫자, 논리형, 배열, 객체 null 데이터 등 : SSR 웹 페이지를 서버에서 렌더링하여 모든 데이터를 서버에서 생성한 후 클라이언트에 전달함
검색 엔진 로봇 (봇, 스파이더, 크롤러 등으로 불림)

✍🏻과제 : 공 추첨 프로그램

요구사항 6개 숫자를 선택(입력 받음) 45개의 공이 든 통 안에서 7개의 공을 뽑기. 공에는 1부터 45까지 숫자가 적혀 있음 한 번 뽑은 공은 통에서 빠지므로 같은 숫자의 공이 뽑힐 일이 없음. 뽑힌 숫자 중 6개는 당첨 숫자, 1개는 보너스 숫자 당첨 숫자 6개를 모두 맞추면 1등, 당첨 숫자 5개와 보너스 숫자 1개를 맞추면 2등 당첨 숫자 5개를 맞추면 3등 당첨 숫자 4개를 맞추면 4등 당첨 숫자 3개를 맞추면 5등

요구사항에 맞추어 프로그램이 어떤 순서로 동작하는지 생각해보기.

오늘 배운 SPA, MPA, SSR, CSR에 대한 정리. SPA -SPA는 단일 페이지 애플리케이션(Single Page Application)으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미. 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있음. SPA가 ‘단일 페이지 애플리케이션’이라고 일컬어지지만, 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않음. SPA(Single Page Application)도 여러 페이지가 존재하는데, 다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미함. 출처 : https://www.elancer.co.kr/blog/view?seq=214 MPA -MPA는 전통적인 웹 애플리케이션 개발 방식. 이러한 구조는 jsp, 혹은 php 등과 같은 웹 서버 언어로 구축된 웹사이트에서 많이 보임. 웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면, 서버는 데이터를 HTML 문서로 웹 브라우저에 응답해줌. 이 때 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 됨. 이는 웹사이트를 사용하는 유저에게 좋은 사용자 경험을 제공할 수 없음. 페이지 이동 시 잠깐 깜빡이고 페이지가 나온다면 좋겠지만, 데이터가 많을 경우 화면에 다시 그려지는 동안 사용자는 그저 기다려야 하기 때문. AJAX를 이용한 비동기 통신을 통해 상당 부분 해소할 수 있었지만, 근본적으로 페이지가 새로고침 된다는 문제를 해결할 수는 없었다. MPA의 가장 큰 단점은 프론트엔드와 백엔드가 결합되어 있다는 점. 이 문제는 2계층 구조에서 비즈니스가 복잡해지거나 비대해지면 관리하기가 어려워진다라는 말과 동일하다는 것을 알 수 있음. 단점이 많이 부각되고 있지만 MPA의 가장 큰 장점은 SEO 친화적임. 네이버나 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트라면, MPA 구조로 개발하는 것이 좋음. 출처 : https://seunghyun90.tistory.com/92 SSR -SSR (Server Side Rendering)에서는 사용자가 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 html파일을 만들고 이러한 html파일을 동적으로 제어할 수 있는 일부 JavaScript 소스코드만을 함께 클라이언트로 보내주는 방식으로 클라이언트에서는 이렇게 잘 만들어진 html파일을 CSR에 비해 더 빠르게 보여줄 수 있게 됨. 출처 : https://velog.io/@kysung95/SSR-vs-CSR-%EB%8B%B9%EC%8B%A0%EC%9D%98-%EC%84%A0%ED%83%9D%EC%9D%80-feat.-ssg CSR -Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 됨. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 됨. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있음. 출처 : https://opendeveloper.tistory.com/entry/CSRClient-side-Rendering%EC%9D%B4%EB%9E%80

쿠키에서 사용할 수 있는 속성값에 대한 실습과 이해..

LeeeYumin / academy_TIL

0708_오전 #3