전체 응용의 구성프로젝트 개발과정의 설계를 미리 구성하는 방법FEReact 응용으로 만들어져 UI 에 해당하는 부분을 서비스BE로 향하는 api 호출은 브라우저의 JS 실행에 의해서 이루어짐 > 이 코드를 FE가 제공- FE 에서 call(post, get, put, delete) 하는것처럼 보이지만, 호출은 브라우저의 실행에 의해서 이루어지는것이다! BEExpress 응용으로 만들어져 데이터베이스를 이용한 데이터 모델을 서비스JWT 를 이용한 사용자 인증을 통해 데이터 접근을 보호 : 로그아웃으로 인한 인증정보 해제, 기존 사용자의 정보 접근 제한CORS 정책을 통한 악의적인 접근을 방지 DBprgms_notes 라는 이름의 데이터베이스에 두개의 테이블을 포함 설정해야 할 것FEBE의 API URL 주..
웹 풀 사이클 데브코스
목표react+express자동화 파이프라인으로 구축, 개발 및 통합(빌드, 테스트, 배포)웹 개발 프로세스에 더 중점을 두고 진행할 것이다.테스트 자동화 및 배포 프로세스 개발자로써 해야할 역할, 범위, 타팀과 업무에 대한 이해환경구성 자동화를 통해 도구의 지원하는 방식. 환경 구성에 주의해야할 부분개발환경과 프로덕션 환경의 차이를 염두하고, 전체 싸이클을 경험하는 과정이다. CICD 파이프라인이 중점이 아닌, E2E 테스트, AWS, 인프라 모니터링 관련된 부분이 추가된다.AWS 클라우드 인프라를 이용한 프로덕션 환경 모사.모니터링과 시각화 소개노션과 유사한 상태의 노트, 문서, 메모장과 같은 프로젝트 서비스- 요구사항으로부터 전체 설계를 도출할 수 있는 능력은 중요하다. 기술스택BEExpress.j..
캐로셀Slick 라이브러리 Home | React SlickThe Last React Carousel You'll Ever Need!react-slick.neostack.com목 데이터로 reviewAll 데이터를 훅으로 생성해서 사용한다.간단한 슬라이딩 효과`npm i react-slick --save` `npm i slick-carousel --save` 타입 설치 `npm i --save-dev @types/react-slick`import Slider from 'react-slick';import 'slick-carousel/slick/slick.css';import 'slick-carousel/slick/slick-theme.css';//..const sliderSettings = { do..
모킹 서버 작성 MSW자바스크립트 라이브러리. 업계표준라이브러리. 자바스크립트라면 다른 환경에서도 많이 사용한다!Mocking responses 모킹 : 실제로 존재하지 않는 것을 가상으로 구현하는 것. node 서버를 가상으로 띄워논다 Mocking responsesLearn how to mock HTTP responses.mswjs.ioMock Service Worker존재하지 않는 API 에 대한 응답을 모킹service worker에서 요청을 처리chrome 기준 devTool의 Application / service workers의 "Bypass for network"로 일시정지실무에서는 로그에 남기 때문에, 껏다켜기 어렵다. 리뷰 처리목 서비스로 리뷰 생성하기리뷰 모델, 테스트 생성export..
중간 회고자주 할수록 좋고, 프로젝트 중간에 하면 더 좋다고 이야기한다.성장과 학습문제 해결유연성과 적응성 (애자일)퍼포먼스 향상더 잘하려고! 주요 학습 내용 전체 정리타입과 모델theme.ts 컬리 키를 사용하는 인터페이스를 선언해서 사이드이펙트, 정의, 활용을 하게 되었다.사용하는 데이터 모델을 인터페이스로 정리, export 해서 재사용하였다. 이때 모델끼리도 재사용, 분리, extends 확장으로 상속받아서 동작할 수있도록 확용하였다.상태 Props 의 데이터 타입 정의, UI 타입 정의, Pick(선택), Omit(제외) 과 같은 타입스크립트 문법 활용데이터 흐름도서 Books.tsx > 도서목록 컴포넌트 BooksList.tsx > useBooks.ts 도서목록 받아오는 훅 > books.ap..
사용자가 장바구니에 담은 내역을 확인선택한 도서 아이템의 수량과 가격 합계를 표시장바구니 담은 도서 아이템을 삭제각 도서 아이템을 선택하여 주문서 작성이렇게 필요한 기능을 미리 작성한 뒤 구현하는 방식.. 좋다! 장바구니 내역 확인cart api 호출각 항목 선택해서 수량 추가하는 방법 중.. Input Check타입을 사용하는 방법도 있지만, 아이콘으로 동작하도록 하는 방법루프되는 아이템이 추가타입을 넣거나 or 체크된 데이터 배열을 (상태) 새로 생성하는 방법해당 배열 아이템 컴포넌트의 해당 id를 가진 데이터가 목록에 있는지 판단해야 한다. checked반복되는 상태 확인 `useMemo()` //carts.tsx const [checkedItems, setCheckedItems] = useSta..
각 도서 상세 정보를 노출좋아요 버튼을 클릭시 좋아요 또는 취소 기능수량을 입력하여 장바구니 담기null 일수도 있는 경우 타입에러 early return 방식을 사용할 수 있다! 배워감import React from 'react';import { useParams } from 'react-router-dom';import styled from 'styled-components';import { useBook } from '../hooks/useBook';const BookDetail = () => { const { bookId } = useParams(); const { book } = useBook(bookId); if (!book) return null; return {book.title..
비밀번호 초기화비밀번호 까먹었을때 > 초기화 요청하는 방법모킹 방법. 실무에서는 토큰을 전달하거나 헤더에 토큰을 심기도 하는 방법을 사용한다.//auth.apiexport const resetRequest =async (data: SignupProps) => { const response = await httpClient.post('/users/reset', data); //데이터 바디로 보내준다 return response.data;};export const resetPwd =async (data: SignupProps) => { const response = await httpClient.put('/users/reset', data); //데이터 바디로 보내준다 return response.d..
라우트페이지 및 경로`npm i react-router-dom @types/react-router-dom --save` React Router 를 사용해서 작성한다.페이지 경로는 /~도서상세만 /books/{id} route 에서 존재하지 않는 에러페이지가 발생할 경우? `errorElement` 항목으로 예외처리한다.오류 예외처리 Error.tsximport { useRouteError } from 'react-router-dom';interface RouteError { statusText?: string; message?: string;}function Error() { const error = useRouteError() as RouteError; return ( 오류발생 ..