티스토리

coding heesong

검색하기

블로그 홈

coding heesong

coding-heesong.tistory.com/m

기록하는 프론트 엔지니어 개발자

구독자: 0

방명록 방문하기

주요 글 목록

리코일, Selectors atoms, selectors를 입력으로 받아들이는 순수 함수다. 상위 atoms, selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다. const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = get(fontSizeState); // atom에 의존성이 생김 const unit = 'px'; return `${fontSize}${unit}`; }, }); get속성은 계산될 함수다. 전달되는 get 인자를 통해 atoms와 다른 sele.. 공감수 0 댓글수 0 2023. 3. 30.
리코일, Atoms Atoms Atoms는 상태의 단위이며, 업데이트와 구독이 가능. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영해 재렌더링된다. atoms는 런타임에서 생성될 수도 있다. Atoms는 리액트의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. const fontSizeState = atom({ key: 'fontSizeState', default: 14, }) Atoms는 디버깅, 지속성 및 모든 atoms의 map을 볼 수 있는 특정 고급 API에 사용되는 고유한 키가 필요하다. 두개의 atom이 같은 키를 갖는 것은 오류이기 때문에 키 값은 전역적으로 고유하도록 해야한다. 리액트 컴포넌트의 상태처럼 기본.. 공감수 0 댓글수 0 2023. 3. 30.
WEB3 :: 메인넷 vs 테스트넷 메인넷 출처 입력 메인넷은 블록체인 프로토콜이 완전히 개발, 배포되는 시기를 설명하는데 사용되는 용어. 암호화폐 거래가 블록체인에 브로드캐스트, 검증 및 기록되고 있음을 의미합니다. 테스트넷 출처 입력 메인넷 네트워크와 달리 테스트넷이라는 용어는 블록체인 프로토콜이나 네트워크가 아직 가동되지 않고 최대 용량으로 실행되지 않을 때를 나타낸다. 테스트넷은 프로그래머와 개발자가 시스템이 안전하고 메인넷 출시를 위한 준비가 되었는지 확인하기 전에 블록체인 네트워크의 모든 측면과 기능을 테스트하고 문제를 해결하는 데 사용됩니다. 즉, 테스트넷은 블록체인 프로젝트의 프로토타입으로만 존재하는 반면, 메인넷은 사용자가 암호화폐 거래(또는 분산 원장에 기록되는 모든 종류의 디지털 데이터)를 주고받을 수 있도록 완전히 개.. 공감수 1 댓글수 0 2022. 8. 23.
가스피(GasFee)가 무엇인가요? 블록체인에 트랜잭션을 넣거나 실행한 채굴자에게 주어지는 보상같은 개념. 식사가 끝날때 웨이터에게 주는 팁이라고 생각하시면 됩니다. 블록체인은 본질적으로 탈중앙화되어 있기 때문에 익명의 채굴자나 검증인이 네트워크 블록체인에 트랜잭션을 추가하고 검증합니다.이것은 모든 거래 블록체인 기술의 기반입니다. PoW 시스템에서 광부는 이더리움 토큰의 보상을 위해 트랜잭션을 검증하기 위한 복잡한 수학적 퍼즐을 해결합니다. 채굴자가 이더리움 토큰을 얻을 수 있는 방법은 2가지가 있다. 1. 새로 발행된 이더리움 토큰으로 지불을 받기 위해 이더리움을 채굴하는 것. 2. 거래를 처리해 사용자로부터 이더리움 수수료를 받는 것. 처리되지 않은 모든 트랜잭션은 메모리와 풀의 조합인 '멤풀'로 알려진곳에 저장됨. 여기에서 광부는 .. 공감수 0 댓글수 0 2022. 7. 21.
프론트엔드에서 Binance Smart Chain 스마트계약 연결하기 개요 binance smart chain integration에서 실행되는 스마트 계약과 사용자의 웹 브라우저에서 실행되는 프런트엔드 구조 바이낸스 스마트 체인을 실행하는 소프트웨어를 클라이언트라고 합니다. 클라이언트가 노출하는 어떤 스팟의 API에 계약 기능과 스마트 계약과 상호 작용하기 위한 여러 end point가 있습니다. 트랜잭션을 보내서 데이터를 수정하고 호출하여 프론트엔드의 스마트계약은 html,css,javascript가 있는 웹페이지를 갖게됩니다. 스마트계약과 트랜잭션할 자바스크립트 코드를 사용하여 바이낸스 일치의 API와 직접 상호작용할 수 있지만 너무 많은 작업이 될 것입니다. 두개의 엔드포인트를 사용하여 트랜잭션을 전송하고 매개변수에 대한 특정 인코딩이 필요하며 이를 처리하는 것이 .. 공감수 0 댓글수 0 2022. 6. 22.
바이낸스 스마트 체인(BSC) 요약 여러분은 BNB 통화가 기반을 두고 있는 바이낸스 체인에 대해 들어보셨을 수 있습니다. 이는 무척이나 빠른 트레이딩에 최적화되어 있습니다. 그러나 프로그래밍관점에서는 다른 블록체인보다 유연하지 못하다는 단점을 갖고 있습니다. 이러한 단점을 보완하기 위해 바이낸스 스마트 체인이 출시되었습니다. 바이낸스 스마트 체인은 고성능 탈중앙 애플리케이션 개발을 위한 기능을 모두 갖춘 새로운 블록체인입니다. 바이낸스 체인과 크로스체인 호환을 위해 구축되었으며, 사용자는 두 블록체인 모두에서 혜택을 누릴 수 있습니다. 바이낸스 스마트 체인이란 무엇인가요? 바이낸스 스마트 체인은 바이낸스 체인과 병렬로 실행되는 블록체인이라는 설명이 가장 적합합니다. 바이낸스 체인과 다르게 바이낸스 스마트 체인은 스마트 콘트랙트 .. 공감수 0 댓글수 0 2022. 6. 20.
자식요소에 padding 속성이 적용되지 않는 경우 부모에 `display: flex`를 사용해서 레이아웃을 구성할 경우, 자식요소에 padding, margin 속성이 적용되지 않을 경우가 있다. 그럴 때 전체 선택자 요소에 box-sizing: border-box; 속성을 부여하면 자식요소에도 padding, margin이 동작한다. * { box-sizing: border-box; } 공감수 0 댓글수 0 2022. 5. 24.
버튼 애니메이션 1 with styled-component See the Pen Submit button animation by Tom (@yeptony) on CodePen. import React from 'react'; import { View, Display, Text } from '@pip/theme'; import DefaultLayout from '../../layouts/Default'; import styled, { css, keyframes } from 'styled-components'; const Payment = () => { const [ani, setAni] = React.useState({ click: false, circle: false }); const handleClick = () => { setAni({ ...ani, clic.. 공감수 0 댓글수 0 2022. 5. 20.
[개발일지] Class함수 이용한 슬랙 개발 플로우 class slack service 제작 : import axios from 'axios'; import ProfileSchema from ''; class SlackService { private url: string = 'slack hooks services url'; constructor(private profileSchema: ProfileSchema) {} private async send(payload: any) { await axios.post(this.url, payload); } public async message() { const payload = { attachments: [{color: '#82D8EB'}] } } public async error({ solanaTag, custo.. 공감수 0 댓글수 0 2022. 5. 12.
[용어] TXID가 무엇인가요? Transaction ID의 줄임말로 거래 ID, TXhash, 거래번호, Hash ID, 해시값과 같은 의미입니다. 디지털 자산 전송 시 하나의 트랜잭션을 다른 트랜잭션과 구별할 수 있도록 블록체인의 각 개별 트랜잭션에 부여하는 식별번호입니다. 블록체인 탐색기에 TXID를 조회하여 개별 거래에 대한 블록체인 네트워크의 기록, 즉 입금 주소, 출금 주소, 전송 수량, 컨펌 진행 상황, 거래 시간, 입출금 내역 등 해당 건에 대한 상태를 파악할 수 있습니다. 전송한 디지털 자산이 아직 도착하지 않았다면 입금주소를 잘못 작성하여도 도착하지 않았는지 또는 네트워크 노드의 승인(컨펌)이 늦어져서 도착하지 않았는지 등에 대한 확인이 가능합니다. ✅ TXID로 확인 할 수 있는 것: 입금 주소 출금 주소 전송 수량.. 공감수 0 댓글수 0 2022. 5. 12.
[WEB3] DEX의 세계 Defi Llama라는 사이트에 들어가보면 표 필드에 TVL이라는 표시가 보인다. TVL이 무슨뜻일까? TVL 이란? Total Value Locked탈중앙화된 금융 플랫폼인 디파이에 예치되어 있는 자산 규모의 총합계 금액을 말한다. 현재(22/04/19) 총 자산 규모가 가장 큰 DEX를 운영하고 있는 곳은 Curve가 되시겠다. 한화 20조가 예치되어 있는 CRV. 탈중앙화 거래소를 활용하면 뭐가 좋을까? 탈중앙화 거래소에 참여하는 이유 업비트나 다른 코인거래소에서 얻는 수수료 이득은 엄청나다. 당장 업비트 수수료라고 검색만 해도 4조는 그냥 나오는 숫자! 탈중앙화는 내가 예치한 금액만큼 수수료를 나눠갖는 구조로 만약에 TVL이 100만원이 있고 내가 예치한 금액이 10만원이라면 100/10만큼의 수.. 공감수 0 댓글수 0 2022. 4. 19.
[CSS log] 텍스트 그라데이션이 사파리 브라우저에서 작동 안할 때 background: linear-gradient(94.15deg, #ff0005 -5.83%, #f80089 45.18%, #091b84 95.14%); background: -ms-linear-gradient(94.15deg, #ff0005 -5.83%, #f80089 45.18%, #091b84 95.14%); background: -moz-linear-gradient(94.15deg, #ff0005 -5.83%, #f80089 45.18%, #091b84 95.14%); background: -webkit-linear-gradient(94.15deg, #ff0005 -5.83%, #f80089 45.18%, #091b84 95.14%); -webkit-background-clip: text; -w.. 공감수 0 댓글수 0 2022. 4. 15.
async-await function in useEffect useEffect는 일반적으로 리액트에서 데이터 가져오기가 일어나는 곳이다. 데이터 가져오기는 비동기 함수를 사용하는 것을 의미하고 useEffect를 사용하는 것은 생각만큼 간단하지 않을 수 있다. 잘못된 방법 useEffect에서 데이터 가져오기 수행하는 잘못된 방법 한가지: ... // ❌ 이렇게 하지 마세요 useEffect(async () => { const data = await fetchData(); }, [fetchData]) ...리턴하는 데이터가 소리를 지르는 코드가 될 것이다. 여기서 문제는 useEffect의 첫번째 인수가 아무것도 반환하지 않거나(정의되지 않음) 함수를 반환하는 함수여야 하는데, 비동기 함수는 함수로 호출할 수 없는 Promise를 반환한다. useEffect 후크.. 공감수 1 댓글수 0 2022. 2. 22.
개발_일지 / 무한 스크롤 / Infinite Scroll / Intersection Observer API 들어가기 무한 스크롤의 일반적으로 알려진 해결방법(=스크롤 이벤트)은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 낳는다. Intersection Observer API는 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 호출한다. 즉, 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 브라우저는 원하는 대로 교차 영역 관리를 최적화 할 수 있다. 개발하기 IntersectionOberver VS IntersectionObserverEntry IntersectionObserverEntry의 인스턴스가 IntersectionOberver 콜백에 전.. 공감수 0 댓글수 0 2022. 2. 14.
[크롬 익스텐션] Clipboard 개발 일지 설계하기 textarea 생성 만든 textarea 안보이게 스타일링 body에 추가 getSelection()과 createRange()를 사용해 clipboard할 텍스트 선택 Document.execCommand() 명령어로 copy하기. getSelection 영역 초기화 놓쳤던 부분 textArea 엘리먼트에 자체 focus(), select()를 사용하였더니 크롬 확장자 개발 특성상 크롬 확장자와 기존 페이지의 input이 충돌하여 먹지 않아서 document.getSelection(), getSelection.createRange()를 이용해야 했음. 이전 소스: const textArea = document.createElement('textarea'); textArea.va.. 공감수 0 댓글수 0 2022. 2. 14.
gqg로 git commit 하기 gqg 설치 $ brew install gpg 사용할 이름과 이메일을 설정 $ gpg --gen-key gpg (GnuPG) 2.2.27; Copyright (C) 2021 Free Software Foundation, Inc. This is free software: you are free to change and redistribute it. There is NO WARRANTY, to the extent permitted by law. Note: Use "gpg --full-generate-key" for a full featured key generation dialog. GnuPG needs to construct a user ID to identify your key. Real name: gi.. 공감수 0 댓글수 0 2022. 2. 8.
500 Server Error 발생하는 이유와 백엔드팀 협업 하기 들어가기 프론트 개발 하다가 네트워크 탭에서 500 Server Error가 발생하는 것을 볼 수 있어요. 간단하게 이해하면 서버 에러가 발생했다는 것을 의미합니다. 서버 500 에러에 대해 자세히 알아보고, 해당 에러가 났을 경우 백엔드와 어떻게 협업해야하는지 살펴볼게요! 500 Server Error가 무엇이죠? 500 에러의 경우 서버의 동작에서 발생하는 에러 중 더 정확한 에러 코드가 아닌 경우를 나타냅니다. 즉, 예외적인 또는 예측하지 못한 에러의 경우 500 에러로 출력된다고 생각할 수 있어요. 500 에러 메시지를 출력하는 경우 서버 통신의 Timeout 시간 지연 오류 서버 트래픽 과부하 서버 언어의 구문 에러 (스크립트 문법 오류) 백엔드 개발자와의 협업 저같은 경우는 재현스탭과 해당 네.. 공감수 0 댓글수 0 2022. 1. 14.
[Solana] 기본 트랜잭션 보내기 들어가기 솔라나 기본 트랜잭션 보내는 방법을 알아보자 지갑 연결하기 사용자가 Solana에서 dApp 또는 애플리케이션을 사용할 수 있도록 하려면 키 쌍에 액세스해야 합니다. 키 쌍은 거래에 서명하는데 사용될 일치하는 공개키가 있는 개인키입니다. 키 쌍을 얻는 방법은 두 가지가 있습니다.: 1. Generate a new Keypair 2. 시크릿 키를 사용해 Keypair 얻기 const { Keypair } = require("@solana/web3.js"); let keypair = Keypair.generate(); 이렇게 하면 사용자가 애플리케이션 내에서 자금을 조달하고 사용할 수 있는 새로운 Keypair가 생성됩니다. 트랜잭션 만들기 그리고 보내기 솔라나의 프로그램과 상호작용하기 위해 네트워.. 공감수 0 댓글수 0 2022. 1. 9.
firstElementChild vs firstChild firstElementChild Element.firstElementChild 읽기 전용 속성 부모요소의 첫번째 자식요소 반환 자식요소가 없을 경우 null 반환 firstChild Element.firstChild 트리에서 노드의 첫번째 자식 반환 노드에 자식요소가 없으면 null 반환 const list = document.getElementById('list'); console.log(list.firstElementChild.textContent, 'firstElementChild'); console.log(list.firstChild, 'firstChild'); 공감수 0 댓글수 0 2022. 1. 1.
크롬 확장자 개발기, 구성요소 살펴보기👀 구성요소: 배경 스크립트 콘텐츠 스크립트 옵션 페이지 UI 요소 1. 메니페스트 파일 만들기 확장프로그램은 매니페스트에서 시작한다. manifest.json 파일을 만들어 기본 세팅 코드 복붙하기: { "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "externally_connectable": { "matches": ["*://*.naver.com/*", "*://*.google.com/*", ...] }, "content_scripts": [ { "matches": [""], "js": ["src/scripts/run.ts"] } ], }아이콘, .. 공감수 0 댓글수 0 2021. 12. 24.
'??', 널 병합 연산자 (Nullish coalescing operator) 문법 leftExpr ?? rightExpr 널 병합 연산자 (= 물음표 2개) 왼쪽 연산자가 null 또는 undefined일 때 오른쪽 연산자를 반환하고, 그렇지 않으면 왼쪽 연산자를 반환하는 논리 연산자. || 차이점? ||연산자가 왼쪽 연산자가 null, undefined뿐만 아니라 falsy값에 해당하는 경우 오른쪽 피연산자를 반환하는 것과 달리 ??연산자는 falsy값을 처리하지 않고 원시값으로 처리하여 연산한다. const or = 0 || 'hi'; // 'hi' const not_or = 0 ?? 'hi'; // 0 공감수 0 댓글수 0 2021. 12. 22.
페이지 전환 시 스크롤 위치 기억 하기 구현 개발스펙 React Typescript Zustand 로직 1. currentTarget을 이용해 클릭한 좌표 구하기 2. state에 좌표 저장 list.tsx // 페이지 이동 함수 const handleMovePage = (e:React.MouseEvent) => { e.stopPropagation(); const { currentTarget } = e; if (currentTarget) { setScrollChk(currentTarget.parentElement?.scrollTop); // 스크롤 좌표 구해서 state 저장 // page 이동 로직 } } // 마운트 시 함수 연결 React.useEffect(()=>{ const scrollContainer = document.getElemen.. 공감수 1 댓글수 0 2021. 12. 22.
window MutationObserver 알아보기 DOM 변경되어써?! 체크해주는거 new MutationObserver( function callback ) callback: 콜백 함수는 DOM 변경시 마다 호출 인자 1): obj[] 2): MutationObserver MutationObserver 인스턴스함수들 observe(): 특정 노드에서 DOM 변경의 알림을 받을 수 있도록 뮤테이션옵저버 인스턴스 등록 disconnect(): 변경 알림 안받을거야 takeRecords(): 뮤테이션옵저버 인스턴스의 레코드 큐를 비우고 안에 든 것 반 observe(): MutationObserverInit childList: 대상 노드의 자식 요소의 추가 및 제거가 관찰되어야 하는 경우 true로 설정. subtree: 대상 및 대상의 자손에 대한 돌연변.. 공감수 0 댓글수 0 2021. 12. 20.
Next.js에서 백그라운드 이미지 적용해서 애니메이션 주기 import image from 'next/image'; const aa = {dkdj:dfjdk, dkjlsjd:skfjslkdf}; return ( ) const Image = styled.div... &>img { &.hover { trasnform: scale(0.2) ... } } ...; 공감수 0 댓글수 0 2021. 11. 17.
zustand 사용하기 🚀 스토어 만들기 const useStore = create(set=>({ bears: 0, increasePopulation: () => set(state => ({ bears: state.bears + 1})), removeAllBears: () => set({ bears:0 }); }))set 함수는 state를 병합해주는 함수로써 객체, 함수등을 넣어서 사용할 수 있다. 구성요소 바인딩 provider가 따로 필요하지 않으며 어느 페이지에서나 가져와서 사용하면 된다. 상태를 선택하면 구성 요소가 변경 사항에 따라 다시 렌더링 된다. const BearCounter = () => { const bears = useStore(state => state.bears); return {bears} around.. 공감수 1 댓글수 0 2021. 11. 9.
Canvas API - 기본 도형 그리기 직사각형 그리는 3가지 방법 1. clearRect(x, y, width, height) 정의된 사각형의 모든 픽셀을 투명으로 설정하고 이전에 그린 내용을 지운다. 2. fillRect(x, y, width, height) 너비와 높이에 의해 크기가 결정되고 x, y 위치에 채워진 사각형을 그린다. 3. strokeRect(x, y, width, height) strokeStyle 및 기타 컨텍스트 설정에 따라 윤곽선 사각형을 그린다. 텍스트를 그리는 3가지 방법 1. fillText() 2. strokeText() 3. measureText() 측정된 텍스트에 대한 정보(= 너비)를 반환한다. let text = ctx.measureText('Poburi'); console.log(tex.. 공감수 0 댓글수 0 2021. 10. 31.
Fetch API 들어가기 Fetch API를 이용하면 요청/응답과 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능합니다. 또한 fetch()메서드를 이용하는 것으로 비동기 네트워크 통신을 쉽게 할 수 있게 도와줍니다. Fetch의 기본스펙이 jQuery.ajax()와 다른 두가지: 1. fetch()로 부터 반환되는 프로미스 객체는 HTTP error 상태를 reject하지 않음. (HTTP Status Code가 404 또는 500을 반환하더라도..! ) 대신, ok상태가 false인 리졸브가 반환되며 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됨. 2. 보통 쿠키를 보내거나 받지 않음. 쿠키를 전송하기 위해서는 자격증명 옵션을 반드시 설정해야함. 2017년 8월 25일 이후 기본.. 공감수 0 댓글수 0 2021. 10. 23.
historyApiFallback의 역할 리액트는 SPA 방식이어서 URL의 시작 주소(=index.html)만 갖고 있는데, 웹의 history API를 사용해서 여러가지 URL이 있는 것 처럼 가짜주소를 만들어 줄 수 있다. localhost:3090/login coding-heesong.com/beauty/make-up 이런 주소로 이동하거나 새로고침을 하면 프론트로 가지 않고 서버로 가게된다. 그런데 문제는 서버는 오직 시작 주소만 알고 있다. localhost:3090 coding-heesong.com 그래서 webpack.config.ts에서 devServer의 historyApiFallback: true를 줘서 실제로 서버에는 없는 주소를 있는 주소처럼 인식 할 수 있게 해준다. 공감수 0 댓글수 0 2021. 10. 17.
객체를 쿼리 스트링으로 인코딩하기 들어가기 객체를 Object.entries()와 map()을 사용해 쿼리 스트링으로 인코딩하기. let params = {lat: 45, lng: 6, alt: 1000}; let queryString = Object.entries(params).map(p => encodeURIComponent(p[0])) + '=' + encodeURIComponent(p[1])).join('&') //=> queryString is "lat=45&lng=6*alt=1000" params를 entries하면 키-값을 배열에 담는다. [['lat', 45], ['lng', 6], ['alt', 1000]] 그리고 map()을 통해 각 배열에 접근한다음 원하는 데이터로 가공함. 구조분해를 이용해서 이렇게 표현 할 수 있음.. 공감수 0 댓글수 0 2021. 10. 17.
BrowserRoute, Switch, Route의 역할 (react-route-dom) 들어가기 `react-route-dom`의 주요 컴포넌트를 자세히 알아보자! 리액트 라우터에는 3개 주요 컴포넌트가 있습니다.: 라우터 컴포넌트 라우트 일치 컴포넌트 네비게이션 컴포넌트 그리고 리액트 라우터를 시작하려면, 이 순서를 지켜주어야 합니다.: 라우트 컴포넌트(루트) > 라우트 일치 > 네비게이션 라우트 컴포넌트 라우트의 핵심구성 요소로 이랑 가 있는데, 차이점은 URL 방식과 서버를 통신하느냐의 차이입니다. BrowserRouter: 일반 URL 경로를 사용하며 해당 경로마다 서버를 올바르게 구성해줘야합니다. HashRouter: URL의 해시 부분에 현재위치를 저장합니다. 서버로 전송되지 않아서 서버 구성이 필요하지 않습니다. 라우터를 이용하려면 최상위 레벨(=루트)에서 최상위 요소를 래핑해.. 공감수 0 댓글수 0 2021. 10. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.