◼ FrontEnd

[ReactJS] Hook & State & Props

Hook이란? Hook은 클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미한다. 미리 만들어 둔 함수를 가져와서 사용을 해 주는 것이기 때문에 Hook이라는 이름을 사용한다. Hook의 모음을 Hooks라 한다. Hook의 등장 배경 기존엔 클래스 컴포넌트만을 사용하여 컴포넌트를 생성하였는데, 함수 컴포넌트의 장점으로 인해 이를 사용하고자 하는 니즈가 점점 많아지게 되었다. 함수 컴포넌트의 장점 : 선언하기 편리함, 직관적, 메모리 자원을 덜 사용함 이로 인해 클래스 컴포넌트에서만 가능했던 기능을 함수 컴포넌트에서도 사용하고자 Hook이 등장하였다. Hook의 특징 함수 컴포넌트에서만 사용 가능하다. Hook의 이름..

[ReactJS] SPA & Routing

SPA & Routing SPA (Single Page Application) 의 개념 SPA는 페이지가 하나인 웹 어플리케이션을 의미한다. 여기서 페이지란 html 파일을 뜻하기 때문에, SPA는 웹 사이트 전체에 HTML 파일이 하나인 웹 어플리케이션이다. MPA와 달리, SPA는 html이 하나 뿐이므로 여러 페이지(UI)를 하나의 페이지에서 보여주기 위해 Routing 기능이 필요하다. Routing의 개념 SPA에서 경로에 따라 다른 페이지를 브라우저 화면에 보여주는 것을 Routing이라 한다. React 자체에는 Routing 기능이 없기 때문에, React-Router이라는 라이브러리를 설치해 사용해야 한다. React-Router 설치 명령어 : npm install react-route..

[ReactJS] JSX와 컴포넌트 (Component)

JSX JSX는 JavaScript의 문법을 확장한 React만의 문법으로, JavaScript 내에서 HTML 마크업을 사용할 수 있도록 한 것이다. 마크업과 자바스크립트 로직이 서로 연결되어 있다고 판단하여 이를 한 번에 작성할 수 있는 방법을 고민한 결과 생겨난 문법이다. JavaScript 내에서 마크업을 작성할 수 있고, JS 로직도 함께 작성할 수 있다. JavaScript 정식 문법은 아니기 때문에 브라우저에서 이를 해석할 수 없다. 따라서 Babel 변역기로 이를 React.createElement() 함수로 변환하는 과정이 반드시 필요하다. JSX의 특징 JSX는 자바스크립트의 값이다. 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나 함수의 리턴값으로 사용할 수 있다. f..

[ReactJS] React의 특징과 Virtual DOM

React의 대표적인 특징 2가지 선언형 (Declarative Programming) 리엑트는 선언형 프로그래밍 언어이다. 절차적 vs 선언적 절차적(명령형) 프로그래밍 원하는 결과를 만들기 위한 절차(How)에 중점을 두는 프로그래밍 방식 자바스크립트에서 직접 DOM을 조작하는 방식 모든 과정을 일일이 기술해야 하므로 생산성이 저하될 수 있다. 선언적 프로그래밍 원하는 결과가 무엇(What)인지 선언하는 형태로 프로그래밍 하는 방식 자바스크립트에서 DOM 조작은 React에 위임 컴퓨터는 절차적으로 동작하기에 결국 모든 명령을 다 절차적으로 해주어야 하지만, 개발을 하는 개발자는 (최대한 절차적인 부분은 감추가나 위임하고) 선언적인 부분에만 집중하게 하는 방식이 선언적인 프로그래밍 방식이다. 컴포넌트..

[ReactJS] React JS 소개 및 설치

React JS의 개념과 탄생 배경 React 탄생 배경 웹 애플리캐이션이 등장함에 따라 웹 개발의 복잡성이 증가하게 되었다. 웹 애플리케이션 : 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용할 수 있도록 만든 웹 서비스 이에 따라 DOM을 직접 조작하는 (Vanila JS, jQuery를 이용하는) 기존의 개발 방법으로는 한계가 생겼다. 이러한 상황에서 자연스럽게 프론트엔드 개발의 생산성 향상과 난이도 하향을 위한 여러 라이브러리 및 프레임워크가 탄생하였다. 이 중 현재 제일 많이 사용되는 것은, React, Angular, Vue이다. React JS란? React JS (혹은 React)는 UI를 구축하고 어플리케이션이 interactive하도록 만들어주는 프레임워크 (Framework) 이자 ..

[NodeJS] Node JS & NPM 소개 및 설치

Node JS란? Node JS란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행 환경)이다. 실행 환경 : 특정 프로그램을 실행하기 위해서 필요한 환경 JavaScript 실행 환경 : JavaScript를 실행할 수 있도록 해주는 환경 (JavaScript 엔진 + 파일 읽고 쓰는 기능 + 입출력 기능 등등) Node JS란 (V8 엔진으로 빌드된) 단순한 문자의 나열인 JavaScript 코드를 해석하고 실행할 수 있도록 제공된 환경이다. Node JS 탄생 배경 웹 브라우저는 대표적인 JavaScript의 실행환경이다. 애초에 JavaScript 언어는 브라우저에서 간단한 스크립트를 실행하기 위해 탄생한 언어이다. 그렇기 때문에, JavaScript는 브라우저..

[ReactJS] 개발 도중 마주했던 오류 모음 (2022년 11-12월)

React 라이브러리를 이용하여 웹 개발을 하던 도중 마주했던 여러 에러들을 자잘한 것부터 규모가 컸던 것까지 모두 깃허브에 md문서로 정리해두었다. 혹시 비슷한 에러를 또 마주하게 되면 여기에 와서 Ctri+F를 통해 검색해서 찾아보자. DOM에 직접 접근하여 classList 메소드를 통해 클래스를 추가하고 제거했더니 정상적으로 동작하지 않는다. React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하는 코드를 작성했는데, event is deprecated 에러가 발생했다. setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에, 상태값을 활용한 로직이 내 의도대로 동작하지 않는다. (Router를 활용한) React 프로젝트를 초기 세팅..

[ReactJS] 백에서 GET method를 통해 받아온 데이터를 구조 분해 할당할 때 값이 읽혀지지 않는 문제 - Uncaught TypeError: Cannot read properties of undefined (reading '0')

🚨 문제 상황 팀 프로젝트 중 백엔드 서버에 필요한 데이터를 요청하여 받은 후, 이 정보를 가공해서 화면에 렌더링해주는 작업이 여러 번 있었다. 이 때 자주 골치를 아프게 했던 에러가 하나 있어 포스트로 남긴다. const ReservationPage = () => { const [lectureData, setLectureData] = useState({}); // 백에서 상품 디테일 데이터 수신 useEffect(() => { fetch(`/data/reservationData.json`, { method: 'GET', }) .then(response => response.json()) .then(data => { setLectureData(data); }); }, []); if (lectureData..

[ReactJS] setState의 비동기 처리로 인한 버그 해결하기

🚨 문제 상황 setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에 나의 의도대로 코드가 동작하지 않는다. function handleBtnActivateById(event) { setIdValue(event.target.value); console.log(idValue); isIdVaild = idValue.indexOf('@') !== -1 ? true : false; handleBtnActivate(event); } 위의 사진처럼, 입력창에 입력된 값이 (콘솔창에서) 한 글자씩 덜 출력되는 것을 확인할 수 있다. 💡 문제 해결 및 과정 구글링의 통해 알아보니, setState의 Batch Update라는 비동기적 특성으로 인해 이런 문제가 생기는 것임을 알 수 있었다..

[ReactJS] React에서 이벤트 리스너를 연결하고, event 객체를 활용할 때 주의해야 할 점

🚨 문제 상황 React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하기 위해 위와 같은 코드를 작성하였다. 하지만 'event is deprecated'라는 이해할 수 없는 에러가 발생하였고 코드 역시 실행되지 않았다. 💡 문제 해결 및 과정 바닐라 JS에서 특정 요소에 이벤트를 연결해주려면 우선 해당 요소에 해당하는 DOM 객체를 DOM 트리에서 찾아야 한다. 그러고 난 후, 이 객체에 원하는 이벤트를 addEventListener 함수를 통해 연결해주면 된다. 혹은 인라인 방식으로 특정 요소에 해당하는 HTML 태그에 이벤트 속성을 바로 부여해주는 방법도 있다. React에서 특정 요소에 이벤트를 연결해주려면 바닐라 JS에서의 인라인 방식처럼 JSX로 변환된 코드의 태..