본문 바로가기

전체 글86

NFT 아트 첫 구매 (Feat.솔라나 토큰) 회사에서 리쿠르팅 팀소개 페이지에 올릴 PFP를 구매해보라며, 각자 솔라나 토큰 1SOL씩을 받았어요 >_ 짠! 이 그림의 소유자는 바로 저라구요! 구매 가격은 0.69SOL에 주고 구매했어요 ㅎ.ㅎ 두두스라는 굉장히 귀엽고 깔끔한 느낌의 일러스트의 스트릿웨어 브랜드 이름이구요. NFT 소지자는 숍힝 시 20% 할인을 적용해주는 멤버십 기능까지 있더라구요! 오... 하지만 구매는 안할 것 같... (그냥 귀여워서 샀다 이마리야!) 아쉽다… 저는 긴머리인데 DooDoos NFT 리스트 중에서 긴머리 속성을 갖은 캐릭터를 찾아봤는데 아쉽게도 없드라구요,, 그래서 어쩔수 없이 그냥 그중에 제일 무난한걸로 구매했습니다🥲 ㅎㅎ 그래도 뿌까머리한 이 아이가 너무 귀여워서 여기저기 프사로 지정해서 뽐내는즁- 입니다!.. 2022. 1. 17.
500 Server Error 발생하는 이유와 백엔드팀 협업 하기 들어가기 프론트 개발 하다가 네트워크 탭에서 500 Server Error가 발생하는 것을 볼 수 있어요. 간단하게 이해하면 서버 에러가 발생했다는 것을 의미합니다. 서버 500 에러에 대해 자세히 알아보고, 해당 에러가 났을 경우 백엔드와 어떻게 협업해야하는지 살펴볼게요! 500 Server Error가 무엇이죠? 500 에러의 경우 서버의 동작에서 발생하는 에러 중 더 정확한 에러 코드가 아닌 경우를 나타냅니다. 즉, 예외적인 또는 예측하지 못한 에러의 경우 500 에러로 출력된다고 생각할 수 있어요. 500 에러 메시지를 출력하는 경우 서버 통신의 Timeout 시간 지연 오류 서버 트래픽 과부하 서버 언어의 구문 에러 (스크립트 문법 오류) 백엔드 개발자와의 협업 저같은 경우는 재현스탭과 해당 네.. 2022. 1. 14.
[Solana] 기본 트랜잭션 보내기 들어가기 솔라나 기본 트랜잭션 보내는 방법을 알아보자 지갑 연결하기 사용자가 Solana에서 dApp 또는 애플리케이션을 사용할 수 있도록 하려면 키 쌍에 액세스해야 합니다. 키 쌍은 거래에 서명하는데 사용될 일치하는 공개키가 있는 개인키입니다. 키 쌍을 얻는 방법은 두 가지가 있습니다.: 1. Generate a new Keypair 2. 시크릿 키를 사용해 Keypair 얻기 const { Keypair } = require("@solana/web3.js"); let keypair = Keypair.generate(); 이렇게 하면 사용자가 애플리케이션 내에서 자금을 조달하고 사용할 수 있는 새로운 Keypair가 생성됩니다. 트랜잭션 만들기 그리고 보내기 솔라나의 프로그램과 상호작용하기 위해 네트워.. 2022. 1. 9.
[리액트] SPA의 단점 SPA의 단점은 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것입니다. 유저가 실제 방문하지 않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문이죠. 하지만 걱정하지마세요. 코드 스플릿팅을 사용하면 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선할 수 있습니다. 리액트라우터같이 브라우저측에서 자바스크립트를 사용하여 라우트를 관리하는 것의 잠재적인 단점은 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아가지 못한다는 점입니다. 때문에 구글 네이버 다음 등 검색 엔진에서 페이지가 검색결과에서 잘 안나타날 수 있습니다. 추가적으로 자바스크립트가 실행될때까지 페이지가 비어있기때문에 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 .. 2022. 1. 1.
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'); 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"] } ], }아이콘, .. 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 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.. 2021. 12. 22.

티스토리툴바