React

🔴들어가기 앞서.. > 프론트엔드에서 html,css 그리고 javascript를 배웠다면 다음 단계로 프론트엔드 라이브러리 중 하나인 React를 가장 많이 배우게 됩니다. Vue나 Angular 또한 간편하고 유용하지만 현재 업계에서 가장 많이 사용하고 있는 것

Jsx는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식을 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. ◽원래 형태의 코드◾jsx문법으로 작성된 코드  jsx문

다음과 같이 원하는 값이 렌더링 되지만 console.log에는 변화한 값이 바로 찍히는 것이 아니라 값이 하나씩 밀려서 나오게 된다.useState에서 setState로 처리한 값이 바로 반영이 안되었기 때문이다.=> useState는 비동기처리가 되기때문에 클릭을

 리액트에서 작업 할 때, 특히 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨줄 때 props를 이용하곤 한다. 하지만 대규모 프로젝트 같은 경우 props로 값을 넘겨줄때 여러개의 컴포넌트를 통해 쓸데없이 넘겨주게 되면 코드의 복잡성이 증가하고 까다로운 작업이 될 수

 useReducer는 상태를 관리하고 업데이트를 하는 훅으로 useState에 비해서 큰 프로젝트에서 대신 사용하는 훅이라고 볼 수 있다. useState와의 가장 큰 차이점은 컴포넌트 외부에 업데이트 로직을 만들어 줌으로써 코드를 최적화 시킨다.state는 컴포넌트

🔴 Redux에 대해서  redux는 context API와 같이 프로젝트 규모가 커질 때 상태에 대해서 어떤 컴포넌트든지 상태를 가져다 쓸 수 있게 해주는 라이브러리이다. 사실 redux는 바닐라js에서도 사용이 가능하며 react에서는 react-re

리액트 쿼리를 커뮤니티 프로젝트를 수행하면서 사용하였는데, 커뮤니티 특성 상 실시간으로 업데이트 되어야 하는 부분이 많았다. 하지만 이런 이유로 쿼리 요청을 많이 하기 때문에 최적화 해야 하는 부분이 필요했다... (쿼리 요청을 최적화하지 못했기 때문에 백엔드 서버 D

Myfavor프로젝트를 하면서 전역적으로 상태를 관리해주어야하는 문제가 생겼으며, 이를 위한 문제를 해결하기 위해 redux를 도입하였다. redux에 대해 자세히 알아보자.  props drilling은 props를 하위 컴포넌트로 계속해서 전달하는 과정에서 발생하는

React에서 컴포넌트는 재사용 가능한 요소이다. 클래스 컴포넌트와 함수 컴포넌트는 둘 다 React 컴포넌트를 생성하는 두 가지 주요 방법이다.react에서 컴포넌트를 구성할 때 초창기에는 클래스형 컴포넌트를 사용하여 개발을 하였다. 그리고 React 16.8버전이후

  유효성 검사는 사용자가 입력한 데이터가 예상대호 유효한지 여부를 체크할 수 있다. 이는 시스템의 안정성과 보안을 유지하며 오류와 잘못된 데이터가 입력되는 것을 사전에 방지하는데 도움을 준다. 그렇다면 유효성 검사 처리는 어떻게 어디서 해주는 것이 합리적 일까??앞에

  react에서 hook을 도입한 이래로 js라이브러리로는 강력한 1대장 역할을 하고 있습니다. hook을 도입하여 기존에 class형 컴포넌트에서 prototype 언어인 js에 맞게 function 컴포넌트의 시대가 도래하였는데요. 함수형을 강조하는 만큼 js에서

  초창기 프론트엔드라고 하면 단순 뷰 로직 정도만 구현하여 프론트엔드는 큰 역할을 못하는 것처럼 인식이 되었습니다. 하지만 현재 많은 기술스택들이 생겨나고 이로 인해 프론트엔드의 역할은 점점 커지고 있습니다.  기존 mvc아키텍쳐에서 mvp 그리고 mvvp 등 많은

  지금까지 팀 프로젝트에서 프론트엔드 리드로 작업을 하였고 최근에는 혼자 프론트엔드 쪽 프로젝트를 작업하였습니다. 프로젝트를 진행하기 전에 작업을 효율적으로 가져가기 위해 어떻게 코드를 작성하고 폴더를 구성하는 지는 전적으로 저의 의견을 가지고 디자인 패턴을 구현하였

  이전에 컴포넌트 UI구성에 있어서 Atomic Pattern을 도입할 것을 예고 하였습니다. Atomic패턴을 도입함으로써 장단점등 경험했던 것들을 작성하고자 합니다. Atomic패턴에 대해 궁금한 사항이 있으시면 이전 글 Atomic Pattern을 참고해주세요.