서버와 통신 ※이 포스트에서는 Axios의 사용 없이, Fetch와 FormData만을 이용하여 구현하였습니다 REST API 정의 두 컴퓨터가 인터넷을 통해서 정보를 교환하기 위해 사용하는 통신 방식(인터페이스) REST란? Representational State Transfer의 약자로, 네트워크에서 데이터의 전송 / 처리...

비동기와 동기 개념 동기 서버에서 작업을 끝내기를 기다린 후, 다음 작업을 실행하는 방식의 통신 간단하게 코드 작성이 가능하지만, 여러 작업이 동시에 실행 될 경우 성능 저하라는 단점이 존재함 비동기 요청을 보낸 이후, 응답을 기다리지 않고 다음 작업을 실행하는 방식의 통신 상품 등의 목록을 가져오기, 다운로드 작업 등이 ...

예외 처리 예외 처리란 프로그램의 실행 중 오류가 발생 되었을 때, 오류를 그대로 실행시키지 않고 오류에 대응하는 것 필요성 예외 처리를 통하여, 프로그램의 비정상 종료를 막을 수 있다 프로그램 개발 중, 문제가 발생 할 경우 이를 해결하는데 필요한 시간을 줄일 수 있다 종류 Error Boundary 특징 Rea...

※본 블로그에서는 MUI를 이용하여 Grid를 구현하였다 Grid 정의 Grid란 가로 세로 방향으로 컴포넌트의 배치를 가능하게 하는 2차원 레이아웃 시스템이다 MUI에서의 Grid는 더 높은 유연성을 위해 CSS FlexBox1를 기반으로 작동된다 특징 스마트폰(xs), 태블릿(sm), 데스크톱(md, lg, xl) 별 UI...

Context API 정의 다른 컴포넌트에 데이터를 전달 할 때, prop 사용없이 데이터를 전달 할 수 있게 해주는 리액트 내장 API 필요성 전역적으로 필요한 데이터는 최상위 컴포넌트 App에서 state를 이용하여 관리 및 prop을 이용하여 이 값을 전달하는데, 다수의 컴포넌트를 거쳐야 할 때는, 이 과정이 매우 복잡해진다....

배열 정의 같은 자료형의 데이터를 모아서 관리하는 방식의 자료 구조 자바 스크립트에서는 const이나 let 이용하여 배열 생성이 가능하다 자바 스크립트에서는 다른 언어와 다르게 다양한 자료형의 데이터를 함께 사용이 가능하다 사용 방법 let이나 const 키워드를 사용하고 대괄호 내에 쉼표(,)를 이...

Web Storage API 정의 웹의 데이터를 클라이언트에 저장할 수 있는 자료 구조 SessionStorage와 LocalStorage 2가지가 존재함 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 자료 구조 종류 SessionStorage 브라우저가 유지되어 있는 동안 데이터를 유지하는 자료 구...

후크 정의 프롭을 인수로 받아, 리액트 요소를 반환하는 자바스크립트 함수 주의 후크는 리액트 함수의 컴포넌트의 최상위에서 호출해야함 루프, 조건문이나 중첩된 함수의 내부에서는 후크의 호출할 수 없음 리액트 함수 내부에서만 호출 가능함 종류 useState 정의 컴포넌트의 상태를...

조건부 렌더링 정의 프로그램의 상태에 따라서 컴포넌트 일부만 렌더링 하는 것 요소를 표시/숨기기나 인증을 처리하는 등의 용도로 처리가 가능함 if나 조건부 연산자 등을 이용하여 구현 가능함 예시 로그인 되지 않은 상태 로그인 된 상태 사용한 코드 {isLogged ? (<button classN...

상태 저장 컴포넌트와 상태 비저장 컴포넌트 상태 비저장 컴포넌트(Stateless Component) 정의 프롭을 인수로 받아, 리액트 요소를 반환하는 자바스크립트 함수 내부에 State가 없으며, 값을 기억 / 변경할 필요가 없음 장점 코드 관리의 간편함 예시 코드 function NonSaveFunc(props) { ...