분류 전체보기 (85) 썸네일형 리스트형 프로젝트: React(TypeScript) 기반의 동적 UI 개발(5)-비밀번호 초기화, zustand, 쿼리스트링 비밀번호 초기화auth.api.tsresetRequest로 이메일이 있는지 판별하고,resetPassword로 변경한 비밀번호로 초기화 해주는 코드를 구현💢지금 방법은 모킹버전이기 때문에,실무에서는 토큰을 같이 보내거나하는 일이 있지만실습이기때문에 간소화하게 했다.ResetPassword.tsxSignup.tsx와 구조가 비슷해서 복붙해서 수정해서 사용했다.status 200으로 원래 1111이던 password가 1234로 변경이 된 것을 볼 수 있다.로그인과 전역 상태관리zustandyarn add zustand도서 목록 페이지도서 목록 화면 요구 사항도서(book)의 목록을 fetch하여 화면에 렌더페이지네이션을 구현검색 결과가 없을 때, 결과 없음 화면 노출카테고리 및 신간 필터 기능을 제공목록.. 프로젝트: React(TypeScript) 기반의 동적 UI 개발(4)-React Router<Link to='/'>, CORS 라우트 작성React Routerhttps://reactrouter.com/en/main Docs | React Router reactrouter.comyarn add react-router-dom로그인/login도서 목록/books회원가입/signup도서 상세/books/{id}비밀번호 초기화/reset장바구니/cart 주문서 작성/order주문목록/orderlist 🔸리액트 라우터는 a태그가 아닌 를 사용한다.프로젝트 모델 정의Book과 BookDetail은 Book에서 2가지가 추가되었기 때문에extends Book으로 확장시켜사용했다.API 통신 모듈 구성레이어를 고려하여 설계하면렌더 영역을 깔끔하게 유지할 수 있다.훅을 통해서 중복코드를 줄이고 훅 안에서 데이터를 가공하는 로직을 제공Fetch.. 프로젝트: React(TypeScript) 기반의 동적 UI 개발(3) Title.tsxTitle.spec.tsx🔸Title을 test하는 spec 파일Button.tsxButton.spec.tsxInputText.tsxInputText.spec.tsxHeader.tsxFooter.tsxLayout.tsx 프로젝트: React(TypeScript) 기반의 동적 UI 개발(2)-global style(reset, normalize, sanitize) 레이아웃이 필요한 이유프로젝트의 기본적인 화면 구조를 잡는다.반복적으로 들어가야 하는 헤더, 푸터 등을 매 화면마다 제공한다.상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비한다.global styleglobal = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링을 적용"user agent stylesheet"로 표시되는 브라우저의 기본 스타일이 차이를 만든다.브라우저 간의 스타일 차이를 극복하기 위해 사용에릭마이어 reset.csshttps://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencie.. 프로젝트: React(TypeScript) 기반의 동적 UI 개발(1)-cra.vite차이 ✨Book Store 앱 만들기 프로젝트cra와 vite의 차이crayarn create react-app 프로젝트명 --template typescriptviteyarn create vite 프로젝트명 --template react-ts프로젝트 구조pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트utils : 유틸리티hooks : 리액트 훅model : 모델(타입)api : api 연동을 위한 fetcher 등타입을 체크하는 CLI"typecheck":"tsc --noEmit --skipLibCheckyarn typecheck💢타입에러가 없었는데 일부러 에러를 내자 문제가 있는 부분을 찾을 수 있었다.tsc🔸타입스크립트 .. 프론트엔드 심화: 상태 관리와 비동기 처리(4)-@hello-pangea/dnd react-drag-drop-apphttps://github.com/atlassian/react-beautiful-dnd GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactBeautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dndgithub.com@types/react-beautiful-dnd 는 더 이상 유지보수가 되지않고 오래된 버전이라고 하여yarn add @hello-pangea/dnd를 사용했다.beautiful-dnd와 사용방법은 거의 동일하다. 프론트엔드 심화: 상태 관리와 비동기 처리(3) EditModal.tsxEditModal.css.tsLoggerModal.tsxLogerModal.css.tsLogItem.tsx추가하거나 수정할 때 들어간 timestamp로 지금 시간에서 number로 계산해서인스타나 페이스북의 게시글 몇 분전 과 같은 기능을 구현하였다.LogItem.css.tsApp.tsx 프론트엔드 심화: 상태 관리와 비동기 처리(2)-Click Event 우선순위 BoardList.tsxBoardList.css.ts✨이벤트 클릭 우선순onMouseDown >> onMouseUp >> onClick SideForm.jsxSideForm.css.tsListContainer.tsxListContainer.css.tsList.tsxList.css.tsTask.tsxTask.css.tsActionButton.tsxActionButton.css.tsDropDownForm.tsxDropDownForm.css.ts 이전 1 2 3 4 5 6 7 ··· 11 다음
