프론트엔드국비지원8 [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. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 2주차 - 두 번째 학습 정리 - 진행한 사항 개발한 기능 저번 시간에 로그인 페이지의 UI와 기능을 어느 정도 완성하였기에 이번 시간엔 회원가입 페이지를 구현하였습니다. 따로 와이어 프레임을 제작했었지만 생각보다 복잡한 구조였기에 디자인을 바꿔 진행하였습니다. 먼저 api 데이터 명세서에 따라 필요한 정보들을 입력할 input창과 중복확인 버튼을 구현하였습니다. 아이디와 비밀번호는 모두 required값이고 나머지는 option값으로 설정하였습니다. 중복확인은 api 호출을 통해 db에 있는 값들과 input값을 비교하여 확인하였습니다. 주소 입력창은 Daum 우편 주소 api를 사용하여 비교적 손쉽게 해결하였습니다. 회원가입 버튼을 누를 시 입력된 값들의 형식을 검사한 후 가입되도록 하였습니다. 회원 가입 후 로그인에 성공할 시 헤더.. 2023. 11. 15. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 2주차 - 첫 번째 학습 정리 - 진행한 사항 개발한 기능 로그인 페이지의 UI와 기능을 구현하였습니다. 먼저 미리 제작된 와이어 프레임을 따라서 UI를 구현하였습니다. 기본적인 아이디와 비밀번호를 입력할 수 있는 input창과 로그인 버튼을 만들어 주었습니다. 이와 같이 UI를 구현하였고, 만약 미리 정해진 값이 제대로 입력되지 않았을 경우에 아이디와 비밀번호를 확인해달라는 메세지가 나오도록 설정하였습니다. 로그인에 성공할 시 localstorage에 api요청을 통해 받아온 jwt access-token을 저장하도록 한 후 메인 페이지로 이동하도록 구현하였습니다. html코드 Welcome to Everyday Party 아이디 또는 비밀번호를 확인해주세요 로그인 회원가입 | 아이디 찾기 | 비밀번호 찾기 EVERYDAY PARTY .. 2023. 11. 12. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 1주차 - 세 번째 학습 정리 - 진행된 사항 개발한 기능 메인 배너 슬라이드 기능을 구현하였습니다. 직접 구현해보려 했지만, 시간상 여유롭지 못했기에 swiper라는 라이브러리를 찾아서 사용하게 되었습니다. CDN으로 swiper 라이브러리를 link=css와 script를 가져와서 사용하였습니다. 아래는 swiper를 설정하게 해주는 생성자로 안에 변수의 값을 바꿔주면 제가 원하는 방식으로 슬라이드 효과를 보여줄 수 있습니다. 이 외에 리뷰 슬라이드는 직접 JavaScript를 이용하여 구현하였습니다. // 리뷰 슬라이드 바 이벤트 const slideList = document.querySelector(".reviews-list"); const slides = document.querySelectorAll(".reviews-list.. 2023. 11. 12. 이전 1 2 다음
