전체 글
-
Web Architectures 정리concept/server 2020. 6. 10. 22:52
클라이언트, 서버, API가 무엇인가 : 클라이언트는 사용자 입력을 주로 수행하고 서버의 응답을 화면에 표시한다. : 서버는 정보를 제공하는 주체 : 클라이언트가 서버에서 정보를 제공 받으려면 API를 통해서 해야한다. 그 API중에 예를 들어서 fetch가 있는데 fetch의 구조를 살펴보자 fetch('리소스 주소', 설정객체).then(콜백함수:응답 response 객체).catch(콜백함수:요청에 대한 에러); 웹 개발과 관련한 아키텍처에 대한 이해 - 브라우저란? : 사용자의 컴퓨터가 인터넷에 접속되어 웹 서버로부터 가져온 여러 가지 정보를 볼 수 있도록 도와주는 소프트웨어 - 브라우저의 역할이란? 인터넷을 쉽게 항해할 수 있다. 원하는 웹사이트에 쉽게 접속할 수 있다. 정보를 쉽게 검색할 수 ..
-
state 끌어올리기 / props drilling(프로퍼티 내려꽂기)concept/React, Redux, RN 2020. 6. 1. 02:28
State 끌어올리기를 쓰는 이유? : 종종 여러 컴포넌트에서 동일 데이터의 state를 변경해야하는 경우가 생기는데, 이 때 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다. 예를 들어 sprint 파일의 App.js에서 state를 바꾸는 이유는? videoplayer.js와 videolistEntry.js가 만나는 부모 컴포넌트가 App.js이기 때문이다! State 끌어올리기를 쓰는 방법? : event handler를 부모 컴포넌트에서 setState를 사용해서 작성한 후 props로 내려준다! 그래서 그 이벤트가 실제로 실행되는 컴포넌트에서 전달인자로 props를 받아서 이벤트 함수를 실행시켜준다 (ex. onClick) 예를 들어 sprint 파일에서 이벤트에서 인자를 vide..
-
Reactconcept/React, Redux, RN 2020. 6. 1. 02:19
출처 : 코드스테이츠, 생활코딩, velopert What is "React"? 리액트는 UI(유저 인터페이스)를 만들기 위한 자바스크립트 라이브러리 웹사이트를 만드는 것은 결코 단순한 작업이 아니다. 상태를 관리해야할 DOM이 많아지면서 코드가 아주 복잡해져버리는 것이다. 그래서 상태관리를 최소화하고 기능 개발에만 집중할 수 있게 해주는 프레임워크가 나타나게 된다. 예를 들어 angular, Vue, React 등이 있다. Component 이 중에서 React는 Component에 집중하고 있다. 여기서 Component는 하나의 의미를 가진 독립적인 단위 모듈이라고 정의할 수 있는데 이렇게 말하면 너무나 어렵다. 쉽게 말하자면 나만의 HTML 태그(나만의 Component)를 만들 수 있다는 것이다..
-
콜백 (callback)concept/javascript 2020. 5. 27. 02:43
대표 예시 setTimeout에서 실행되는 함수 안에서 일어나는 연산들을 가져오기 //함수 표현식 function helloWorld (callback) { setTimeout(()=>{ var a = 'hello'; var b = 'world'; callback(a + b) // { console.log(value) }) //결과는 undefined가 나오고 2초 후에 helloworld 가 나온다. 먼저 undefined가 나오는 이유는 function helloWorld의 리턴값이 없기 때문이다. 그리고 undefined가 호출 된 후 함수 내부에서 setTimeout이 실행되고 있어서 2초의 시간이 소요된다. setTimeout 안에는 callback 함수가 실행되고 있다. (**여기 콜백함수가 ..
-
node.jsconcept/server 2020. 5. 25. 00:27
node.js가 무엇인가? 노드는 크롬 v8엔진으로 만들어진 자바스크립트 런타임이다. v8이 모야? 자바스크립트를 기계어로 컴파일 해준다. 런타임은? 프로그래밍 언어가 구동되고 있는 환경 => 자바스크립트를 컴파일 해주는 엔진으로 빌드된 자바스크립트가 구동 중인 환경이다. 이벤트 기반의 논블로킹 IO모델이다. 이벤트? 유저의 버튼 클릭이나 네트워크에 리소스를 요청하는 것 논블로킹? (비동기) 다음 함수의 실행이 현재 함수의 종료를 기다리지 않음 블로킹? 다음 함수의 실행이 현재 함수의 종료 이후에 이루어지는 것 I/O모델? input을 주면 output을 반환하는 모델 => 유저의 클릭이나 네트워크에 리소스를 요청하는 이벤트가 논블로킹으로 이루어지는 input output 모델 (속도가 빠르다) 어떤 c..
-
Browser Security (CORS, XSS, CSRF)concept/server 2020. 5. 24. 22:40
브라우저는 다양한 공격을 받을 수 있다. CORS (Cross-Origin Resource Sharing) https://developer.mozilla.org/ko/docs/Web/HTTP/CORS Cross-Origin Resource Sharing (교차출처자원을 공유한다.) 보안적인 이유로, 브라우저는 스크립트 내에서 시작한 cross-origin HTTP request 를 제한합니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다. => 웹 애플리케이션의 사용자를 보호하기 위한 브라우저만의 자발적인 보안조치 브라우저간의 데이터를 주고받는 과정에서 도메..
-
이 문제들을 다 풀면 http 정복!problem 2020. 5. 24. 17:03
Q. HTTP에 대한 다음 설명 중 옳지 않은 것은? A 모든 HTTP 요청은 header와 body를 갖는다. B 클라이언트와 서버 간 요청-응답이 이루어지는 과정이다. C 브라우저와 서버가 통신할 수 있도록 만들어 주는 여러 프로토콜 가운데 한 종류다. D 서버가 처리할 수 없는 요청의 경우, 400번대 status code를 반환한다. E 서버는 클라이언트의 요청에 대해 무조건 응답을 돌려 주어야 한다. 더보기 answer A 서버가 처리할 수 없는 요청의 경우, 400번대 status code를 반환한다. D 모든 HTTP 요청은 header와 body를 갖는다. (POST만 가진다) Q. 아래의 HTTP 메시지에 대한 설명으로 잘못된 것은 무엇일까요? A HTTP Response다. B POST..
-
이 문제들을 다 풀면 웹 아키텍쳐 정복!problem 2020. 5. 24. 16:36
출처: 코드스테이츠 Q. 웹 아키텍쳐 전반을 간단히 설명하고자 합니다. 다음 문장에서 빈 칸에 들어갈 키워드를 알맞게 나열하면? - 클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 대표적인 예로 [A]가 있는데, [A]는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다. - 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클라이언트는 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 [B]에 따라 요청을 전송한다. - 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 [C]라는 통신 규약..