개념 창고

[Java] Unsigned int 구현 방법

자바에서는 C와 같은 언어에서처럼 명시적으로 unsigned int를 지원하지 않습니다. 자바에서는 모든 정수 타입이 부호를 가지며, 음수와 양수를 모두 표현할 수 있습니다. 그러나 구현을 한다면, 버전별로 쉽게 두 가지 방법이 있습니다. 자바 8 이전(기존 방식) long unsignedIntValue = Integer.toUnsignedLong(signedIntValue); Java 8 이후 (Unsigned 클래스 사용) import java.util.concurrent.atomic.AtomicInteger; import java.util.concurrent.atomic.AtomicLong; // 부호 없는 int int unsignedIntValue = Integer.toUnsignedInt(si..

MSB(Most Significant Bit) & LSB(Least Significant Bit)

단순 요약 : MSB(Most Significant Bit)는 정보를 나타내는 비트, 해당 이진수의 가장 왼쪽에 위치한 비트를 가리킵니다. LSB(Less Significant Bit)는 이진수에서 가장 낮은 자리에 있는 비트를 나타냅니다. 컴퓨터에서 수를 표현할 때, MSB가 부호를 결정하며, 1이면 음수, 0이면 양수임을 뜻합니다. 즉, 맨 앞의 비트는 부호를 나타내고, 두번째부터 끝까지 비트로 수 자체를 나타냅니다. 개념 설명 MSB(Most Significant Bit)는 정보를 나타내는 이진수에서 가장 중요한 비트를 나타냅니다. 이진수는 0과 1로 이루어진 수 체계이며, MSB는 해당 이진수의 가장 왼쪽에 위치한 비트를 가리킵니다. 이진수의 각 비트는 2의 거듭제곱을 나타내며, MSB는 가장 큰..

Signed & Unsigned 정의 및 차이

언어들에서 어렵지 않게 자주 접하게 되는 이 keyword, 개념을 알아보겠습니다. 쉽게 이해하는 방법은 두 가지가 있습니다. 1. SIGN => 부호가 있다. UNSIGN => 부호가 없다. 즉, '-' 가 있냐, 없냐로 이해하기 2. '음수까지 표현하느냐, 음수를 표현하지 않느냐' 로 이해하기 - signed : 양수, 음수가 있는 수 (부호를 가지는 값, 양수/음수 구분 O) - unsigned : 양수만 있는 수 (부호를 갖지 않는 값, 양수/음수 구분 X) 부호를 보는 한 MSB(Most Significant Bit)를 부호로 사용하게 되는데, 그 부분을 숫자의 부분으로 활용하여 음수를 표현하지 못하는 대신, 양수의 범위가 늘어나는 것이다. ex) signed char => -128~127의 범..

React Hooks

👉 React Hooks란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리 React Hook 개발 과정 1. 클래스 컴포넌트 사용 2. 함수 컴포넌트와, 리액트 훅 사용 ( 리액트 훅은, 함수 컴포넌트에서만 사용가능하다 ) 함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다. 이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다. React Hook의 필요성 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? ) 서로의 장점을 전부다 가지고 있다. 👉 React Hooks 사용규칙 ..

SPA(Single Page Application) vs MPA(Multi Page Application)

SPA(Single Page Application) vs MPA(Multi Page Application)는 웹 애플리케이션의 구조와 디자인 패턴에서 중요한 역할을 한다. SPA는 하나의 HTML 페이지와 JavaScript, CSS 등의 파일을 사용하여 애플리케이션을 작성하는 방식입니다. 초기에는 페이지를 로드하고, 그 후에는 필요한 데이터를 동적으로 로드하며, 이전에 렌더링된 컴포넌트를 업데이트하고 페이지 전체를 다시 로드하지 않습니다. SPA는 단일 페이지로 구성되어 있기 때문에 사용자 경험이 좋고, 웹 애플리케이션을 구축하기 위해 필요한 모든 코드가 한 곳에 모여있어 개발이 쉽습니다. 반면, SEO 최적화와 같은 몇 가지 기능을 구현하기 위해서는 추가 작업이 필요합니다. 대표적인 SPA 프레임워크..

[React] Context란?

기존 일반적인 React는 일반적으로 컴포넌트의 props를 통한 데이터 전달 부모에서 자식으로 단방향. 자주 사용하는 데이터의 경우 코드도 복잡하고 사용하는데 불편. 그래서 Context 가 등장함. 컨텍스트는 다른 레벨의 많은 컴포넌트가 특정 컴포넌트를 필요로할 때 주로 사용 Context 는 props 를 통해 전달하는 방식 대신 Component에게 곧바로 전달한다. 로그인 정보나 프로필 정보 등을 이동시키려면 반복 코드가 많아지고 지저분해진다. Context 사용시 Context 언제 사용해야할까? 여러 개의 Component들이 접근해야하는 데이터를 전달해야할 때 ex) 로그인 여부(+ 로그인, 로그아웃 버튼 노출시 확인 필요), 로그인 정보, UI테마, 현재 언어, 지역 정보 등 기존 방식으..

[React] Composition vs Inheritance

Composition : 뜻은 구성이나 React에서는 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미. 합성과 가까움 여러 컴포넌트들을 어떻게 조합할지. 조합법에 따라 사용 기법이 나뉜다. 1. Containment : 담다, 포함하다. 뜻으로 하위 컴포넌트를 포함하는 형태의 합성 방법. sidebar 나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. children prop을 사용한다. props의 children 은 제공해주는 것이며 배열형태이다. 여러개의 하위 컴포넌트를 가질 수 있다. 여러개의 childrn 이 필요한 경우에는 ?? 별도의 props를 정의하여 사용한다. 2. Specialization : 전문화, 특수화라는 뜻이고, Welco..

[React] Form

Form : 사용자에게 입력을 받기위해 사용 두 Form의 역할은 같지만 조금 다르다. HTML에서의 Form : Element 내부에 각각의 state가 존재 React에서의 Form : React는 컴포넌트 내부에서 state를 통해 데이터를 관리 Form은 Controlled Components 는 통제를 받는데 값이 리액트의 통제를 받는 Input Formr Element이다. HTML에선 자바스크립트로 값에 접근하기가 쉽지 않지만 React에선 Component에 접근하면 모든 값 Controller이 가능하다. (Class Component 기준 이미지이며, 함수 컴포넌트에선 useState Hook으로 관리 가능하다.) 여러, 단일 모든 입력의 값을 Controllered Component로..

[React] List and Keys

List는 같은 아이템을 모아놓은 것 . 목록 그 것을 위한 자료 구조 Array 배열. Array(배열) :JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것이다. key : 열쇠 / 열쇠는 모양이 다 다르고 고유하다. 키는 중복이 없고 고유한 값이다. 값은 중복될 수 있지만 키는 중복이 안된다. React에선 아이템을 구분하기 위한 고유한 문자열을 이야기한다. 여러 개의 Component 렌더링하기 같은 컴포넌트를 화면상에 계속 나타나게 할 때 사용한다. 동적으로 화면이 바뀌는 경우 코드를 하나씩 넣기도 어렵고, 유지보수도 어렵다. 이 때 사용하는 것이 JS의 Map() 이다. 영단어 Mapping 을 떠올리면 쉽다. 값을 짝 지어준다. 어떤 처리를 한 뒤 리턴해준다. Map 예시 con..

[React] 조건부 렌더링(Conditional Rendering)

Condition 은 조건을 의미한다. 조건부 렌더링(Conditional Rendering) : 특정 조건에 따라서 랜더링이 달라지는 것 보통 true / false 로 조건에 따라 다르게 렌더링한다. java script의 truthy / falsy true {} (empty object) [] (empty array) 42 (number, not zero) "0", "false" (string, not empty) // falsy 0, -0 (zero, minus zero) 0n (bogInt zero) '', "", `` (empty string) null undefined NaN (not a number) 개발시 true와 false를 예상하며 해야하기 때문에 구분할 줄 알아야 한다. Eleme..

[React] Event

컴퓨터 프로그램의 Event는 사건을 의미한다. 특정 사건이다. 사용자가 버튼을 클릭한 이벤트 등. 그 때 필요한 동작을 해줘야한다. 이벤트 처리하는 것을 이벤트 핸들링한다고 함. // DOM의 Event Activate // React의 Event Activate // 동일한 동작을 하는 함수이다. // 표기법과 함수 전달의 방법에서 차이가 있다. // React에선 카멜케이스를 쓴다. // ex)camelCase Event Handler : 이벤트 발생시 해당 이벤트를 처리하는 함수. Event Listener로 부르기도 한다. 클래스함수들이 기본적으로 바운딩되지 않는다. bind 없이 this 를 쓰면 글로벌로 호출이 되기 때문에, 함수 이름 뒤 괄호 없이 사용하려면 바인딩 해야한다. 그러지 않기 ..

[React] React Hook

React Hook : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 1. useState() useState는 state를 사용할 수 있게 하는 Hook 함수입니다. useState는 배열 형태로 반환되며, 첫번째 요소는 현재 state 값, 두번째 요소는 state 값을 변경하는 함수입니다. 기초 문법 Const [변수명, set함수명] = useState(초기값); useState의 사용법 import React, { useState } from 'react'; function Example() { const [count, setCount] = use..