name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

16844개의 포스트
post-thumbnail

리액트는 어쩌다가 만들어 졌을까?

JavaScript를 사용하여 HTML로 구성한 UI를 제어해 보셨다면, DOM을 변형시키기 위하여 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정웹 애플리케이션의 규모가 커지면서 사용자와의 인터

방금 전
·
0개의 댓글
post-thumbnail

React Hooks - useEffect

useEffect는 엄청 중요한 Hook이라고 한다. 리액트 컴포넌트가 렌더링(Mount, Update, Unmount)될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.useEffect 훅은 인자로 콜백함수를 받으며, 두 가지 형태를 기억하자1\. 첫번째

13분 전
·
0개의 댓글
post-thumbnail

[Chrome Extension] Web3 Wallet 만들기 (2)

Chrome Extension으로 Web3 Wallet을 만드는데, 이번엔 Webpack 설정을 진행하려고 합니다.

19분 전
·
0개의 댓글
post-thumbnail

TIL: 비법에는 아무도 감탄을 안해 묘기가 중요한거지

useMemouseCallbackreact-querysuspense고차 함수와 고차 컴포넌트순수 함수와 순수 컴포넌트코드만 보고 데이터 형식을 알 수 있어야 한다생각을 하게 만드는 코드는 좋지 못한 코드다 -> 관심사 분리를 통해 관리삼항 연산자: 가독성을 위해 사용을

29분 전
·
1개의 댓글
post-thumbnail

[Chrome Extension] Web3 Wallet 만들기 (1)

Project를 위해서 Web3 Wallet을 개발하게 되어서, Chrome Extension으로 Web3 Wallet을 만들어 보도록 하겠습니다. 우선 CRA Typescript Project를 하나 만들어 봅시다. Default 형태의 CRA 프로젝트로는 Chr

30분 전
·
0개의 댓글
post-thumbnail

Mock Data 활용법

Mock Data mock data란? mock: 거짓된, 가짜의 이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있습니다. 즉, 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를

약 3시간 전
·
0개의 댓글
post-thumbnail

[TerraBlock] 리액트로 2D 마인크래프트 만들기

게임을 만들기 위해 리액트를 사용하는게 아닌, > 리액트 실력을 키우기 위해 게임을 만들고 있습니다. 🤔 사이드 프로젝트로 게임을?? 🤔 1. 리액트 실력을 키우기 위해 간단한 게임들을 사이드 프로젝트로 해보니 깊게 생각해야 할 부분도 많고 간간히 알고리즘이 필

약 3시간 전
·
0개의 댓글

React Mock Data

이름에서 알 수 있듯이 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.실제 API에서 받아온 데이터가 아닌 필요에 의해 샘플로 만들어 본 데이터이다.사용이유는 간단하다.개발 진행 시 필요한 API가 완성이 안되어있을 경우 mock data를 만들어 데이터가 들어오는

약 3시간 전
·
0개의 댓글

서버리스 프로젝트 모음

풀스택 서비스를 서버리스로 구현한 프로젝트 모음입니다.

약 8시간 전
·
0개의 댓글

SPA란?

SPA?

약 9시간 전
·
1개의 댓글

React) input 다루기

그럼 일단 input값을 저장할 state생성하기그리고 html DOM구성 component안에서 input생성, 이벤트 달자이거 js문법. 이벤트핸들러임. onChange={(e)=>{인풋깂변경함수(e.target.value);}onChange만약 상태값이 chang

약 12시간 전
·
0개의 댓글

react useEffect

한동안 전역 상태 관리를 주로 해서 클론 코딩을 하거나 간단한 것들을 만들었더니, 바보같이도 리액트의 기본적인 useEffect가 정확히 어떻게 작동하는지를 잠시 망각 ? 하고 살았던 것 같다.요즈음 디자인 라이브러리 없이 마크업 연습도 하고, 리액트는 기본이고 추가로

약 12시간 전
·
0개의 댓글
post-thumbnail

React Query와 함께하는 Next.js 무한 스크롤

Next.js에서 React Query hooks를 사용해 무한 스크롤 data fetching을 구현해 보자!

약 13시간 전
·
0개의 댓글
post-thumbnail

[TIL] 원티드 프리온보딩_16일차_220518

오늘은 react-query공부 ❕react-query를 사용하는 이유는 아래와 같다Server와 Client 사이 비동기 로직들을 쉽게 다룰 수 있다.캐싱, 동기화, 업데이트가 쉽게 이루어진다.npm install react-queryreact-query사용을 위해

약 13시간 전
·
0개의 댓글
post-thumbnail

[5/18 TIL] Redux, Rdux Toolkit

새로운 프로젝트에서 리덕스와 리덕스 툴킷을 사용하기 위해서 리덕스에 대해 학습해보았다. 1. Reducx 란? 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 이다. 2. Redux Toolkit 리덕스 툴킷은 Redux 로직을 작성하기 위해 리덕스에서 공식적으

약 13시간 전
·
0개의 댓글
post-thumbnail

TIL: 엉뚱하게 자꾸 딴 데서 찾는 거지? - 2. 검색어 추천 검색창 (4)

로컬 캐싱 최적화퍼지 문자열 검색커스텀 훅suspenseapi 호출 최적화: 디바운싱 처리를 한 input value 변경 시 api를 호출하지만 한 번 호출 시 대기 시간이 너무 길다 -> input value 변경 시 호출 취소 기능 추가https://g

약 13시간 전
·
1개의 댓글
post-thumbnail

[AWS-Amplify] 0. Amplify? 리얼타임으로 서버 없이 간단하게 백엔드 구축!

2월 18일 포스팅을 마지막으로,, 무려 3개월만의 포스팅! (3개월동안 정말 많이 바빴다,,,) 오늘은 aws에서 제공하는 amplify에 대해 알아보고자 한다. amplify에 대해 처음 알게된건 내 기억으로 올해 4월 말쯤이었던 것 같다. 아무 생각없이 퇴근하고

약 14시간 전
·
0개의 댓글
post-thumbnail

TIL(22.05.18)

일반적으로 리액트 프로젝트를 진행하다가 에러가 발생할 경우 전체 프로젝트가 올 스탑한다. 그리고 흰 화면만 멍하니 쳐다볼 뿐..에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며, 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트다

약 14시간 전
·
0개의 댓글