국비지원캠프3 [React] SPA(Single Page Application) 알아보기 SPA란? SPA란 Single Page Application의 약자로, 브라우저가 최초 하나의 모든 페이지 요청으로 전체 웹앱을 사용하는 방식이다. 기존의 전통적인 웹 사이트는 MPA(Multi Page Application), 여러개의 페이지로 구성된 어플리케이션으로 브라우저에 새로운 요청이 있을 때마다 서버에서 전체 페이지를 렌더링해주는 방식이다. 그렇기에 사소한 변경사항에도 전체 페이지가 다시 불러와져 화면이 깜빡거리게 되어 사용자에게 좋지 못한 경험을 줄 수 있다. 하지만 SPA 방식을 통해 새로운 요청이 있을 시에 특정 부분만 렌더링을 하여 사용자에게 빠른 인터렉션을 제공할 수 있게 된다. SPA 장점 사용자에게 빠른 인터렉션을 제공해준다. 변경된 특정 부분만을 AJAX와 같은 기술을 활용하여.. 2023. 11. 26. [React] React Hook 알아보기 React Hook이란? React 버전 16.8부터 새롭게 추가된 요소로 복잡한 클래스 컴포넌트 내에서 상태와 생명주기를 관리하지 않고도, 함수 컴포넌트 내에서 상태 관리와 다른 기능들까지 모두 사용가능하게 해주는 것이 바로 React Hook이다. Hook 유의사항 최상위(at the top level)에서만 Hook을 호출해야 한다. if문, for문과 같이 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 왜냐하면 만약 if문안에 Hook이 있을 경우 조건에 만족하지 못하여 Hook을 건너뛰게 되면 항상 정해져있던 Hook의 호출 순서가 꼬이게 되어 예상치못한 버그가 발생할 수 있다. 오직 React 함수 내에서 Hook을 호출해야 한다. React 함수 컴포넌트 내 또는 Cu.. 2023. 11. 19. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 2주차 - 세 번째 학습 정리 - 진행한 사항 개발한 기능 이번 프로젝트에서 제가 맡은 마지막 개발 사항인 관리자 페이지를 구현하였습니다. 먼저 관리자 페이지에는 상품 정보를 관리하는 탭과 주문 정보를 관리하는 탭으로 나뉩니다. 상품 정보 관리 탭에서는 상품을 추가, 삭제, 수정이 가능합니다. API 호출을 통해 DB에 저장된 상품 목록을 조회가능하도록 하였습니다. 기본적으로 상품 아이디, 정보, 가격 등이 표시되도록 구현하였습니다. 상품 추가 버튼을 누를 경우 상품 추가 UI로 넘어가게 됩니다. 상품의 이미지와, 이름, 가격은 필수로 적어주어야 하는 부분입니다. 상품 추가하기 버튼을 누를 경우, API 호출을 통해 상품에 대한 정보를 검증 후 목록에 추가될 수 있도록 구현하였습니다. 상품 수정 버튼을 누를 경우 상품 추가 UI가 뜨게 .. 2023. 11. 19. 이전 1 다음
