인문학적 공학도

기본 개념 - heap: object, function등의 동적인 메모리 할당 - stack: primitive data, references pointing to the real objects 등의 정적인 메모리 할당. 더 안전 1. reference-counting: js는 더이상 사용하지 않는 object에 대해 gc 실시. circle reference에 대해서 취약. 2. mark-and-sweep: root object로부터 지정된 하위 object까지 도달가능 여부를 따짐. node.js의 경우 new space와 old space의 두 부분으로 나뉩니다. 이름에서 알 수 있듯이, 전자는 새로운 개체(젊은 세대)가 할당되는 위치이고 후자는 오랜 기간(구세대) 동안 생존한 개체의 대상입니다. ..

$ yarn remove node-sass && yarn add node-sass 혹은 $ npm rebuild node-sass 그럼 그 다음은 이런 에러가 뜬다 Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0. node-sass 버전을 낮춰주자 yarn remove node-sass && yarn add node-sass@5.0.0 그런데 안타깝게도 관리자가 더이상 관리하기를 포기한 모양이다 (개빡치네) node-sass Wrapper around libsass www.npmjs.com 터미널에 node -v를 입력했을 때 16버전 쯤으로 나온다면 버전을 14정도로 낮춰주자 nvm을 이용하면 된다 그렇게 되면 can't find modul..

Introducing the New JSX Transform – React Blog Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most ko.reactjs.org 늦은 감이 없잖아 있지만 React 17버전에서는 new JSX transform을 지원한다. 이를 적용하면 import React from 'react..

배열에 원소를 추가할 때 unshift를 쓰곤 한다. arr = [2, 3, 4] arr.unshift(1) arr.unshift(0) console.log(arr) // [0, 1, 2, 3, 4] 그러나 unshift는 다음과 같이 배열의 값을 직접 참조하여 원본 배열에 변형을 일으키는데, 불변성의 이슈에서나 성능 상의 이유에서나 좋지 못하다. arr = [2, 3, 4] // 0: 2, 1: 3, 2: 4 arr.unshift(1) // 0: 1, 1: 2, 2: 3, 3: 4 arr.unshift(0) // 0: 0, 1: 1, 2: 2, 3: 3, 4: 4 보시다시피 배열의 원소와 인덱스의 연결이 전부 끊어지고 새로운 값이 할당된다. 중간에 새로운 원소가 끼어들거나, 최악의 경우 첫 번째에 새로..

네이버에서 일할 당시 알 수 없는 버그 때문에 곯머리를 앓은 적이 있다. forEach 내에서 루프를 돌며 비동기 구문을 처리하려 했다. 대강 이런 식의 코드였다. console.log("start Analysis") ... urls.forEach(url => { const screenEmulation = ... await exec( ... ) .then((message) => { logger.debug(message) }) .catch((error) => { logger.debug(error) }) }) ... console.log("finish Analysis", Date()) 그러나 순서대로 작동할 것이라는 예상과는 달리 콘솔에는 다음과 같이 출력이 됐다. start Analysis finish A..

세션과 쿠키가 필요한 이유는? HTTP의 두 가지 특징때문에 세션과 쿠키가 필요합니다. Connectionless(비 연결지향) 클라이언트에서 서버에 요청을 보내면 서버는 클라이언트에 응답을 하고 접속을 끊는 특성이 있습니다. Stateless(상태정보유지안함) HTTP 통신은 요청을 응답하고 접속을 끊기 때문에 클라이언트의 상태정보를 알 수 없습니다. 이를 Stateless하다고 합니다. 이러한 상태에서는 통신할 때마다 스스로를 인증해야합니다. 웹사이트 내에서 이동할 때마다 로그인을 새로해야하는거죠. HTTP 프로토콜에서 로그인을 유지한 채로 웹 서비스를 제공하기 위해 쿠키와 세션을 이용합니다. Session 세션이란 브라우저를 통해 웹서버에 접속한 시점부터 브라우저가 종료되기 전까지 클라이언트의 요청..

한창 취준을 하면서, 연습삼아 여기저기 인터뷰를 보고 있다. 오늘은 화상통화를 하며 1시간 동안 js와 react 문제를 해결하는 형식의 인터뷰를 진행했다. 그리고 1번으로 나온 문제다. for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 10); } 늘상 코딩테스트 단골문제로 나온다고 다른 블로그에서 스치듯 지나간 문제이다. 언뜻 보기에 별 문제없는 코드이고 정상적으로 0부터 9까지 출력될 것 같다. 그러나 실상은 다르다. 제대로 된 원리를 알지 못해 미심쩍어하면서도 0~9를 적은 본인을 탓하며, 왜 이렇게 돌아가는지 조사해보았다. 간단하게 말해보자면 setTimeout 내의 callback 함수는 모든 함수가 종료되고 난..

create-react-app만 사용하며 언젠가는 직접 개발환경을 세팅해야지 미루다가 드디어 하루 꼬박 들여서 기본 개발환경을 바닥부터 세팅하였다. 클론해다가 그대로 이용하기만 하면 되니 애용 부탁드린다. student513/react-dev-template react 작업환경이 세팅된 템플릿. Contribute to student513/react-dev-template development by creating an account on GitHub. github.com

1. key에 index를 사용하지 않는 이유 Key란? React에서 여러 컴포넌트를 동적으로 생성하여 표시할 때 반드시 고유의 key를 주도록 하고 있습니다. Key 속성은 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. // key를 사용한 배열 렌더링 예시 const todoItems = todos.map((todo) => {todo.text} ); Key를 사용하는 이유는? 요소의 변화를 탐지하기 위해 필요합니다. React는 기본적으로 state 중 변화가 발생할 때만 캐치해서 DOM을 업데이트 합니다. state의 배열에 어떤 요소가 추가되었을 경우, 배열 전체를 리렌더링하기보다는 추가된 요소만을 리렌더링하는 것이 더 효율적입니다. arr = [ {id: 0, t..

Transport Layer Protocol TCP, UDP는 5 layer 중 Transport Layer의 통신 프로토콜입니다. Transport Layer는 logical connection을 기반으로 프로세스 간의 통신이 일어나는 레이어입니다. End point간 신뢰성 있는 데이터 전송을 담당하는 계층입니다. 신뢰성: 데이터를 순차적이고 안정적으로 전달 전송: 포트번호에 해당하는 프로세스에 데이터를 전달 flow control을 담당 congestion control을 담당 TCP: 연결기반, 신뢰성 Application으로부터 받은 Message에 header를 붙여 encapsulation하여 세그먼트로 만들어 logical channel로 전송합니다. 데이터 전송단위: Segment 신뢰성..