본문 바로가기

전체 글

 (157)
리액트(react)의 props와 state에 대하여 그전에 앞서서 리액트라는 언어가 생기게 된 배경을 설명해보도록 하겠다. 다음과 같은 네이버 웹사이트 화면이 있다. 맨위의 네이버 웨일 클릭하는 화면이 있다. 이것이 어떻게 구성되어있는지 보자.. 간단해보이지만 수많은 태그로 묶여져 있는 것을 확인할수 있다. 이런것들을 수천만개 수억개 생성해야할경우에 얼마나 많은 작업들이 있을지 상상이 가는가?... 그 점을 방지하기 위해서 facebook에서 만든 것이 react라는 툴이다. 그럼 react 를 사용하기 위해서는 어떻게 하면 좋을까?... 그럼 react를 검색해서 react 공식 문서로 가보자.. 효율적으로 갱신하고 랜더링... 컴포넌트 기반.. 상태관리에 대한 용이.. 뭐 줄줄이 나열해 놨지만..결국 사용하기 위한 목적을 정리하면 1. 가독성 2. 재..
[javascript] CommonJS & Asynchronous 보호되어 있는 글입니다.
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)에 대하여... 그림 두개를 참조해보자... 클라이언트는 서버에게 요청을 하고 서버는 클라이언트에게 반환을 한다. 클라이언트는 서버와 다르게 여러개가 존재한다. 서버 하나에 여러개의 클라이언트가 붙는다는 것이다. 그렇다면 이제 클라이언트와 서..
self assment tree.map 구현에 대하여.... 트리 구조(tree 構造, 문화어: 나무구조)란 그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조이다. 간단하게는 회로가 없고, 서로 다른 두 노드를 잇는 길이 하나뿐인 그래프를 트리라고 부른다. 트리에서 최상위 노드를 루트 노드(root node 뿌리 노드[*])라고 한다. 또한 노드 A가 노드 B를 가리킬 때 A를 B의 부모 노드(parent node), B를 A의 자식 노드(child node)라고 한다. 자식 노드가 없는 노드를 잎 노드(leaf node 리프 노드[*])라고 한다. 잎 노드가 아닌 노드를 내부 노드(internal node)라고 한다. javascript로 트리를 구현해보자 트리를 구현할려면 트리가 연결되는 부분 즉 노드가 필요하다. 노드를 작성해보자. 1 2 3 ..

티스토리툴바