개발 (25) 썸네일형 리스트형 [React18] 새로운 기능 : Automatic Batching React 18 부터 Automatic Batching 개념이 새롭게 등장했습니다. Automatic Batching을 한국말로 직역하면 '자동 일괄처리'를 뜻해요. 그렇다면 React에서 Automatic Batching은 어떤 기능을 의미하는 것인지 알아봅시다! 이 글은 react github 문서의 내용을 기반으로 작성했습니다. Batching이란?Batching 기능은 React 17 이하 버전에서 일부 지원하는 기능이에요. 먼저 아래의 코드를 살펴봅시다! Next 버튼을 클릭했을 때, handleClick함수가 실행됩니다. handleClick함수에서는 setCount와 setFlag 함수를 사용하여 count state와 flag state를 변경해주고 있습니다. React에서는 sta.. [React] 컴포넌트 Property type 가져오기 | Get component props type 상황블로그 글 내용을 표시하는 React 어플리케이션을 개발 중입니다. 각 글은 제목, 내용, 고유 ID 등의 다양한 정보를 가지고 있습니다. PostDetail 컴포넌트는 props로 전달받은 글의 제목과 내용을 표시합니다. interface PostDetailProps { post: PostType}function PostDetail({ post }: PostDetailProps) { return ( {post.title} {post.content} );} MyParent 컴포넌트에서 PostDetail 컴포넌트를 사용하고자 합니다. PostDetail의 post 타입은 어떻게 추론할 수 있을까요? // MyParent.tsxfunction MyParent() .. [Javascript] 스크롤 이벤트로 비디오 재생 | 클론코딩 | 인터렉티브 웹 클론코딩 대상토스의 브랜드 스토리 사이트(https://toss.im/new-dimension/brand-story)의 첫 번째 섹션을 클론한다. 새로운 차원의 토스토스의 새로운 로고를 만나보세요toss.im 분석뒷 배경은 비디오로 되어있으며, 스크롤에 따라 재생시킨다. video src : https://static.toss.im/homepage-static/newtoss/intro-video.mp4 글자는 비디오와 분리되어 있다.h1태그를 사용하여 글자를 html에서 입력했다. 텍스트를 비디오에 포함시키지 않은 이유는, 뒷 배경은 그대로 사용하더라도 텍스트는 유연하게 변경하기 위함이라고 예상 "완전히 차원이 다른 토스의 새로운 얼굴" 텍스트는 페이지 진입 시 fade up 되며 나타난다. fade.. React useEffect 제대로 사용해보자! 이 글은 React 공식 문서 중 You Might Not Need an Effect 내용을 바탕으로 작성된 글입니다. You Might Not Need an Effect – ReactThe library for web and native user interfacesreact.dev 불필요한 Effect를 제거하자A1. 랜더링 되는 동안 모든 것을 계산하기상황props로 전달받은 문자열 리스트를 보여주는 컴포넌트가 있다. 그 문자열 중 'filter'라는 문자열은 화면에 보여주고 싶지 않다. 불필요한 Effects 예시아래의 코드에서는 화면에 보여줄 리스트(filteredItems)를 따로 관리하고있다. useEffect가 initialList가 변경되었음을 감지하면 내부 state를 변경한다. 이는.. [Vue] vue3 프로젝트 생성하기 | vite + vue3 + typescript + eslint + prettier + 절대경로 0. boilerplate 시간이 없으신 분들을 위해 boilerplate를 github에 올려두었습니다. 😊 GitHub - suhyunified/vue3-boilerplate: vite + vue3 + typescript + eslint + prettier vite + vue3 + typescript + eslint + prettier. Contribute to suhyunified/vue3-boilerplate development by creating an account on GitHub. github.com 1. 프로젝트 생성하기 터미널에서 아래의 커맨드를 실행하여 vue 프로젝트를 생성합니다. Vite 문서를참고했습니다. $ yarn create vite [프로젝트 이름] --template .. [Javascript] Hash 란? 해시가 무엇인가요? 🧐 개발자들은 원하는 데이터를 조금이라도 더 빠르게 찾기 위해서 수많은 탐색 알고리즘을 연구하고 있습니다. 하지만, 그 데이터가 어디에 있는지 정확하게 안다면, 데이터를 탐색할 필요가 없습니다. 바로 찾아가면 되니까요! 이것을 가능하게 하는 것이 "해시"입니다. 해시를 활용한다면 찾고 싶은 데이터가 어디에 저장되어있는지 바로 알 수 있습니다. 어떻게 가능할까요? 해시함수 : myHashFunction 고정된 길이의 값을 반환하는 함수입니다. myHashFunction은 어떤 인자를 입력받아도 0부터 6 사이의 값을 반환해요. 해시 : myHash 해시함수의 반환값입니다. 해시 테이블 : myHashTable 해시를 key로 사용하는 자료구조입니다. myHashTable이 사용하는 해시.. [토스페이먼츠 / Javascript] 자동 결제 연동하기 - SDK 결제창 이용 자동 결제란 Youtube, Netflix, Google Drive 등 다양한 곳에서 구독 형태의 제품이 많이 나오고 있습니다. 구독이란, 최초 1회 해당 서비스 사용을 신청하면 주기적으로 결제하며 일정한 서비스를 제공받을 수 있습니다. 또한, 구독 유형을 다양하게 제공하여 자신에게 적절한 양의 서비스를 선택하여 제공받을 수 있습니다. 이 때 우리가 살펴볼 것은 것은 최초 1회 서비스 사용을 신청입니다! 즉, 카드를 한번 등록해두면 사용자가 결제일마다 결제할 필요 없이 자동으로 결제가 된다는 것 입니다. 💬 TMI 구독 형태의 비지니스 모델은 다음 결제일에 자동으로 결제되기 때문에, 수입이 비교적 안정적이고 예측이 가능하다는 장점이 있습니다. 그래서 많은 서비스들이 요즘 구독 형태로 비지니스 모델을 변경.. [Javascript] Date 기본 사용법 이전글 : [Javascript] UTC와 KSTDate 기본 사용법자바스크립트에는 Date라는 객체를 사용하여 시간을 다양한 방법으로 표현할 수 있습니다. 현재 시간 확인하기const date = new Date()console.log(date)// Sun Aug 07 2022 20:00:00 GMT+0900 (Korean Standard Time)Date 객체를 인자없이 생성하면 현지 시간에 맞춰 시간 정보를 반환합니다.GMT+0900 은 GMT보다 9시간 빠른 한국 표준시임을 나타냅니다.GMT란?Grenwich Mean Time의 약자로, 영국 런던 그리니치 천문대를 기점으로 하는 협정 세계시입니다.위치가 기준이 되는 GMT는 지구의 자전에 영향을 받아 조금씩 늦어지는 현상이 발생했습니다.이에 19.. 이전 1 2 3 4 다음
