분류 전체보기 84

리액트(React) - useState 내부 구현과 동작 원리(feat : 클로저)

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다.그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다.  함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다.해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다.함수가 재호출 되었을때 이전 ..

React 2023.09.25

자바스크립트(javascript) - 엔진,런타임,힙,스택,이벤트루프,프로세스

자바스크립트 엔진(javascript engine) JavaScript 엔진은 JavaScript 코드를 해석하고 실행하는 역할을 담당. 주요 JavaScript 엔진에는 V8(Chrome 및 Node.js에서 사용), SpiderMonkey(Firefox에서 사용), JavaScriptCore(Safari에서 사용), Chakra(이전 버전의 Microsoft Edge에서 사용)가 포함. 주요 역할파서 (Parser): 자바스크립트 코드를 읽고 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 역할을 한다. AST는 코드의 구조를 표현하며, 엔진은 이를 분석하여 실행에 필요한 정보를 추출한다.인터프리터 (Interpreter): 변환된 AST를 실행 가능한 명령어로 해석..

JavaScript 2023.09.25

[Typescript] - Exclude, Omit, Pick, Partial, Required, Record / 유틸리티 타입(Utility types)

유틸리티 타입(Utility type)이란? TypeScript에서 제공하는 내장 타입 중 하나로, 기존 타입을 조작하고 변환하는 데 사용되는 타입이다. 이러한 유틸리티 타입은 코드를 더 간결하고 유지보수하기 쉽게 만들어주며, 타입 안정성을 높이는 데 도움이 된다. 자주 사용되는 TypeScript 유틸리티 타입들 Exclude ExcludedMembers'에 할당할 수 있는 모든 union 멤버를 'UnionType'에서 제외하여 Type을 생성합니다. type T0 = Exclude; //type T0 = "b" | "c" type T1 = Exclude; //type T1 = "c" type T2 = Exclude void), Function>; //type T2 = string | number U..

TypeScript 2023.09.21

RSA(암호화 알고리즘) /SSH(보안 셸) 간단 정리

RSA RSA(암호화 알고리즘)는 공개 키 암호화 방식으로, 안전한 데이터 전송 및 정보 보호에 널리 사용되는 암호화 기술이다. RSA는 대표적인 공개 키 알고리즘으로 알려져 있으며 주로 적은 양의 데이터나 전자서명에 사용한다. 다음과 같은 원리로 작동한다: 1. 키 생성: - RSA 알고리즘은 두 개의 소수(p, q)를 선택합니다. 이 소수는 매우 큰 수로, 소인수 분해가 어려워야 합니다. - 소수 p와 q를 사용하여 공개 키와 개인 키를 생성합니다. 공개 키는 (N, e)로 표현되고, 개인 키는 (N, d)로 표현됩니다. - N은 p와 q의 곱으로, 큰 정수입니다. N은 공개되며 모듈러 연산에 사용됩니다. - e는 1보다 크고 (p-1)(q-1)과 서로소인 수로, 암호화에 사용됩니다. - d는 e에 ..

Server , etc 2023.06.23

react-query(리액트쿼리)란?

react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..

React 2023.05.19

OSI 7 계층(osi 7 layer)

OSI 7 Layer란 OSI 7 Layer는 네트워크 프로토콜과 통신을 표준화하기 위해 개발된 ISO(국제 표준화 기구)의 OSI(Open Systems Interconnection) 모델이다. 이 모델은 7개의 계층으로 구성되어 있으며, 각 계층이 서로 상호 작용하여 전체 네트워크 통신 프로세스를 지원한다. 1.응용 계층 (Application Layer): 이 계층은 사용자와 직접적으로 상호작용하는 소프트웨어 애플리케이션을 제공. 이메일, 파일 전송, 웹 브라우저 등과 같은 애플리케이션을 제공한다. 사용자 인터페이스 및 응용 프로그램을 처리 이메일, 웹 브라우저, FTP 클라이언트 등 다양한 프로토콜이 포함 2.표현 계층 (Presentation Layer): 이 계층은 데이터의 표현 방법을 정의...

Networks 2023.05.11

자바스크립트 비동기(Asynchronous) 과정 .feat(AST)

자바스크립트에는 동기식과 비동기식이 있다. 동기식(Synchronous) 이란단순하게 순서대로 실행되는데 1번이 실행되고 1번이 끝이 나면 2번이 실행되고 끝나면 그다음 작업들이 이런 과정으로 처리되는 것이다. 실행 순서가 보장되자만 한 번에 하나씩 처리 되기 때문에 한번에 여러 개의 작업이 불가능하다. 비동기식(Asynchronous) 이란동기식과 다르게 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음작업을 시작할 수 있다. 한 번에 여러 일을 처리 할수 있다. 한번에 여러 가지 작업을 처리할 수 있지만 작업 순서가 보장되지 않는다.   JavaScript 는 동기식 언어이다? 자바스크립트는 단일 스레드(싱글) 이다 . 메인 스레드인 이벤트 루프가 싱글 스레드 이기 때문이다.하지만 이벤트 루프만 독..

JavaScript 2023.05.08

리액트(react) - JSX(JavaScript XML) 란 .feat(symbol)

※콘솔로 jsx 찍어보고 궁금증이 생겨서 정리하기 JSX 란 JSX는 별도의 언어가 아니라 개발자가 JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장이다. UI 구성 요소를 설명하는 더 읽기 쉽고 표현적인 방법을 제공하므로 코드를 더 쉽게 이해하고 유지 관리할 수 있다. JSX 코드는 HTML처럼 보이지만 실제로는 Babel과 같은 도구에 의해 일반 JavaScript로 변환되는 구문이다. 결과 코드는 UI 구성 요소를 만들고 조작하는 JavaScript 함수 호출 집합이다. JSX 코드는 HTML과 유사한 태그와 JavaScript 표현식을 모두 포함할 수 있으므로 개발자가 동적 데이터를 UI 구성 요소에 쉽게 포함할 수 있다. 콘솔을 찍어보고 생긴 궁금증 배열에 J..

React 2023.04.26

자료 구조 / data structure , 자료구조란

자료구조란 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미한다. 자료구조는 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 잘 정리해서 담아두고 관리하고 최종적으로 가장 효율적인 방식으로 필요한 데이터를 빠르게 접근하고 필요한 수정/삽입/삭제 를 할 수 있도록 도와준다. 한정적인 자원에서 메모리를 효율적으로 사용하기 위해서 필요하다 모든 목적에 부합하는 자료구조는 없으며 필요 목적에서 효율적인 자료 구조를 선택하여 효율을 높일 수 있다. 자료 구조는 알고리즘과 밀접한 관계 가 있는데 이유는 보통 자료구조가 선택되면 그에 적용할 알고리즘이 거의 명확해진다. 예) 배열이라면 반목문을 사용한 알고리즘 이라던지 즉 자료 구조가 효율적..

Server , etc 2023.04.24

Http / Https 란? (http 와 https 차이)

1. httpHTTP란 Hypertext Transfer Protocol의 약자이다.HTTP 는 HTML 문서와 같은 리소스를 가져올 수 있도록 해주는 프로토콜인데HTTP 는 웹에서 이루어지는 모든 데이터 교환의 기초이며 클라이언트-서버 프로토콜이기도 하다무상태성(STATUSLESS)을 가지며 이는 단방향 통신을 의미한다.Method, Path, Version, Headers, Body 등을 가지고 있다. 요청이 있을 때만 서버가 응답 하여 해당 정보를 전송하고 연결을 종료한다.(단방향)  HTTP는 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜로 보안에 취약하다.(비번등을 주고 받으면 제 3자가 정보를 조회가능) - 80 번 포트 사용 2.httpsHTTPS(Hyper Text Transfer P..

Networks 2023.04.24

React(리액트) 하위 컴포넌트에서 데이터(data) 받아서 상위 컴포넌트로 전달.

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

React 2022.05.17

객체지향 복습 OOP , 객체지향 개념정리

OOP - 객체지향 개념 정리 캡슐화 데이터와 데이터를 활용하는 함수를 캡슐 혹은 컨테이너 안에 두는 것을 의미하는데 이 경우 캡슐은 class를 의미한다. (함수와 데이터가 개념적으로 연관되어 있으면 캡슐화를 사용해서 코드를 개선할 수 있다.) 장점은 코드가 구조화되고 함수나 메서드가 인수를 취할 필요도 없다. (this키워드로 데이터에 직접 액세스 할 수 있기 때문) 캡슐화를 사용하여 표시할 클래스의 속성과 숨길 속성을 선택할 수 있다. 캡슐화는 어떻게 클래스 정보에 접근 혹은 수정하는지를 결정하는 권한을 제공한다. 캡슐화는 데이터 그리고 class 안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법론 상속 코드를 더 작은 단위로, class로 쪼개고 재사용할 수 있다. 클래스를 extends..

JavaScript 2022.05.10

JavaScript 자바스크립트 ES6 문법 정리하기.

ES6 JavaScript - 요약 let & const Arrow Function Export & Imports Classes Spread & Rest Operator Destructuring Promises Default parameters Template Literals let & const let과 const 는 기본적으로 var 를 대체한다. 함수 스코프와 재선언 재할당이 가능한 var는 중복 선언이 가능하기 때문에 위에서 해당 변수를 선언하고 아래서 실수로 다시 사용할 경우 예상하지 못하는 전혀 다른 결과를 나타낼 수 있다. 그리고 함수 레벨 스코프로 인해서 for문을 예로 들면 for문이 함수 내부가 아닌 외부에서 돌아갈 경우 전역 변수로 역할을 하기 때문에 이 또한 예상치 못한 결과를 나올..

JavaScript 2022.05.02

오늘의 에러 <리액트,react 에러> (You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1))

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..

Server , etc 2022.04.29

typeScript (타입스크립트) 시작하기

typeScript (타입스크립트) 는 자바스크립트(javaScript)의 슈퍼셋으로 오픈소스 프로그래밍 언어이다. MS - 마이크로소프트에서 개발 유지 관리하며 동적인 자바스크립트를 정적으로 사용할 수 있게 해 준다. 자바스크립트 동적 타입 언어로써 다른 정적 언어 타입보다 유연하지만 그만큼 안정성이 보장받지 못한다. 자바스크립트에서 타입을 제어함으로써 좀더 안정성 있는 개발을 할 수 있게 도와준다. 시작하기 1. node.js 설치 - https://nodejs.org/ko/ 2. 설치후 에디터 터미널에 npm install -g typescript 입력 3. tsconfig.json 만들기 (작업할 폴더에) 4. tsc -w 터미널에 입력 (ts 파일을 실시간으로 js파일로 컴파일 시켜준다.) 5...

TypeScript 2022.04.18
반응형