본문 바로가기

전체 글

 (52)
자바스크립트 '비동기' 다시 정리하기 왜 비동기 처리가 필요한가?자바스크립트는 기본적으로 싱글 스레드 언어이다. 이는 한 번에 하나의 작업만을 처리할 수 있다는 의미이다. 즉, 동기적으로 코드가 실행된다는 것인데, 만약 모든 코드가 동기적으로 실행된다면 네트워크 요청이나 파일 읽기 등과 같은 시간이 오래 걸리는 작업이 실행되는 동안 전체 프로그램이 멈추게 된다. 이를 '블로킹(Blocking)'이라고 한다. // 동기적 처리의 문제점console.log('시작');// 만약 이 함수가 3초가 걸린다면?heavyTask(); // 3초 동안 프로그램이 멈춤console.log('끝'); // 3초 후에야 실행됨 이런 문제를 해결하기 위해 자바스크립트에는 비동기 처리 개념이 도입되었다.비동기 처리를 통해 시간이 오래 걸리는 작업을 백그라운드에서..
WEB3 대중화를 위한 UX 개선: 지갑 솔루션으로 온보딩 진입장벽 낮추기 Web3는 블록체인 기반의 탈중앙화 기술을 통해 소유권, 투명성, 자동화된 보상을 가능하게 만든 혁신입니다.하지만 아직까지도 많은 사용자는 Web3 서비스를 접할 때 낯설고 어려운 경험을 하게 됩니다.“지갑을 연결하라는데 그게 뭔지 모르겠어요.”“트랜잭션 수수료? 가스비? 뭔가 잘못 누르면 돈 날릴까 봐 무서워요.”“이게 성공한 건지 실패한 건지도 잘 모르겠어요.” Web3 기술은 진화했지만, UX는 아직 Web2의 기본도 못 따라가는 경우가 많습니다. 이 글에서는 Web3의 대중화를 가로막는 UX의 장벽을 짚어보고, 제가 참여한 WEB3 기반 영상 공유 플랫폼, TokenUs 프로젝트에서의 개선 사례를 바탕으로, 사용자 친화적인 Web3 UX를 구현해보고자 합니다. 무엇이 Web3의 대중화를 방해하는가..
리액트의 불변성, 왜? 그리고 어떻게? 리액트에서는 useState() 훅을 이용하여 상태를 정의하고 반환된 setter함수를 이용해서만 데이터를 변경할 수 있다.배열이나 객체처럼 단일 값이 아닌 여러 값을 저장하고 있는 데이터 타입의 경우 아래와 같이 값을 변경해야 한다. //items 배열에 새로운 요소를 추가하는 예제const [items, setItems] = useState(['Item 1', 'Item 2', 'Item3']);const addItem = () => { setItems([...items, 'New Item']); // 기존 배열을 복사하고 새로운 아이템 추가}; 자바스크립트에는 배열에 요소를 추가하는 push()와 같은 메소드가 있는데, 왜 setter 함수를 이용해서만 값을 변경해야 할까? 그리고 setter 함..
React 전역 상태 관리 - Recoil 기본 사용법 리액트에는 컴포넌트의 메모리인 상태(State)라는 개념이 있다. 상태는 컴포넌트 내부에서 관리되며, 상태가 선언된 해당 컴포넌트와 자식 컴포넌트에서만 접근이 가능하다.일반적으로 여러 컴포넌트에서 동일한 상태 정보를 사용해야 하는 경우, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달한다.  그러나 상태가 존재하는 컴포넌트와 상태 정보를 props으로 받아 사용하고자 하는 컴포넌트가 트리 상 멀리 떨어져있다면,  props을 여러 컴포넌트를 거쳐 전달해야 하는 Prop drilling 이 발생한다. 상태를 여러 컴포넌트에서 공유해야 할 경우, props을 계속해서 전달하는 것은 번거롭고 비효율적일 뿐만 아니라 props의 출처를 찾기 어려워진다.  따라서 애플리케이션 전역에서 상태에 접근..
ERC-20 토큰 만들기 ERC란 Ethereum Request for Comment의 약자로, 이더리움 개발을 위한 요구 사항을 담은 문서 규약이다. 이 중 ERC-20은 대체 가능한(Fungible)한 토큰을 규정하는 표준이며, 가상화폐나 유틸리티 토큰으로 사용된다.  이 글에서는 ERC-20이 무엇인지 알아보고, ERC-20을 따르는 스마트 컨트랙트를 작성해본다.1. ERC-20이란?ERC-20은 이더리움 블록체인에서 대체 가능한 자산을 위한 기술 표준으로, 이더리움 생태계 내에서 자산이 올바르게 동작하기 위해 따라야 하는 일반적인 규칙 세트를 의미한다. 이러한 규칙은 이더리움 블록체인 내에서 ERC-20 자산이 전송되는 방식과 공급 및 주소 잔액이 일관되게 기록되는 방식과 관련이 있다.* 여기에서 '대체 가능하다'라는 것..
[Git & 소스트리] 브랜치 병합하기 / 충돌 해결하기 깃 GUI 툴인 소스트리를 이용하여 브랜치를 병합하고 병합 과정에서 발생하는 충돌을 해결하는 방법에 대해 알아보겠습니다. 1. 브랜치 병합하기 병합(merge): 하나의 브랜치를 현재 브랜치(헤드 브랜치)와 합치는 것. 예를 들어, 헤드 브랜치가 main이고 여기서 version2 브랜치를 병합하면 version2의 내용이 main에 반영됩니다. 깃에서는 merge 명령어(merge '병합할 브랜치 이름')를 사용합니다. 소스트리에서는 병합할 브랜치를 우클릭하여 병합을 선택해주면 됩니다. 병합을 할 때는 충돌이 발생할 수 있는데 충돌이 발생할 경우 다음과 같은 에러 메세지가 뜹니다. 만약 머지 이전으로 돌아가고 싶다면 돌아갈 위치에서 마우스 우클릭하여 '이 커밋까지 현재 브랜치를 초기화'를 선택해 줍니다..
[JS] 문서 객체 모델(DOM) 1 - DOM이란? / document 객체와 관련 메소드 더보기 문서 객체 모델(DOM)이란? 1. DOM의 계층 구조 (노드 트리, HTML 문서 트리) 2. Document 객체 1) HTML 요소 선택 메소드 2) HTML 요소 생성 메소드 3) HTML 이벤트 핸들러 추가 메소드 4) HTML 객체 집합 3. DOM 요소의 선택 및 변경 문서 객체 모델(DOM, Doucument Object Model) : HTML 또는 XML 문서에 접근하기 위한 일종의 인터페이스. Document 객체와 관련된 객체들의 집합. ↳ 모든 HTML 요소는 HTML DOM의 표준화된 방법을 통해 접근 가능. ↳ 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. ↳ 웹 문서의 구조화된 표현을 제공하여 ..
[자료구조] 9. 큐(Queue) - 덱 ADT / 덱 구현 더보기 9.1. 덱의 ADT 9.2 배열 기반 덱 구현 1) 덱 구현 2) 덱 연산 구현 덱(deque)은 double-ended-queue의 줄임말로서 큐의 전단(front)과 후단(rear)에서 모두 삽입 및 삭제가 가능하다. 덱을 구현하는 방법도 배열을 이용하는 방법과 연결 리스트를 이용하는 방법이 있다. 9.1 덱의 ADT ◾ 객체 : n개의 element형 요소들의 순서 있는 모임 ◾ 연산 • create() : 덱을 생성 • initDeque(dq) : 덱을 초기화 • isEmpty(dq) : 덱이 공백 상태인지 검사 • isFull(dq) : 덱이 포화 상태인지 검사 • addFront(dq,e) : 덱의 전단에 요소를 추가 • addRear(dq,e) : 덱의 후단에 요소 추가 • dele..

티스토리툴바