💻/[과제]31 [과제] Todo App에 FE 프레임워크 적용 프레임워크 설치 1. Create React App npx create-react-app {원하는 디렉터리 경로} 2. Redux npm install @reduxjs/toolkit react-redux - 리액트 프로젝트를 시작하면서 템플릿 지정으로 리덕스를 시작할 수 있음 npx create-react-app [프로젝트명] --template redux 3. Styled Component - --save 옵션은 package.json의 dependencies 항목에 모듈을 추가한다는 의미 - npm5 버전부터 기본값이 --save라 굳이 쓸 필요 없음 → 공식 사이트 설치 예제에 적힌 대로는 아래와 같다 npm install --save styled-components 4. ESlint, Pretti.. 2023. 2. 14. [과제] proxy를 설정해 HTTP 통신하기 1. 목표 - proxy를 설정해 클라이언트와 서버 간 http 통신을 가능하게 하기 - 여러 개의 도메인이 존재하는 경우, 유연하게 proxy를 설정하여 클라이언트와 서버간의 http 통신을 가능케 함 2. Bare Minimum Requirement 과제 1 - webpack dev server의 proxy 기능을 사용해 우회하여 응답을 받아오기 과제 2 - webpack dev server의 proxy 기능 대신 http-proxy-middleware의 proxy 기능을 사용하여 proxy를 유연히 설정해 2개의 도메인에서 모두 응답을 받아오기 - api2에 관련된 fetch 함수를 만들고, 컴포넌트 하나 이상을 만들어 2개의 도메인에서 모두 응답을 받아오는 지 테스트 2023. 2. 6. [과제] Github Action 실습 Bare Minimum Requirements - 나만의 아고라 스테이츠 서버의 클라이언트 부분을 S3으로 배포하기 - 튜토리얼에 이어서 실습 진행 하기. 기존에 가지고 있었던 레포지토리를 이용할 것 Github Actions를 통한 배포 Flow(클라이언트) - 이번 클라이언트 배포는 간단하게 3가지 단계로 나뉨 Source : Github reference 브랜치에 코드가 커밋되면 Build : github actions의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드를 하고 Deploy : github actions의 YAML 파일에 적힌 명렁어를 토대로 s3로 빌드 결과를 업로드 Github Actions Secrets 정하기 - 절대로 외부로 노출되어서는 안되기 때문에 Git.. 2023. 2. 5. [과제] Test Builder 1. 목표 - TestBuilder의 요구사항에 따른 함수 구현을 할 수 있다 - TestBuilder의 함수를 테스트 할 수 있는 테스트 코드를 작성할 수 있다 2023. 1. 30. [과제] github GraphQL API로 Live Data 받아오기 1. 목표 - github에서 제공하는 GraphQL API를 통해 필요한 데이터를 쿼리로 받아오기 - 현재 내가 로그인 되어 있는지 확인할 수 있는 쿼리 짜기 2. @octokit/graphql 설치 npm install @octokit/graphql - graphQL의 쿼리를 로컬 환경에서 쉽게 수행할 수 있게 도와주는 라이브러리 - 사용시 graphql를 import 해오기 - https://github.com/octokit/graphql.js/ 에서 사용법 확인하기! 3. GitHub GraphQL API - GitHub GraphQL API에서 미리 쿼리를 작성해 보고 사용법에 대입시키면 과제 풀이가 용이해 진다 4. GitHub API에 접근하기 위해 Token 발급 받기 - Usage의 하위.. 2023. 1. 30. [과제] React Hooks 적용하기 React Hooks 적용하기 1. 파일 구조 . ├── data │ └── data.json ├── public │ └── index.html ├── src │ ├── blogComponent │ ├── BlogDetail.js │ ├── BlogList.js │ └── CreatBlog.js │ ├── component │ ├── Footer.js │ ├── Input.js │ ├── Loading.js │ ├── Navbar.js │ ├── NotFound.js │ └── Select.js │ └── util │ ├── useFetch.js │ ├── useInput.js │ └── useScrollToTop.js │ ├── App.js │ ├── App.css │ ├── Home.js │ ├── .. 2023. 1. 26. 이전 1 2 3 4 ··· 6 다음
