전체 글
-
React Hooks - useRef 사용법Web Dev/3. React 관련 2021. 2. 4. 14:32
UseRef 사용법 [공식 문서] // 값을 넣는 경우 const refContainer = useRef(initialValue); // dom을 선택하는 경우 function sampleFunc() { const inputRef = useRef(null); const onButtonClick = () => { inputRef.current.focus(); } return ( Focus the input ) } useRef는 .current 속성만을 가진 객체를 반환해준다. initialValue가 이 current에 할당된다. 이 객체는 컴포넌트의 full lifetime 동안 있는다. 즉, useRef는 .current에 변할수있는 값을 넣을 수 있는 박스이다. 특히 위의 예시 코드의 sampleFu..
-
1. Thread of Execution, Functions, and Call StackWeb Dev/1. JS 문법 관련 2021. 2. 4. 11:45
1. Thread란 [여기] - main thread: 브라우저가 유저 이벤트, 렌더링, 페인팅 등을 하기 위해서 사용하는 것. 웹 페이지나 앱에서 사용하는 것이다. 한 thread에서 일어나기 때문에 스크립트가 느리면 브라우저가 멈출 수 있다. - web workers: modern javascript는 추가적인 thread를 생성할 수 있다. 서로와 통신할수도 있으면서 각자 실행할 수도 있는 이 기술을 web worker라고 부른다. main thread와 동시에 실행된다. 이를 통해서 multi-core processors의 이점을 이용할 수도 있다. - service worker: 특별한 종류의 워커로, 유저의 권한이 있다면 사이트가 꺼져있을때도 실행되면서 notification 같은 것을 보내준..
-
[함수형 프로그래밍] 섹션8. 지연성 2Web Dev/1. JS 문법 관련 2021. 2. 3. 11:36
해당 Repository를 clone 하신 후, http-server ./section8 을 통해서 확인하실 수 있습니다 결과를 만드는 함수 reduce, take take를 한시점에 몇개의원소를 가져올지 결과를 만든다 reduce 객체를 통해서 쿼리 스트링을 만드는함수 find 와 take find는 take로 결론을 내리는 함수 L.flatter [[1, 2], 3, 4, [5, 6], [7, 8, 9]]를 하나로 펼치는 함수 L.flatMap, flatMap map과 flatten을 동시에! 2차원 배열 다루기 현기증 난다...
-
yield * 사용법Web Dev/1. JS 문법 관련 2021. 2. 3. 10:39
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield* yield* - JavaScript | MDN The yield* expression is used to delegate to another generator or iterable object. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/md developer.mozilla.org L.deepFlat([ [1, 2..
-
[함수형 프로그래밍] 섹션7. 지연성 1Web Dev/1. JS 문법 관련 2021. 2. 2. 17:03
해당 Repository를 clone 하신 후, http-server ./section7 을 통해서 확인하실 수 있습니다 Range 숫자를받고 그만큼의 숫자를 반환하는 함수 느긋한 L.range generator를 이용한다 log(reduce(add, llist)): L.range는 코드 평가가 reduce를 실행하면 이뤄진다 take 인자를두개 받고, limit과 이터러블, limit 갯수까지만 반환하는 함수 이터러블 중심 프로그래밍에서의 지연 평가(Lazy Evaluation) 제때 계산법 느긋한 계산법 제너레이터/이터레이터프로토콜을 기반으로 구현 L.map L.filter range, map, filter, take, reduce 중첩 사용 L.range, L.map, L.filter, L.take..
-
[FakeFlix] TypeScript적용하기(eslint, prettier)Web Dev/5. Projects 2021. 2. 1. 12:23
TypeScript를 적용할 repo [fakeflix] TypeScript 진행과정 메모 1. Volta를 통해서 yarn 또는 npm, node 등의 버전을 고정 volta pin yarn node 2. TypeScript 적용 yarn add typescript 3. 현재 쓰는 패키지중에 type 정보가 없는건 types를 추가한다. yarn add -D @types/node @types/react @types/react-dom @types/jest @types/justified-layout @types/react-router-dom @types/styled-components typescript를 적용하고자할때는 기존에 사용중이던 패키지(JS로 된애들)의 타입을 정의한 패키지를 설치해줘야한다. 이..
-
HTTP 완벽 가이드 8장 통합점Web Dev/7. 네트워크 2021. 1. 30. 11:47
통합점: 게이트웨이, 터널, 릴레이 게이트웨이: 서로 다른 프로토콜과 애플리케이션 간의 HTTP 인터페이스 애플리케이션: 서로 다른 형식의 웹 애플리케이션이 통신하는데 사용한다 터널: HTTP 커넥션을 통해서 HTTP가 아닌 트래픽을 전송하는데 사용한다 릴레이: HTTP 프락시로 한번에 한개의 홉에 데이터를 전달하는데 사용한다 cgi란? [여기] www.quora.com/What-is-the-difference-between-Python-CGI-and-Django-Are-they-same wsgi, was, cgi 이해 ssl이란? [여기] ssl터널링? 웹터널은 원래 방화벽을 통해서 암호화된 ssl트래픽을 전달하려고 개발했다 많은 회사가 강력한 보안을 위해 모든 트래픽이 패킷을 필터링하는 라우터와 프락..
-
HTTP 완벽 가이드 7장 캐쉬Web Dev/7. 네트워크 2021. 1. 30. 11:47
웹캐쉬란? 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치 웹 요청이 캐시에 도착했을때, 캐시된 로컬 사본이 존재하면 그문서는 원서버가 아니라 캐시로부터 제공된다 캐쉬가 주는 혜택 불필요한 데이터 전송을 줄여서, 네트워크 요금으로 인한 비용을 줄여준다 네트워크 병목을 줄인다. 대역폭을 늘리지 않고도 페이지를 빨리 불러올 수 있다 원서버에 대한 요청을 줄인다 서버 부하를 줄이고, 더 빨리 응답을 줄수있다 먼곳에서 불러올수록 시간이 많이 걸리는데, 캐시는 거리로 인한 지연을 줄여준다 적중과 부적중 캐시에 요청이 도착했을때, 그에대응하는 사본이 있으면 캐시 적중(chche hit) 없으면 원서버로 요청 전달. 캐시 미스(cache miss) 재검사(revalidation) 원서버 컨텐츠가 변경되는것..