빵부스러기 35

[임시] IPv4 vs IPv6

IPv4 네트워크에서 컴퓨터 마다 할당 된 IP 주소 (32bit로 이루어짐) 다만 이해하기 쉽게 8비트씩 네 개로 분할된 주소를 10진수로 바꿔서 사용합니다. 예시) 2진법 11000000.10101000.00000000.00000001 10진법 192.168.0.1 IPv6 등장 이유? IPv4로 표현 가능한 갯수는 약 43(2^32)억개 입니다. 결코 적지 않은 수지만, 요즘에는 한명이 핸드폰, 태블릿, 개인 pc까지 여러개의 IP를 사용하는 환경에서는 부족한 갯수입니다. 그래서 이를 보안하기 위해서 IPv6가 등장하게 되었습니다. IPv6는 128비트로 표현하고 IPv6로 표현 가능한 갯수는 약 2^128 거의 무한대라고 할 수 있습니다. 하지만 지금 이전에 사용 중인 IPv4와 호환성이 없기 때..

빵부스러기 2023.12.13

[임시] 리액트 컴포넌트의 렌더링 조건

리액트 컴퍼넌트의 렌더링이 일어나는 이유는 많은 이유가 있습니다. 많은 이유가 있지만 오늘은 props의 동등 비교에 따라 다를 경우 렌더링이 되는 걸 말하려고 합니다. 리액트에서 변수나 함수의 메모이제이션과 렌더링 같은 건 자바스크립트의 동등 비교를 기반합니다. 이 props의 동등 비교는 객체의 얕은 비교를 기반으로 이뤄집니다. 우선 자바스크립트의 동등비교에 대해서 알아보기 전에 자바스크립트의 값을 저장하는 방식에 대해서 알아봅시다. 값을 저장하는 방식 저장하는 방식은 call by sharing, call by reference 두가지가 있습니다. call by sharing 이란? 자바스크립트의 기본형 데이터 타입입니다 ( 예: 숫자, 문자열, 불리언, null, undefined, symbol ..

빵부스러기 2023.12.12

[React]메모이제이션으로 불필요한 렌더링 줄이기

React 에서는 다양한 이유로 컴퍼넌트가 리렌더링 되곤 합니다. 불필요한 렌더링은 성능저하의 원인이 되거나, 유저에게 안좋은 경험으로 이어질 수 있습니다. 그렇다면 어떻게 불필요한 렌더링을 줄일 수 있을까요? 개선 전 코드 export default function App() { return ( ... ... ) } SpecialComponent라는 가상의 컴퍼넌트가 있는데, 이 컴퍼넌트가 불필요하게 렌더링 된다면 메모이제이션으로 이를 간단하게 해결할 수 있습니다. 개선 후 코드 export default function App() { const specialComponent = React.useMemo(() => { },[dependency...]) return ( ... {specialCompone..

빵부스러기 2023.12.11

자바스크립트 타입캐스팅

자바스크립트는 동적 타입 언어로, 변수의 타입이 런타임에 결정됩니다. 이 때문에 타입 캐스팅(형 변환)은 자바스크립트에서 중요한 개념입니다. 타입 캐스팅은 자동(암시적) 또는 수동(명시적)으로 발생할 수 있습니다. 타입 캐스팅의 종류 암시적 타입 캐스팅: 자바스크립트 엔진이 자동으로 타입을 변환하는 경우입니다. 예를 들어, 숫자와 문자열을 더할 때 숫자가 문자열로 변환됩니다("3" + 5는 "35"가 됨). 또한, 논리 연산에서는 비 불리언 값이 불리언으로 변환됩니다(if (0)에서 0은 false로 간주됨). 명시적 타입 캐스팅: 개발자가 직접 타입을 변환하는 것입니다. 예를 들어, Number("5")는 문자열 "5"를 숫자 5로 변환합니다. String(23)는 숫자 23을 문자열 "23"로 변환합..

빵부스러기 2023.12.10

[JavaScript] e.target

e.target(event.target)? 여기서 e는 이벤트 객체를 나타내며, target은 이벤트가 발생한 요소를 가리킵니다. 이벤트 리스너를 사용할 때, 예를 들어 addEventListener 메소드를 통해, 이벤트가 발생하는 특정 요소를 추적하고자 할 때 e.target이 사용됩니다. 예를 들어, 버튼 클릭 이벤트를 처리하는 경우, e.target은 해당 버튼 요소를 참조합니다. 이를 통해 개발자는 클릭된 특정 요소의 정보를 얻고, 그에 따라 다른 작업을 수행할 수 있습니다. e.target은 특히 이벤트 위임(event delegation)에서 중요합니다. 이벤트 위임은 하나의 부모 요소에 이벤트 리스너를 추가하고, 그 자식 요소들의 이벤트를 처리하는 방식입니다. 이때 e.target을 사용하..

빵부스러기 2023.12.09

peer to peer (p2p)

피어 투 피어(Peer-to-Peer, P2P)이란? 네트워킹은 컴퓨터 네트워크의 한 형태로, 모든 참여 컴퓨터(피어)가 동등한 역할을 수행합니다. 이 시스템에서는 중앙 서버가 필요 없으며, 각 피어가 서버와 클라이언트 역할을 동시에 수행합니다. 이는 데이터 공유, 통신, 처리 능력 등을 효율적으로 분산시키는 데 사용됩니다. 장점 P2P의 장점은 확장성과 탄력성입니다. 중앙 집중식 서버에 의존하지 않기 때문에, 네트워크가 확장됨에 따라 성능이 저하되지 않습니다. 또한, 한 노드가 실패하더라도 네트워크 전체에 큰 영향을 미치지 않습니다. 이는 파일 공유 시스템, 메시징 애플리케이션, 디지털 통화 등 다양한 분야에서 활용됩니다. 단점 P2P 네트워크는 보안과 저작권 문제에 취약할 수 있습니다. 모든 피어가 ..

빵부스러기 2023.12.08

[JavaScript] key를 변수에 담긴 문자로 사용하기

key값을 변수명처럼 사용하고 싶을 때가 있습니다. const userName = 'bong' const userObj = { userName: 'active' } console.log(userObj) // { userName: 'active' } 위의 코드 처럼 key값을 변수에 담긴 문자를 사용하고 싶다면 아래처럼 코드를 바꾸면 됩니다. //변경 전 const userObj = { userName: 'active' } //변경 후 const userObj = { [userName]: 'active' } key 값에 `[넣고 싶은 변수]` 를 넣어주면 됩니다. 이걸 Computed Property Names라고 부릅니다.

빵부스러기 2023.12.06

[TypeScript] 동적 타입 VS 정적 타입

Compile time 타입을 확인하는 언어들을 정적 타입 Run time때 타입을 확인하는 언어들을 동적 타입이라고 합니다. 대표적인 예로 정적 타입을 사용하는 언어는 파이썬, 자바스크립트가 있습니다. 동적 타입을 사용하는 언어는 C언어, 타입스크립트가 있습니다. 정적 타입을 사용하는 언어의 특징은 다음과 같습니다. 1. 변수를 선언할때 타입을 명시해서 사용해야합니다. 2. 한번 선언한 타입은 변경할 수 없습니다. let num: number = 230; num = 'Hello World' // 오류 동적 타입을 사용하는 언어의 특징은 다음과 같습니다. 1. 변수를 선언할때 타입을 명시하지 않아도 됩니다. (런타임때 할당된 변수를 보고 타입을 넣어줌) 2. 한 변수가 여러개의 타입의 형태로 사용될 수 ..

빵부스러기 2023.03.12