홈

ReactJS로 영화 웹 서비스 만들기 (CP 1차시) CP 프론트 스터디 1차시 내용 정리 💪 React.js는 킹갓엠페러제너럴충무공마제스티이다! #1 들어가며 리액트도 초창기에는 굉장히 적은 사람들이 사용했다. 하지만 2022년 지금! 리액트는 프론트를 대표하는 프레임워크로 자리매김하고 있다. 왜 많은 사람들이 다른 프레임워크를 두고 어썸한 리액트를 사용했는지 알아보고 공부해 보자. 왜 리액트인가? 새로운 기술을 배우고자 할 때 주의해야 할 점 누가 해당 기술을 사용하고 있는지 그들(새로운 기술을 사용하는 개발자)의 규모가 큰지 그들에게 중요한...

wallet_switchEthereumChain으로 MetaMask(메타마스크)에서 네트워크 전환하기 Using wallet_switchEthereumChain to switch network on Metamask TL;DR MetaMask(메타마스크)에서 네트워크를 전환하려면 wallet_switchEthereumChain 메소드를 사용하면 된다. ... await window.ethereum.request({ method: "wallet_switchEthereumChain", params: [{ chainId: "변경할 chain id", }], }); ... 만약 MetaMask 네트워크 목...

Web3.js와 MetaMask(메타마스크) 연동하기 Connect Web3.js to MetaMask 아무말 오랜만의 dApp 개발에 기분이 좋아진 인피덕 블로그에도 관련 내용을 남기고 싶어 메타마스크 연동 방법을 포스팅하려고 한다. 본론 Web3.js 와 MetaMask가 설치되어 있다는 가정 하에, 간단한 예제 코드로 설명하고자 한다. import Web3 from 'web3' ... return new Promise((resolve, reject) => { // 1 window.addEventListener('load', async () => { let web3, a...

git repository의 일부 디렉토리만 clone 하기 (git sparse checkout) git clone some folders with git sparse checkout 서론 2022년 첫 포스팅 사내의 어떤 프로젝트 구조가 하나의 repository에 해당 프로젝트에 대한 모든 코드를 다 넣어두고 개발 스택별로 폴더를 나누어 구분하는 구조로 되어있어서 프론트 폴더만 clone 하기 위해 사용한 방법을 포스팅하려고 합니다. (프로젝트 저장소) ㄴ (프론트 폴더) ㄴ (백엔드 폴더) ... 본론) git repository의 일부 디렉토리만 clone 하기 clone 받을 폴더를 만들고 ...

Uncaught Error: Target container is not a DOM element. Target container is not a DOM element 로그 Uncaught Error: Target container is not a DOM element. at Object.render (react-dom.development.js:24963) at simple1.js:27 발생 원인 DOM 에 렌더링 시 render 하고자 하는 element 를 찾을 수 없어서 발생 // js 파일에서 root1 이라는 아이디를 가진 element 에 const domContaine...

넉스트(Nuxt)에서 무한 스크롤(infinite scroll) 구현하기 Nuxt component with infinite scroll 무한 스크롤(infinite scroll)? 무한 스크롤이란 사용자가 아래로 스크롤했을 때 현재 보고있는 콘텐츠의 더 많은 내용이 페이지 하단에 나타나도록 하여 사용자가 페이지네이션을 위해 추가적인 동작을 하지 않아도 자연스럽게 다음 콘텐츠를 볼 수 있는 기능입니다. Nuxt에서 무한 스크롤을 구현하는 방법 이번 프로젝트는 nuxt를 사용하는 프로젝트이기 때문에, nuxt 환경에서 무한 스크롤을 구현하는 방법으로 진행하겠습니다. 데이터는 배열로 관리하고, 추가되는 ...

뷰(Vue)에 Tailwind 적용시키기 Vue Component with Tailwind CSS Tailwind? Tailwind 기존의 CSS 프레임워크(Framework) - Vuetify, Buefy 등은 UI를 구성하는 데 필요한 컴포넌트들이 미리 정의되어 있어 개발 시 해당 컴포넌트들을 사용해 쉽게 디자인을 입힐 수 있습니다. 하지만, 컴포넌트가 이미 정의되어 있기 때문에 원하는 형태로 커스터마이징 할 때는 어느정도의 번거로움이 생길 수 밖에 없었습니다. 그래서 다른 CSS를 찾아보다가 발견한 녀석이 Tailwind라는 친구입니다. Tailwind도 사전에 CSS들이 정의되어 있다는 점이 기존...

타입스크립트(TypeScript) 뿌시기 2 (타입) Studying TypeScript 2 타입 검사와 선언 언어에 따라 수행하는 타입 검사의 종류는 크게 정적 타입 검사(statically type checking)과 동적 타입 검사(dynamically type check)로 나뉩니다. 먼저 정적 타입 검사란, 컴파일 시(런타임 이전)에 변수의 타입을 검사하는 방식입니다. 이러한 이유로 컴파일 시 에러가 발생하기 때문에 에러 확인을 빠르고 편하게 할 수 있디는 특징이 있습니다. 동적 타입 검사란 런타임 시 변수의 타입을 검사하는 방식입니다. 타입이 입력 값에 따라 결정되므로 예상치 못한 에러를 발생...