본문 바로가기

공부정리

 (12)
S3 , EC2, RDS 에 대해서.. S 3(Simple Store Service) Simple Store Service에 대한 약자로 파일 서버의 역할을 하는 서비스 이다. 일반적인 파일서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야한다. S3는 이와 같은 작업을 아마존같은 회사같은 곳에서 대행해준다. 주요특징에 대해서 이야기하면 많은 사용자가 접속을 해도 이를 감당하기 위해서 따로 시스템 적인 작업을 하지 않아도 된다. 저장할 수 있는 파일 수의 제한이 없다. 최소 1바이트에서 최대 5TB의 데이터를 저장하고 서비스 할 수 있다. 파일에 인증을 붙여서 무단으로 액세스 하지 못하도록 할 수 있다. HTTP와 BitTorrent 프로토콜을 지원한다. REST , SOAP 인터폐이쓰를 제공한다. 데이터를 여러 시설에서 중복으로 저..
react flow 에 대하여(사용법 및 설치) Flow flow 는 자바스크립트 코드를 위한 정적 타입 체커입니다. Facebook에 의해 개발되었으며 종종 React와 함께 사용합니다. 변수, 함수 및 React 컴포넌트에 특수한 타입 구문을 사용하여 주석을 달고 실수를 조기에 발견 할 수 있습니다. Flow를 사용하기 위해서는 3가지를 확인해야한다. 프로젝트 의존성에 Flow를 추가해야합니다. Flow 구문이 컴파일 코드에서 제거되었는 지 확인하세요. 타입 주석을 추가하고 Flow를 실행해 체크해야합니다. 프로젝트에 flow 추가하기 만약 yarn 을 쓴다면, 터미널 창에서 yarn add --dev flow-bin yarn run flow init 만약 npm 을 쓴다면, 터미널 창에서. npm install --save-dev flow-bin..
리액트(react)의 props와 state에 대하여 그전에 앞서서 리액트라는 언어가 생기게 된 배경을 설명해보도록 하겠다. 다음과 같은 네이버 웹사이트 화면이 있다. 맨위의 네이버 웨일 클릭하는 화면이 있다. 이것이 어떻게 구성되어있는지 보자.. 간단해보이지만 수많은 태그로 묶여져 있는 것을 확인할수 있다. 이런것들을 수천만개 수억개 생성해야할경우에 얼마나 많은 작업들이 있을지 상상이 가는가?... 그 점을 방지하기 위해서 facebook에서 만든 것이 react라는 툴이다. 그럼 react 를 사용하기 위해서는 어떻게 하면 좋을까?... 그럼 react를 검색해서 react 공식 문서로 가보자.. 효율적으로 갱신하고 랜더링... 컴포넌트 기반.. 상태관리에 대한 용이.. 뭐 줄줄이 나열해 놨지만..결국 사용하기 위한 목적을 정리하면 1. 가독성 2. 재..
export 와 module.export 의 차이점에 대하여... 1. CommonJS 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다. 모듈 정의는 전역객체인 exports 객체를 이용한다. 모듈 사용은 require 함수를 이용한다. 2. module.export를 쓰다가 짧게 쓸려고 export 가 나오게 되었다.... 주의할점( 섞어쓰면 망함) exports 는 module.exports 사용을 도와주는 helper exports 는 module.exports를 참조할 뿐! module.exports에 뭔가가 이미 붙어있다면, exports는 무시된다. 그러므로 module.export나 export 한개만 써야지 둘다 할당이 되어있다면 module.exports에 있는 것이 나오게된다.
[javascript] eventloop와 비동기 동작... 자바스크립트는 단일쓰레드에서 동작한다고 한다. 그렇다면 setTImeout 같은 비동기 함수는 뭘까?... 그리고 단일 쓰레드로 작동한다면 서버랑 통신을 할떄 끝나는 시간이 길어지면 브라우저에서 한 동작을 진행하는 시간이 너무 오래 걸린다면 다른 일은 아무것도 하지 못하게 된다. 문제 상황에 대비해서 단일쓰레드인 javascript에서 비동기적인 프로그래밍이 가능하도록 장치를 해두었다. 그것이 Event Queue 와 Event Loop라고 한다. Call Stack Call stack은 자바스크립트 말고도 다른 대부분의 언어에 존재하는 것이다. 함수가 실행되면 Callstack 에 해당 함수가 쌓이고 스택과 같은 구조로 동일하게 작동된다. 함수가 종료되면 해당 함수는 callstack에서 제거된다. 함..
CORS 와 OPTIONS 와 node.js 서버 구축에 대해서.. 세가지 요소를 연결지어서 영어소문자를 서버에 전달하면 대문자로 ... 대문자를 서버에 전달하면 소문자로 리턴하는 작업을 해볼려고 한다. 하지만 그전에.!!! 밑의 그림을 좀 더 살펴보고 해보자 Prefilight 와 Main request가 있다.. client에서 보내는 데이터들이 있는데 도메인 주소 , 접근 메소드 방식 , 접근 리퀘스트 헤더 등이 있다. 이러한 데이터를 가지고 server에서는 응답을 하는데 맨 첫번째 줄에 보면 HTTP/1.1 200 OK라는것이 보인다. 200이라는 것 이것이 바로 HTTP 상태코드라는 것이다. 그 종류를 간단히 요약하자면 다음과 같다. 1xx (정보): 요청을 받았으며 프로세스를 계속한다 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다 3xx (..
CORS , XSS, CSRF (web security) CORS(Cross-Origin Resource Sharing) HTTP 접근 제어(CORS)은 추까 HTTP혜더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록 하는 메커니즘입니다. 다른 출저의 자원. 웹 응용 프로그램은 자체와 다른 출처 (도메인, 프로토콜 또는 포트)를 가진 리소스를 요청 할 때 cross-origin HTTP 요청을 실행합니다. 어떤 요청이 CORS를 사용하는가? Fetch API 호출일떄.. 웹 폰트 Images/video frames drawn to a canvas using drawImage() CSS Shapes from images. 결론적으로 먼저 flyrequest 요청을 보내서 서버에 승인을 받는 절차를 받는다. 그리고 서..
browser, http, server , API , fetch 1. 브라우저(browser)에 관하여... 브라우저는 웹 브라우저(web browser)라고도 합니다. 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다. 주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지, 오페라, 사파리가 있다. 2. 클라이언트(client) 와 서버(server)에 대하여... 그림 두개를 참조해보자... 클라이언트는 서버에게 요청을 하고 서버는 클라이언트에게 반환을 한다. 클라이언트는 서버와 다르게 여러개가 존재한다. 서버 하나에 여러개의 클라이언트가 붙는다는 것이다. 그렇다면 이제 클라이언트와 서..

티스토리툴바