# SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻합니다. 한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책인데요. 여기서 말하는 ‘출처(Origin)’는 다음과 같습니다. 출처는 프로토콜, 호스트, 포트의 조합으로 되어있습니다. 이 중 하나라도 다르면 동일한 출처로 보지 않습니다. 프로토콜의 기본 포트는 443입니다. 따라서 https://caramel-corn.tistory.com/는 https://caramel-corn.tistory.com/:443 과 동일합니다. ⇒ 두 URI는 프로토콜, 호스트, 포트가 모두 같은 동일 출처입니다. 그렇다면 SOP은 왜 생겨나게 되었을까요? 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수..

# 웹 애플리케이션 아키텍처 클라이언트-서버 아키텍처(=2티어 아키텍처) : 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 클라이언트 : 리소스를 사용하는 앱 서버 : 리소스를 제공(serve)하는 곳 클라이언트와 서버는 요청과 응답을 주고받는 관계입니다. 클라이언트는 서버로 요청을 보내고, 서버는 요청에 따라 적절한 응답을 클라이언트로 회신합니다. 필요에 따라 서버는 데이터베이스에 요청을 보내고, 회신 받은 응답을 활용합니다. 일반적으로 서버는 리소스를 전달해 주는 역할만 담당합니다. 데이터베이스 : 리소스가 별도로 마련하는 저장공간 데이터베이스는 창고와 같은 역할을 합니다. 이처럼 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 부릅니다. 클라이언트..

# SPA SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다. * SPA와 MPA의 특징 SPA (Single Page Application) MPA (Multi-Page Application) 페이지 로딩 방식 단일 페이지에 모든 콘텐츠 포함 각 페이지 별로 새로운 요청 네비게이션 클라이언트 측 라우팅을 사용 서버 측 라우팅 및 페이지 전환 로딩 시간 초기 로딩 시 자원을 한 번에 받음 각 페이지마다 로딩이 필요 초기 로딩 속도 초기에는 모든 자원을 로드해야 함 각 페이지는 필요할 때마다 로드 서버 요청 데이터를 비동기적으로 요청..

# 터미널 명령어 리액트 첫 시간 페어와 함께하는 'React Twittler Intro' 만들기 코드를 받아서 vscode 프로그램을 켜주고 명령어 npm run test - 터미널에서 테스트 통과 항목, 여부 확인가능 명령어 npm run start - 터미널에 입력시 브라우저에서 기능구현 확인가능 npm run test npm run start # 과제 체크리스트 React Twittler 파일 구조 / ├── /React Twittler State Props │ ├── README.md │ ├── /public # create-react-app이 만들어낸 파일로 yarn/npm start로 실행 시에 쓰입니다 │ └── /src # React 컴포넌트가 들어가는 폴더 │ ├── static # d..

# React ? 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 리액트의 3가지 특징 선언형 컴포넌트 기반 범용성 # JSX JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아닙니다. 그렇다면 어떻게 해야 할까요? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 합니다. 이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할..

Part 1 - 타이머 API 개요 이번 과제에서는 비동기를 이해하기 위해 비슷한 상황을 연출합니다. 가장 간단한 비동기 구현은 타이머 API를 이용하는 방법입니다. 지금은 API가 소통하기 위한 인터페이스라는 것만 알면 됩니다. 타이머 API는 setTimeout()이라는 메서드를 이용해 구현할 수 있습니다. 구현된 타이머 API는 여러분이 익히 아는 타이머 기능을 수행할 수 있습니다. callback과 promise, 그리고 async/await 키워드를 이용한 비동기 흐름을 제어하는 방법을 코드를 통해 살펴봅니다. 학습 목표 callback, Promise, async/await 구현 방법을 이해한다. Promise 실행 함수가 가지고 있는 두 개의 매개변수 resolve 와 reject를 활용할 ..

# 동기와 비동기 동기 (Synchronous)와 비동기 (Asynchronous)는 프로그램이 작업을 어떻게 처리하는지에 대한 두 가지 기본적인 접근 방식입니다. 동기 (Synchronous) 비동기 (Asynchronous) 실행 방식 순차적 (Sequential) 비순차적 (Non-sequential) 대기 여부 작업 완료까지 대기 (Blocking) 작업 완료를 기다리지 않고 다른 작업 수행 가능 (Non-blocking) 다른 작업 수행 가능 불가능 가능 코드의 간결성 상대적으로 간결함 복잡성이 증가할 수 있음 JavaScript는 싱글 스레드 기반으로 동작하는 언어입니다. 따라서 동기적으로 작동하게 됩니다. 그러나 JavaScript에서도 비동기 처리가 가능하다고 배우셨는데요. 어떻게 된 걸까..

# Beesbeesbees 객체 지향에서 배운 내용을 바탕으로 꿀벌의 발달 단계를 나타내는 꿀벌 클래스 만들기 과제이다. Class Structure ├── Grub │ └── Bee │ ├── HoneyMakerBee │ └── ForagerBee 최종 코드의 구조이다. Grub은 Bee의 부모, Bee는 HoneyMakerBee와 ForagerBee의 부모이다. # Grub class Grub { constructor() { this.age = 0; this.color = "pink"; this.food = "jelly"; } eat() { return `Mmmmmmmmm jelly`; } } module.exports = Grub; Grub class functionality ✓ `age` 속성은 ..

# 프로토타입 JavaScript는 프로토타입(Prototype) 기반 언어입니다. 여기서 프로토타입은 원형 객체를 의미합니다. JavaScript는 프로토타입 기반 언어입니다. 프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현합니다. 흠...🤔 이게 무슨...무슨뜻이지? 챗 지피티의 설명! 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속되며, 이 상속 관계를 "프로토타입 체인"이라고 합니다. 간단히 말하면, 모든 JavaScript 객체는 다른 객체를 상속하고, 그 상속된 객체는 또 다른 객체를 상속할 수 있습니다. 이러한 체인을 따라 객체는 부모 객체의 프로퍼티 및 메서드를 사용하거나 재정의할 수 있습니다. JavaScript에서 프로토타입을 사용하여 객체 간 상속을 ..

# 객체지향 자바스크립트는 프로토타입 기반의 객체 지향 언어입니다. 객체 지향 프로그래밍은 소프트웨어를 객체(데이터와 해당 데이터를 조작하는 메서드로 구성된 개체)로 구조화하는 프로그래밍 패러다임 객체 지향 프로그래밍은 코드를 재사용하기 쉽고 유지 관리하기 쉽게 만들며, 복잡한 시스템을 모듈화하고 추상화할 수 있습니다. 특징 설명 프로토타입 기반 클래스 기반 상속 대신 프로토타입을 사용한 상속 메커니즘을 갖고 있습니다. 객체 거의 모든 것이 객체로 표현됩니다. 함수, 배열, 문자열, 숫자 등 모든 것이 객체입니다. 상속 객체는 다른 객체(프로토타입)로부터 속성과 메서드를 상속받을 수 있습니다. 다형성 다형성을 지원하며, 동적으로 인터페이스를 구현하는 다양한 객체를 다룰 수 있습니다. 캡슐화 데이터와 관련..

# 일급 객체 first-class citizen 자바스크립트에서 함수는 일급 객체(First-Class Object)입니다. 이것은 함수가 다음과 같은 특징을 가지는 것을 의미합니다: 1. 변수에 할당할 수 있습니다: 함수는 변수에 할당할 수 있으며, 이 변수를 통해 함수를 참조하거나 호출할 수 있습니다. const greet = function(name) { console.log(`Hello, ${name}!`); }; greet("Alice"); // 함수 호출 주의) 변수에 함수를 할당할 때 함수 표현식은 변수에 할당한 다음 사용할 수 있다. * 함수 표현식은 할당 전에 사용할 수 없습니다. * square(7); // --> ReferenceError: Can't find variable: sq..