프론트엔드 개발

local에서 작업하였던 것을 AWS에 연결하여, 배포 서버에서 build하는 방식을 지양하려고 하고 있다 서버의 메모리 부족으로 인해, client가 몰릴때 서버에서 build를 한다면, 터져서 다른 시스템이 다운되는 현상이 발생 pm2란? Node.js용 Process manager pm2 사용이유 Node.js를 활용한 실제 서비스를 무중단으로 운영하기 위해 Node.js의 클러스터 모듈을 사용해서 원하는 수 만큼 프로세스를 쉽게 늘리고 줄일 수 있게 하기 위해 pm2 설치 방법 npm install pm2 -g 이외에 pm2를 자세하게 보고 싶다면 공식문서나 이곳을 참고하세요 로컬에서 build 하는 방식 Tools: ftp(fileZila) Solution 1. sftp 이용, 공인키 인증하는 ..

React에서 자주 사용되는 setState를 사용하는데 문제가 있었고, 어떠한 원리로, 비동기 동작을 하는지 이해하고 사용하려 한다. setState 역할 setState()가 쓰일 때, 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리 렌더링 됩니다. state와 props의 차이점 props와 state는 Javascript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다. props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리되는 차이점이 있습니다. 더 자세히 알고 싶다면 여기를 참고하세요 언제 setState가 비동기로 작동할까? import React, { useState } from "react"; func..

ECMAScript 6부터 일 년 단위 릴리스(yearly release)로 변경된 이후로, 해마다 연도별 명세가 완성되고 공개되고 있다. 2020 6월18일 ECMAScript 2020(ECMA-262 11번째 에디션)이 공식적으로 릴리스 되었다. ECMAScript 2020 릴리스된 내용들을 살펴보겠다. Optional Chaining (?.) 연산자인 ?.는 연결된 체인의 속성 값이 nullish(null 또는 undefined)인 경우, undefined를 반환한다. const title = data && data.article && data.article.title // 위의 표현식은 다음의 optional chaining 연산자를 통해 동일하게 표현될 수 있다. const title = dat..

프로세스와 스레드의 차이란? 프로그램: 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태. 프로세스: 운영체제로부터 자원을 할당받은 작업의 단위. 스레드: 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위. 프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이 상태를 동적인 상태라고 하며 이 상태의 프로그램을 프로세스라고 한다. 운영체제는 프로세스마다 각각 독립된 메모리 영역을, Code/Data/Stack/Heap의 형식으로 할당해 준다. 각 프로세서는 독립된 메모리 영역을 할당해 주기 때문에 프로세스는 다른 프로세스의 변수나 자료에 접근할 수 없다. 할당받는 시스템 자원의 예 - CPU 시간 - 운영되기 위해 필요한 주소 공간 - Code, Data,..

오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 실행 중인 애니메이션이나 전환이 있거나 사용자가 페이지를 스크롤 중이면, 브라우저가 기기의 새로고침 빈도에 일치하여 각 화면 새로고침에 대해 하나의 새 그림이나 프레임을 제공해야 합니다. 각 프레임에는 16ms 가량의 시간만 할당됩니다(1000ms/60 = 16.66ms). 하지만 실제로 브라우저는 실행 준비를 해야 하므로 10ms 내에 모든 작업을 완료해야 합니다. 이 제한 시간을 충족하지 못하면 프레임 속도가 떨어지고 화면에서 콘텐츠가 떨리게 됩니다. 이러한 현상을 버벅거림 현상이라고 하며 사용자에게 거부감을 줍니다. 이러한 현상이 어디서 발생할 수 있는지 알아보고, 어떻게 해결하면 좋을지 이번 시간을 통해 보겠습니다. 브라우저는 C..

브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 뒤, 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성으로 나뉘는데 단계마다 어떤 일이 발생하는지 알아보겠다. 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다. 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계이다. 파싱 중 , , 를 발견하면 각 리소스를 요청하고 다운로드한다. HTML 또는 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행한다. 크롬 브라우저 Rendering Path HTML Parser DOM: Document Object Model - Document = HTML, well-formed XML - ObjectModel = Data + Method Javascr..

프로그래밍 패러다임 - 절차 지향 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 함수형 반응형 프로그래밍 함수형에 특화된 프로그래밍 언어들 F# Haskell OCaml Erlang 함수형 프로그래밍을 지원하는 언어들 Javascript Kotlin Go Python Java C++ 등 1958년 최초의 함수형 프로그래밍 언어인 LISP가 나오게 되었는데, 최근에 함수형 프로그래밍이 다시 화제가 된 이유는, 요즘 AI, IoT, 빅데이터, 비트코인이 화제가 되면서, 방대한 데이터를 빠르게 계산해서 병렬적, 안정적으로 처리하는 것의 중요성이 부각되면서 다시 주목받기 시작한 것 파이프라인과 비유해 보면, 인풋(입력)을 넣으면 처리과정을 거쳐서 아웃풋(결과)가 나오게 되는 것이며, 외부에서는 파이..

JavaScript는 CallStack, Event Queue를 이용하여 Single Thread 기반으로 동작한다. Single Thread 기반에서는 단 하나의 CallStack만 존재하기 때문에 네트워크 요청 등 비용이 많이 드는 연산을 수행하게 되면 매우 비효율적으로 동작된다. 이러한 문제점을 어떻게 해결해나갈까? 자바스크립트 자바스크립트 엔진은 실행할 전체 함수를 실행 직전에 간단히 변수 및 함수 선언들만 스캔하는 JIT 컴파일 과정을 거치기 때문에 컴파일 과정을 갖는 인터프리터 언어라고 부릅니다. 자바스크립트 엔진 자바스크립트 엔진의 대표적인 예는 Google V8 엔진입니다. V8 은 Chrome 브라우저와 Node.js에서 사용합니다. 엔진의 주요 두 구성요소는 Memory Heap : 메..