본문 바로가기

전체 글

(88)
[JS] 메모리 힙과 콜스택 자바스크립트 엔진이 구동되면서 코드를 읽고 실행하는 과정에서 아주 중요한 두가지 단계가 있는데. 정보(ex. 변수, 함수 등)를 특정한 장소에 저장하는 것 실제 실행되고 있는 코드를 트래킹하는 작업(실행 컨텍스트) Memory Heap 메모리 힙(Memory Heap)은 변수, 함수 저장, 호출 등의 작업이 발생하여 아래 내용들이 진행되는 공간이다. 어느 언어든지 메모리 생명주기는 비슷하다. 위 이미지로 예를 들자면 자바스크립트 코드에서 var num = 20; 이라는 구문이 있을때 "박스하나를 주고 그 박스에 num이라는 라벨을 붙이고 20을 넣어줘" 같은 말이다. 필요할때 할당한다. (allocate, 할당) 사용한다. (읽기, 쓰기) (use, 사용) 필요없어지면 해제한다. (release, 해제)..
[JS]실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)란 자바스크립트 코드가 scope, hoisting, this, function, closure 등의 동작원리를 담고 실행되는 환경을 말한다. 자바스크립트 코드가 실행되는 순간 전역 컨텍스트가 Stack에 쌓이게 되고 다른 함수가 호출될때마다 쌓이게 되는 구조라고 생각하면된다. 컨텍스트의 원칙 4가지가 있다. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성된다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다. 함수 실행이 마무리되면 해..
쿠키(Cookie)와 세션(Session)과 로컬 스토리지(Local Storage) 구분 쿠키(Cookie) 세션(Session) 로컬 스토리지(Local) 저장 공간 Client(browser) Server Client(browser) 데이터 타입 Text Object Object 만료 시점 서버에서 정할 수 있음 브라우저 종료 영구(삭제가능) 리소스 Local Server Local 용량제한 300개 저장가능, 도메인당 20개, 4Kb Server의 리소스 5MB 발급처 Client, Server Client Client 보안 세션보다 안좋음 쿠키보다 좋음 쿠키와 동일 요청 속도 빠름 느림 쿠키와 동일 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용된다. Connectionless 프로토콜 (비연결지향) 클라이언트가 서버에 요청(Request)을..
브라우저 기본 동작원리 브라우저란? HTML 문서와 그림, 멀티미디어 파일 등의 콘텐츠를 검색 및 표현하는 소프트웨어를 말한다. 북한의 문화어로 열람기라고 말하는데 잘 해석한 말 같다. 브라우저의 주요 기능 사용자가 요청한 자원들을 서버에서 요청하여 브라우저에 가져오는 일을 한다. 요청한 자원이 HTML, XML, Image 등등 다양한 형태로 서버로부터 가져온다. 브라우저는 HTML과 CSS 명세에 따라 html 파일을 해석해서 브라우저의 렌더링 한다. 이 '명세'는 웹 표준화 기구인 W3C(World wide web Consortium)에서 정해짐. 이때 렌더링 하는 과정을 보자면 브라우저 렌더링 서버로부터 다운로드한 HTML과 CSS을 파싱 하여 Object Model로 만든다. 1. HTML -> DOM, CSS -> ..
[React] state와 props에 차이점. 리액트에서 흔히 쓰이는 state와 props 둘의 사용법은 대략 비슷하다. 하지만 분명 차이점이 있고 사용방법도 차이가 있다. State import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } props function Welcome(props) { return Hello, {props.name}; } Props - 읽기 전용(변할 수 없다.) - 부모 요소(컴포넌트)에서 선언되어야 하며 변경도 부모요소(..
[React] 고차 컴포넌트 고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 고차 컴포넌트는 그 자체로는 React API가 아니다. 고차 컴포넌트는 React의 컴포넌트적 성격에서 나타나는 패턴이다. 구체적으로 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수이다. 컴포넌트가 UI를 props로 변환하는 반면, 고차 컴포넌트는 컴포넌트를 다른 컴포넌트로 변환한다. 다시 말해서 컴포넌트들의 부모가 되는 컴포넌트이다. 아래 컴포넌드처럼 props를 반환하여 리덕스를 보다 효율적이게 사용할 수 있다. /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect } f..
[express] 정적(static) 파일 서비스 1. 필요한 이유 multer를 통해 서버에 저장한 이미지를 클라이언트에 줘야할때 어떻게 줘야할지 고민하다가 express에서 정적 파일 전달 서비스를 이용하여 전달하는 방법으로 구상해보았다. png, css, js 등 이미지 이외에도 전달이 가능하다. 2. 사용 방법 app.use(express.static('public')); express 라이브러리에는 stastic이라는 메서드가 있다. 이 메서드를 미들웨어로서 로드해둔다 static의 인자로 전달되는 'public'은 디렉터리의 이름이다. 따라서 'public' 이라는 디렉터리 밑에 있는 데이터들은 웹브라우저의 요청에 따라 제공해줄 수 있게되었다. ​ 가령, 사용자가 localhost:5000/images/cat.jpg 로 접근한다면, 해당 파일..
[Node] The "path" argument must be of type string. Received undefined 에러 해결 - 문제 원인 package.json에서 버전이 변경되었기 때문에 이런 에러가 나온다. - 문제 해결 1. package.json을 열고 react-scripts": "^4.0.3" 로 변경 2. 터미널에 아래 내용을 타이핑한다(재설치) npm install