프론트엔드 공부한 거 정리하기

쿠키와 세션은 HTTP 프로토콜의 약점을 보완하기 위해서 사용된다. HTTP 프로토콜은 요청에 대한 응답이 완료되면 연결이 끊어지기 때문에 상태의 정보가 유지되지 않는다. 고속도로에서 하이패스를 이용해봤다면 얘기가 조금 쉽다. 하이패스 카드가 있으면 알아서 인식하고 결제가 되므로 별도의 동작 없이 지나가면 되지만 없으면 멈춰서 지갑을 꺼내 맞는 금액을 직접 지불해야하는 동작이 필요하다. HTTP 요청은 후자를 말한다. 톨게이트를 만날 때마다 멈춰서 일련의 동작을 해야한다. 쿠키와 세션은 하이패스 카드와 비슷하다. 뺏기면 안되기 때문에 보안 또한 더욱 중요하다. 쿠키(Cookie) 쿠키는 클라이언트에 저장되며 키와 값이 들어있는 작은 데이터 파일 유효 기간을 명시할 수 있으며, 유효 기간 내에서는 사용이 ..

어트리뷰트(attribute)는 HTML의 속성으로 Element의 id, class, type 등의 추가적인 정보를 일컫는다. 프로퍼티(property)는 DOM의 속성으로 html의 어트리뷰트를 부르는 이름이다. 즉, 같은 속성을 불러오는 이름만 다른 것. // 여기서 class와 color는 attribute document.querySelector(".box").className; // box document.querySelector(".box").style.color; // #000 // 여기서 className과 style.color는 Property 자바스크립트를 통해 DOM의 프로퍼티 속성으로 HTML의 어트리뷰트 속성에 접근할 수 있으며 동적으로 값을 변경하는 것이 가능하다.

각 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)으로 웹 애플리케이션을 구축하는 두 가지 주요한 방식. CSR의 특징 1. 클라이언트 중심 렌더링: HTML 및 JavaScript 파일을 클라이언트(브라우저)로 다운로드한 후, 브라우저에서 JavaScript를 사용하여 페이지의 렌더링을 처리한다. 2. 초기 로딩 시간: 페이지 초기 로딩 시간이 느릴 수 있지만 로딩 이후 반응이 빠르기 때문에, 사용자 경험을 향상시킬 수 있다. 3. 빠른 네비게이션: 페이지가 로드된 후, 클라이언트에서 페이지 전환 또는 라우팅이 빠르다, 비동기 요청을 통해 데이터를 가져오는 방식을 사용할 수 있다. 4. SEO 어려움: 검색 엔진 최적화에 어려움이 있을 수 있으며, 추가..

웹 브라우저는 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등을 이용해 개인정보를 탈취하는 상황을 막기 위해 동일 출처 정책 (Same-Origin Policy) 을 통해 다른 출처의 스크립트나 요청이 실행되는 걸 막는다. 출처(Origin) : url의 프로토콜, 호스트, 포트를 합친 것 ( - http://localhost:3000 ) 이 SOP에 의해 서버 요청이 차단될 때 CORS 에러가 발생하는데 사실 에러는 아니고 CORS를 이용하면 다른 출처의 리소스를 가져올 수 있는 해결책이다. 그럼 웹 문서에 모든 출처 정책은 Same-Origin인가?그렇지 않다. HTML태그 중 Cross-Origin을 지원하는 태그가 있다. 의 h..

브라우저에 "www.google.com" 주소를 입력하면 1. 웹 브라우저는 DNS서버에 해당 도메인의 IP주소를 요청하게 된다. 2. DNS 해석기는 해당 요청을 일정 기간 캐싱하여 동일한 요청에 대한 빠른 응답을 대비하기 때문에 (Time to live, TTL) 캐싱된 데이터가 있다면 DNS서버에 요청하지 않고 바로 IP주소를 반환한다. 3. DNS서버로부터 받은 IP주소를 이용하여 HTML, CSS, JS 문서 등을 다운로드 받는다. 4. 브라우저의 렌더링 엔진이 HTML문서를 파싱해 DOM트리를 구축하고 CSS문서를 파싱해 CSSOM트리를 구축한다. 5. DOM트리와 CSSOM트리를 합쳐 렌더 트리를 구축하고 레이아웃을 통해 요소의 위치와 크기를 계산한 후에 페인팅을 통해 브라우저에 나타나게 된..

파이썬의 자료형 정리 1. 숫자형 숫자로 이루어진 자료형, 정수(123) / 실수(12.34) / 8진수(0o34) / 16진수(0x2A) 등 정수형(integer) 양의 정수와 음의 정수 a = 123 a = -486 a = 0 실수형(Floating-point) 파이썬에서 실수형은 소수점이 포함된 숫자. b = 1.5 b = -5.25 8진수와 16진수 8진수는 숫자가 0o 혹은 0O로 시작 c = 0o486 16진수는 숫자가 0x로 시작 d = 0x6df 숫자형 연산자 1. 더하기(+), 빼기(-), 나누기(/), 곱하기(*) a = 3 b = 4 a + b # 7 b - a # 1 a * b # 12 a / b # 0.75 2. 거듭제곱 ** 연산자 a = 2 b = 5 a ** b # 32 3...

생성자 함수는 객체를 생성하기 위한 템플릿 역할을 하는 함수다. 붕어빵 틀이나 거푸집이라고 생각하면 될 듯. function Person(name, age) { // 거푸집 this.name = name; this.age = age; } const person1 = new Person('John', 30); // 팥 붕어빵 const person2 = new Person('Jane', 25); // 슈크림 붕어빵 이 생성자 함수를 통해 생성된 객체는 각자 다른 메모리에 저장되어 참조된다. 즉, 키나 값을 바꿔도 되는 고유한 객체가 됨 특징 생성자 함수는 첫 글자를 대문자로 쓰는 게 관례라고 한다. 생성자 함수를 통해 생성된 객체는 생성자 함수의 프로토타입을 상속받는데, 인스턴스 메서드를 프로토타입에 추가..

Map객체 Map 객체는 '키'와 '값'으로 이루어진 컬렉션으로 자바스크립트의 기본 객체인 Object와 달리 키가 반드시 문자열이 아니어도 되며, 다양한 데이터 타입을 키와 값으로 활용할 수 있다. Map객체 생성 // 빈 Map 객체 생성하기 const map = new Map(); // 이터러블 객체를 전달하여 Map 객체 생성하기 const arr = [['name', 'John'], ['age', 30]]; const map2 = new Map(arr); Map객체의 기본 동작 set(key, value) : 키-값 쌍을 추가한다. 기존에 동일한 키가 존재하면 값 대체. const map = new Map(); map.set('name', 'John'); // 요소 추가 map.set('name..

팩토리얼을 사용해서 경우의 수를 구하는 문제를 풀다가 nCm = n! / n-m! * m! 공식으로 수를 구하다보면 소수점으로 떨어지는 경우가 있을 것 같아 Math.trunc()를 사용했는데 실패해서 찾다가 알게된 글 정리. 컴퓨터는 2진법으로 계산을 하기 때문에 계산을 위해 10진법인 수를 2진법으로 변환하는 과정에서 무한소수가 생길 수 있다. 다만, 컴퓨터 메모리에는 용량 제한이 있기 때문에 컴퓨터가 알아서 무한 소수를 유한 소수로 바꿔서 저장하는데 이 과정에서 미세한 오류가 발생한다고 한다. 수포자라 자세히는 모르겠는데 여튼 소수를 계산하다보면 의도치 않은 수가 발생할 수 있으니 아래 메서드를 사용하자. toFixed() toFixed()는 입력받은 숫자를, 매개변수만큼 자리수를 반올림해 Stri..

옵셔널 체이닝(optional chaining)은 자바스크립트에서 속성이나 메서드를 참조할 때 해당 속성이나 메서드가 존재하지 않으면 에러를 발생시키지 않고 그냥 undefined를 반환하도록 하는 연산자입니다. 기존에는 속성이나 메서드를 참조할 때 해당 객체가 null이나 undefined일 경우 에러가 발생했기 때문에 이를 위해 null 체크를 작성하거나, 조건문으로 처리했지만, 옵셔널 체이닝을 사용하면 간단하게 처리 가능. 옵셔널 체이닝은 "?"으로 표시하며 해당 속성이나 메서드가 존재하지 않으면 undefined를 반환. const person = { name: 'John', address: { city: 'Seoul', street: '123 Main St' } } // person 객체의 ad..