본문 바로가기

분류 전체보기50

Toy Project) FSH - Deploy 0.1 Find Specific Hospital 경기도 특수 수술/시술 가능한 병원 찾기 사내 프로젝트가 어느정도 마무리 되어가는 시점에 경기데이터드림 공공API를 활용하여 사이드프로젝트를 진행해보고자 시작하게 되었습니다. 수 많은 데이터 목록 중, 특수 수술 및 시술이 가능한 병원들을 한눈에 볼수 있으면 좋겠다는 생각이 들어 경기도 내 특수수술 / 시술이 가능한 병원 데이터를 선택하였습니다. 혈액투석, 체외충격파쇄석술, 사시수술, 인공와우이식술, 측두하악관절 자극요법, 인공심박동기이식술, 부정맥고주파 절제술, 심율동전환제세동기 거치술, 손/발가락 접합술, 망막수술, 화상치료, 제왕절개 후 자연분만병원, 정맥류 수술, 구순구개열, 안와골절정볼술 이렇게 15항목에 병원데이터를 제공합니다. (이름이 너무 어렵..).. 2021. 12. 21.
Hydrate 이해하기 Hydrate Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정 1. Write site in React 2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React. 3. On Initial Load HTML generated from the server is displayed 4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript 이 과정을 이해하기 위해 Reac.. 2021. 10. 20.
TCP와 UDP 개념과 특징 및 차이점 TCP & UDP TCP와 UDP는 OSI 표준모델과 TCP/IP 모델의 "전송계층" 에서 사용되는 프로토콜이다 "전송계층"은 송신자와 수신자를 연결하는 통신 서비스를 제공하며 IP에 의해 전달되는 패킷의 오류를 검사하고 재전송 요구 제어등을 담당하는 계층이다. (= 데이터의 전달을 담당하는 영역) TCP와 UDP는 1. 포트번호'를 이용하여 주소는 지정 2. 데이터 오류검사를 위한 체크섬이 존재 이 두가지 공통점을 가지고 있지만 정확성(TCP)을 추구할지 신속성(UDP)을 추구할지를 구분하여 나뉜다. TCP - 데이터를 중요하게 생각하여 확실히 주고받고 싶을 때는 TCP (Transmission Control Protocol) 사용 - TCP는 통신할 컴퓨터끼리 '보냈습니다', '도착했습니다' 라고 서.. 2021. 10. 18.
이벤트 루프 (Event Loop) 정확히 알기 (2) 지난 포스팅에서는 이벤트루프에 대해 간략하게 알아보았다. 2021.10.15 - [Front/JavaScript] - 이벤트 루프 (Event Loop) 정확히 알기 (1) 이벤트 루프 (Event Loop) 정확히 알기 (1) 자바스크립트의 특징 중 하나는 '단일 스레드' 기반의 언어입니다. 스레드가 하나라는것은 한번에 하나의 작업만 처리할 수 있다는 말이기도 한데 실제로 브라우저에서 자바스크립트가 사용되 sihus.tistory.com 이번 포스팅에서는 이벤트루프의 동작에 대해 더 살펴보고자 한다. 지난 포스팅에서 이벤트루프란 '단일 호출 스택'을 사용하는 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치' 라고 설명하였다. 그럼 어떻게 엔진과 상호연동하는지 알아보자. 지난 포스팅에서 확인한 브라.. 2021. 10. 17.
이벤트 루프 (Event Loop) 정확히 알기 (1) 자바스크립트의 특징 중 하나는 '단일 스레드' 기반의 언어입니다. 스레드가 하나라는것은 한번에 하나의 작업만 처리할 수 있다는 말이기도 한데 실제로 브라우저에서 자바스크립트가 사용되는 환경을 보면 마치 동시에 처리되고 있는 것처럼 보이게 되는데 (동시성) 어떻게 하나의 작업만을 할 수 있는 단일 스레드인데 '어떻게 동시성'을 지원하는 것일까에 대한 고민으로부터 이 포스팅을 정리해보려고 합니다. 브라우저 환경을 그림으로 표현 (https://meetup.toast.com/posts/89) 위 이미지에서 보면 비동기 호출을 위해서는 자바스크립트 엔진이 아닌 Web APIs 영역에서 이루어 진다고 표현되어 있다. 이벤트루프, 태스크 큐도 엔진 외부에 위치해 있는 것을 볼 수 있다. http://stackove.. 2021. 10. 15.
브라우저 렌더링 성능 최적화 방법 Reflow, Repainting 흐름 맨 처음 브라우저가 로딩될 때 렌더링 과정을 통해 화면이 그려짐 -> 그려진 화면은 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 재구성 됨 Reflow DOM이 추가, 삭제 되거나 DOM 요소의 너비, 높이, 위치 등의 기하학적 영향을 주는 CSS 내용이 변경될 경우 '렌더 트리'가 재구성 된다. 이것을 'Reflow(재배치)' 라고 한다. Repaint 기하학적 영향을 주지 않는 CSS 속성이 변경되었을 경우에는 Reflow 과정을 건너뛰고 Paint 과정부터 수행한다. 'Reflow'가 일어나면 전체 픽셀을 다시 계산하여 재배치하는 과정을 거치기 때문에 부하가 ↑ 'Repaint'는 재배치 과정을 건너뛰고 화면에 그리는 작업만 수행하기 때문에 .. 2021. 10. 14.
Flux Design Pattern 이해하기 (+ 단방향, 양방향 데이터 바인딩) MVC 디자인 패턴이 아닌 Redux의 주개념이자, 리액트를 사용하면서 컴포넌트끼리 데이터를 교류할 때, 글로벌 이벤트 시스템을 설정하는 방법인 Flux 디자인패턴에 대해 알아보고 왜 facebook에서 react와 함께 MVC가 아닌 Flux를 적용하게 되었는지 알아보자 MVC의 한계와 Flux의 등장 개발자라면 한번쯤은 MVC(Model-View-Controller) 디자인 패턴을 사용하여 개발을 해봤을 것이다 그만큼 이 패턴은 어플리케이션 개발에 있어 널리 사용되는 디자인 패턴인데 대채 어떤 부분의 문제가 있길래 Facebook은 Flux라는 디자인패턴을 정의하게 되었을까? 한계 컨트롤러는 모델의 데이터를 조회하거나 업데이트 하는 역할을 하며 모델의 변화는 뷰에 반영된다. 또한 사용자는 뷰를 통해 .. 2021. 10. 11.
[Javascript] 호이스팅(Hoisting)에 대해 정리 실무에서 프론트 프레임워크로 도배된 프로젝트들만 하다보니 자바스크립트의 기본 특성들을 다시 리마인드하고자 포스팅을 하게되었습니다. 그 중에서도 호이스팅(Hoisting) 특성에 대해 정리해보려 합니다. 호이스팅은 Javascript라는 언어의 특성을 가장 잘 보여주는 특성 중 하나입니다. 정의 Hoist의 사전적 정의는 '끌어올리기'라는 뜻을 가지고 있습니다. 자바스크립트에서 끌어올려지는 것은 변수이며, var 키워드로 선언된 모든 변수선언은 호이스트 됩니다. 호이스트란 변수의 정의가 정의된 범위에 따라 '선언'과 '할당'으로 분리되는 것을 말합니다. 1) 변수가함수 내에서 정의되었을 경우, 선언이 함수 스코프안에 최상위로 이동합니다. 2) 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 이동합.. 2021. 10. 7.
[CS] 프로세스와 스레드의 차이 프로그램 (Program) ~ 프로세스 (Process) 프로세스와 스레드의 차이를 설명하기 앞서 프로그램에 대해 설명하자면 저장장치에 파일이 저장되어 있지만 메모리에 올라가 있지 않은 상태라고 말할 수 있다. 운영체제로 부터 프로그램 실행을 위한 독립적인 공간을 할당해 주지 않은 것이라고 생각하면 된다. 다시 말하면 메모리를 할당해 주지 않으면 코드묶음 정도라고 봐도 무방하다. 프로그램을 실행하는 순간 해당 코드묶음이 컴퓨터 메모리에 올라가게 되고 자신만의 독립적인 공간을 할당 받는다. 이 때의 프로그램 상태(동적인 상태)의 프로그램을 프로세스라고 한다. (실행되고 있는 컴퓨터 프로그램) 프로세스 (Process) ~ 스레드 (Thread) 과거 프로그램은 실행부터 종료까지 하나의 프로세스 만을 사용했.. 2021. 10. 5.
[NextJS] Access Token 관리 정리이유 : 페이지 새로고침 시 State가 사라지고 SSR 랜더링에서는 처리방법이 다르기 때문 JWT Access Token을 관리하는 3가지 방법 Cookie Local Storage Session 위 3가지 방법에서 Cookie를 활용해 Token을 관리하고 Session을 유지시키는 방법에 대해 정리 Install Package npm i react-cookies next-cookies npm i @types/react-cookies (타입스크립트 사용 시) *next-cookies 패키지는 Cookie에 담겨있는 값들을 JSON 형태로 변환해줍니다. // 기존 Cookie가 값을 보관하는 방식 accessToken=ABCDEDFD; refreshToken=DFSGGDF; // next-cooki.. 2021. 10. 1.

티스토리툴바