분류 전체보기

canva 앱 구현하기 실습에서 자꾸 CORS가 발생... 난 분명히 CORS 설정을 했는데.... 알고보니 버킷(S3)에만 CORS를 적용하고 람다에는 적용을 하지 않았다..canva에서 사진 업로드 -> PresigneUrl -> 버킷에 업로드 -> FaceSwapUrl -> cloud9에서 설치된 EC2서버를 통해 face swap이 되어야하는 flow이다. 여거시 canva에서 사진 업로드 -> presigneUrl이 same origin이 아니니까 CORS가 터졌고 나는 presigneUrl 람다에 CORS를 설정하지 않았다. (FaceSwap 람다에도 마찬가지로 설정해줘야함) 이제 설정해보자

✅ Static Websties정적 페이지를 반환하는 웹 서버(Nginx, Apache, S3) 활용가장 초기의 웹 페이지 형태: 초창기 홈페이지는 한번 만들면 거의 변경될 일이 없었다. 이미 만들어진 웹 페이지인 정적 웹 페이지를 요청에 따라 반환하므로 렌더링 절차가 없었다.그림에서 JS가 페이지를 Render하는 것은 이미 만들어진 페이지를 띄워주기 위함..💡CDN( Content Delivery Network )지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠(예: 라이브 비디오 피드)의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게 합니다.ref: https://www.ibm.com/kr-ko/topics/content-deliv..

이 문제의 핵심은 소수를 어떻게 효율적으로 찾을것인가 문제였던거 같다..✅ 에라토스테네스의 체알고리즘 설명🔹2부터 소수를 구하고자 하는 구간의 모든 수를 나열한다. 그림에서 회색 사각형으로 두른 수들이 여기에 해당한다.🔹2는 소수이므로 오른쪽에 2를 쓴다. (빨간색)자기 자신을 제외한 2의 배수를 모두 지운다.🔹남아있는 수 가운데 3은 소수이므로 오른쪽에 3을 쓴다. (초록색)자기 자신을 제외한 3의 배수를 모두 지운다.🔹남아있는 수 가운데 5는 소수이므로 오른쪽에 5를 쓴다. (파란색)자기 자신을 제외한 5의 배수를 모두 지운다.🔹남아있는 수 가운데 7은 소수이므로 오른쪽에 7을 쓴다. (노란색)자기 자신을 제외한 7의 배수를 모두 지운다.🔹위의 과정을 반복하면 구하는 구간의 모든 소수가 남..

✅라이브러리 VS. 프레임워크🔹라이브러리: 단일 목적을 위한 단일 파일🔹프레임워크: 다수 목적을 위한 라이브러리 집합 오만가자 자바스크립트 라이브러리를 종합해서 제공하는 프레임워크는 오만개의 자바스크립트 파일을 갖는다. 한 자바스크립트 프레임워크 내 워낙 다양한 기능을 제공하는 자바스크립트들이 있다보니 정말 많은 파일이 존재.유저가 웹 브라우저에서 웹 페이지를 보기위해 오만개의 자바스크립트 파일을 다운로드하면, 컴퓨터가 터진다.✅번들러: 다수의 JS를 하나의 JS파일로 압축그래서 하나의 웹 페이지를 보여줄 때 다양한/다수의 JS라이브러리 파일을 하나의 JS파일로 압축해야한다.-> 번들러를 통해 다양한/다수의 JS파일을 하나의 JS 파일로 묶는다. 하지만 다수의 JS파일을 하나로 번들링을 하면 파일 용..

✅Javascript FrameworkJS는 웹 개발의 공식 프레임워크 같은 것이 아니라 단순히 프로그래밍언어이기에 정말 미친듯이 다양한 라이브러리와 프레임워크들이 등장하게 됐다.🔷프론트엔드 Javascript Framework    🔹React.js (다른것들과 달리 리액트는 라이브러리지만 프론트엔드 프레임워크로 분류된다)    🔹Angular    🔹Vue.js🔷백엔드 Javascript Framework    🔹Express.js    🔹Nest.js  🔷그래픽 Javascript Framework    🔹Three.js 등 프론트엔드, 백엔드 자바스크립트 프레임워크를 나열했는데, 이처럼 웹 브라우저나 웹 서버에서도 쓰인다.✅ 자바스크립트 런타임 = JS엔진 + API 및 기타 라이..

✅웹 개발은 무엇인가?웹 페이지 그 자체 + 웹 페이지 내 표기할 데이터🔷웹 페이지(FE)HTML = 문서구조(구조)CSS = 문서 꾸미기(형태)JS = 유저 인터렉션(유저 이벤트 처리 및 DOM 조작) 🔷데이터(BE)웹 페이지에 동적으로 표기할 데이터 및 데이터 조작의 모든것✅프론트엔드 웹 개발: Rendering = 웹 페이지의 화면 변경어떻게 유저의 웹 브라우저에 우리가 원하는 다양한 웹 페이지를 보여줄 수 있을까? 버튼을 누르거나 페이지 이동 시 웹 페이지 화면을 어떻게 바꾸어줄까? -> DOM 조작🔷웹 페이지의 화면 변경: JS통한 HTML(DOM) 직접 조작결제하기 버튼을 누르면 결제하기 페이지로 이동하거나, 누르면 안되는 버튼을 누르면 경고창을 띄우거나1. JS를 통해 HTML(DOM)..

✅프로그램 VS. 프로세스프로그램: 정적, 실행 가능한 파일 형태프로세스: 실행된 프로그램, cpu와 메모리 할당받아서 프로그램이 실행된 형태 ✅프로세스 VS. 스레드프로세스: 실행단위가 크고 + 한개의 프로그램에 한개의 프로세스만 존재스레드: 실행 단위가 작고 + 핸개의 프로그램(한개의 프로세스)내 수 많은 스레드가 존재    스레드마다 프로그램 카운터(실행위치) + 명령어 레지스터(실행함수) + 스택 영역(실행 변수)을 가짐 🔷스레드프로세스는 실행단위가 커서 각 기능별로 프로세스를 나눈게 스레드이다.스레드마다 stack을 가지고 있고, 스택은 함수 호출에 필요한 정보가 담겨있다. (heap은 프로세스마다 하나씩 할당)스레드마다 프로그램 카운터(실행 위치) + 명령어 레지스터(실행 함수) + 스택영역..

우리가 웹 페이지에서 정보를 찾고 싶으면 주소창에 도메인 네임(IP주소)를 직접 입력해서 정보를 찾는가?우리는 검색창에 우리가 원하는 정보를 단어나 문장으로 검색창에 입력한다. (`naver.com`을 검색하지 않고 `네이버`라고 입력한다) 검색창에 원하는 정보를 입력하면 내가 원하는 정보를 쫘라락 나열해준다. 이렇게 무언가 나 대신 모든 웹 서버의 웹 페이지들을 미리 다 찾아 놓고, 분류 및 정리한 뒤에 내 검색어에 따라 그에 적합한 웹 페이지들만 골라 전달해준다.무언가: 구글, 네이버, 다음과 같은 서비스(검색 엔진)다 찾아놓고: 웹 크롤링(세계 모든 웹 서버의 웹 페이지 정보 수집)분류 및 정리한 뒤: 인덱싱(앞성 수집한 전체 웹 페이지들을 상관관계별로 분류)내 검색어에 따라 그에 적합한 웹 페이지..

DNS가 무엇이고 왜 필요할까 ✅Domain Name모든 웹 서버는 주소를 갖고, 이 주소의 정식 명칭은 IP주소(a.k.a. 네트워크 주소)라고 한다.근데 이 IP 주소를 사람들이 기억하기 쉬운 어렵다고 해서 도메인 네임을 사용하는 것이다.우리가 흔히 보는 `naver.com` 이런게 도메인 네임이다. 위 사진에서 도메인 네임은 `mystudylog.tistory.com` 이다. 도메인 네임은 왜 "주소"라고 부르지 않고, "이름"이라고 말하는 이유는 모든 웹 서버는 IP주소 기반으로 통신하기 때문에 도메인은 "주소"가 아니라 IP의 별칭(alias)이기 때문이다. ✅DNS(Domain Name System/Server)사람들은 도메인 네임으로 소통한다면, 웹 서버끼리 통신 하려면 도메인 네임을 IP주..