React

위 코드는 useState를 사용한 간단한 counter입니다.useState의 인자는 초기값을 넣으면 됩니다.useState를 받는 변수는 배열의 형식이어야 하고 앞은 state로 사용할 변수명을, 뒤는 그 변수의 setter를 선언합니다. (count의 setter

reducer는 state를 변경하는 함수들의 모음이라고 생각하시면 됩니다.모음이라 함은 당연히 여러 경우의 수가 있다는 뜻이겠죠. 여러 경우의 수가 존재하지 않는다면 useState로 state를 관리하시는 편이 훨씬 이로울 것입니다.reducer 함수에서 retur

useEffect를 사용하면 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount를 하나의 함수로 대체할 수 있습니다.로직 부분에 실행할 코드가 들어갑니다. 그러면 컴포넌트가 마운트될 때 실행되고 끝입니다.useE

@reduxjs/tookit이라는 npm을 설치하면 보다 쉽게 리덕스를 정의하실 수 있습니다. reducer라는 객체에 4개의 객체가 key - value 형태로 구성되어 있습니다.리덕스도 결국 state를 전역으로 사용하기 위한 라이브러리이기에 나중에 우리는 stat

일단 npm 혹은 yarn으로 styled-components를 설치합니다.가장 먼저, 공통으로 적용될 css을 설정해주기 위해 GlobalStyles.js라는 파일을 생성합니다.저는 default로 설정되어 있는 css 속성을 초기화하고 싶었기 때문에 styled-r

styled-media-query는 styled-component와 같이 반응형 디자인을 구현할 때 좋습니다.사용법은 정말 간단합니다.일단 styled-media-query를 npm 혹은 yarn으로 설치합니다.그 후에, 전역적으로 영향을 미치는 최상위단의 파일에 (가

일단, npm 혹은 yarn으로 react-slick과 slick-carousel을 설치합니다.혹은(타입스크립트 사용시 @types/react-slick 추가 설치)가장 먼저, 슬라이드 설정을 해줘야 합니다.dot: 슬라이드 밑에 점으로 나타내는 것을 보여주냐 여부 설

한때, 자바스크립트 (이하 JS)는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 수행하고 있습니다. 나아가 브라우저뿐만 아니라 모바일, 데스크톱 어플리케이션에서도 널리 쓰

리액트를 이제 사용하기 시작하는 분들이라면 이런 코드가 낯설 수 있습니다.이런 코드는 JSX라고 하며 자바스크립트 (이하 JS)의 확장 문법으로 XML과 매우 비슷한 모양을 하고 있습니다.자, 그러면 JSX 코드가 어떻게 변환되는지 살펴보겠습니다.위의 App 함수는 결

코드는 타입스크립트 기준입니다.요구조건은 2가지였습니다.드래그 앤 드롭이 되어야 한다.지정된 영역에서 드래그하였을 때만 드래그가 되어야 한다.먼저, react-beautiful-dnd 라이브러리를 다운로드합니다.DragDropContext로 드래그 앤 드롭을 인식할 수

직전 프로젝트에서 핵심 기능은 클릭, ctrl 클릭, shift 클릭으로 아이템을 취사 선택할 수 있게 하는 것이었습니다.저는 shift 클릭 기능 구현을 담당하였고 로직이 복잡하여 구현하는 데에 애를 먹었습니다.이 게시글은 제가 단일 클릭, ctrl 클릭을 고려한 s

리액트 쿼리는 fetching, caching, updating 등을 다양한 옵션과 간단한 로직으로 해결할 수 있게 해줍니다. 그 중에서 useQuery는 GET 요청을 보낼 때 사용합니다. 초기 설정은 Context API와 비슷합니다. Context API에서

리코일은 페이스북에서 만든, 리액트를 위한 상태 관리 라이브러리입니다. 리덕스처럼 보일러 플레이트가 많지 않고, 정말 필요한 코드만을 여러 store로 구성할 수 있어서 개발 생산성과 효율성을 기대하며 프로젝트에 도입하였습니다. RecoilRoot RecoilRo

firebase는 구글에서 만든 개발 플랫폼으로 이것을 사용하면 db 구축이나 호스팅 등을 쉽게 할 수 있습니다. firestore는 firebase이라는 플랫폼에서 제공하는 NoSQL 형식의 DB입니다. firebase를 통해 Serverless하게 DB를 구축할

SWR은 Next.js로 유명한 Vercel에서 만든 원격 데이터 가져오기를 위한 Hook입니다.오직 useSWR이라는 훅을 사용하여 데이터를 조작합니다.key: 요청을 위한 고유한 값fetcher: 데이터를 조작하기 위한 함수를 반환하는 프라미스options: SWR

TDD란 테스트 주도 개발로서 서비스의 안정적인 운영과 서비스의 품질을 확보하기 위해 테스트 코드를 작성하고 관리하기 위해서 사용됩니다. TDD를 하기 위해서는 다음의 프로세스가 요구됩니다. 자동화된 테스트 시스템 준비 (e.g. jest, react-testing-

Input, Textarea 등의 Element에서 한글을 입력하다보면, 입력 후 마지막 글자가 중복으로 하나 더 써져있는 경우가 있습니다.영어에서는 발생하지 않는데, 그 이유는 한글같이 자음과 모음이 하나의 글자로 이루어진 경우는 알파벳처럼 하나의 문자와 다르게 여러

안녕하세요.크리에이트립 프론트엔드 개발자 이승우라고 해요 :)이 글에서는 Custom Style System을 구축한 경험을 공유해보려고 해요.크리에이트립 프론트엔드는 스타일링 라이브러리로 styled-components 를 사용하고 있어요. styled-compone