React의 함수형 컴포넌트에서 사용하지 못했던 상태 관리, Lifecycle Method 등 여러 기능을 대체하기 위해 등장한 개념. React 16.8 버전에서 추가되었다. 클래스형 컴포넌트의 단점 번들링 시 코드 압축이 잘 되지 않는다. 컴파일 단계에서 코드를 최적화하기 어렵게 만든다. 서로 연관성이 없는 여러 로직을 하나의 생명 주기 메서드에 작성하는 경우가 많다. Hot Reload를 적용한 상황에서 개발자가 개발 시 디버깅하기 힘든 버그를 발생시키는 경우가 있다. 재사용 가능한 로직을 만들 때 고차 컴포넌트를 사용하거나 렌더 속성값 패턴을 사용함으로써 React Element Tree가 깊어지면서 성능에 부정적 영향을 끼친다. Hook의 장점 앞서 말한 클래스형 컴포넌트의 단점이 해결한다. 비..
이 글은 토스 개발자 컨퍼런스 SLASH 21 중 박서진 님의 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기를 보고 내용을 정리한 글입니다. 정말 좋은 영상이니 여러분들도 꼭 보면 좋을 것 같습니다. 웹 서비스에서 다루기 어려운 "비동기" 비동기 프로그래밍은 프론트엔드 개발에 있어서 필수적인 존재다. 가장 큰 이유는 브라우저가 서버에 요청을 보낸 후에 아직 응답이 오지 않은 상황에서도 사용자와 인터랙션을 멈추면 안 되기 때문이다. 즉, 서버로 요청을 보내는 코드를 작성했을 때 해당 요청에 대한 응답이 담긴 변수의 값이 정해지기 전에도 다른 코드가 실행될 수 있어야 한다. 더 나은 사용자 경험을 위해서다. 그럼에도 불구하고, 비동기 개념은 초보 개발자들의 뒷목을 잡게 하고 어느 정도 개발을 해 본 개발..
이번에 Create React App으로 만들지 않고 직접 Webpack(내 기준 v5.54.0) 설정을 통해 만든 React 프로젝트의 환경변수를 설정하는 과정에서 참담한 경험을 해서 이렇게 글로 남긴다! 만약 이 글을 읽는 당신이 아래 중 하나 이상의 상황에 속해있다면 이 글을 꼭 읽고 환경변수 설정에 성공하기를 바란다^^ 당신의 React 프로젝트가 CRA(Create React App)로 만들어지지 않았을 때 당신의 React 프로젝트가 Webpack 5버전 이상을 통해 구축됐을 때 dotenv 쓰라 해서 썼는데 에러가 발생할 때 그냥 문제에 대한 해결 방법을 알고 싶다면 스크롤 쭉 내려서 마지막 3줄 요약을 읽어주세요. 길고 긴 여정 일단 한국어로 React 환경변수 설정에 대해 구글링을 해보면..