3-1기 스터디/Front-End 토이 프로젝트10 [8주차] 외부 API 연동 news viewer 제작 GDSC FE-Toy Project Study Plan 'React를 다루는 기술' Ch13, 14 공부 및 실습 진행 [Week 8] 1/6 발표자 Ch13. 리액트 라우터로 SPA 개발하기 - 하수민 Ch14. 외부 API를 연동하여 뉴스 뷰어 만들기 - 김중현 Ch14 외부 API 연동 news viewer 제작하기 newsapi에서 제공하는 API를 이용해 최신 뉴스를 불러온 후 보여주는 프로젝트 newsapi API 키 발급받기 newsapi에서 API 키 발급 받기 → https://newsapi.org/register 가입 후 발급 받기 발급 받은 API 키는 추후 API 요청 시 API 주소의 쿼리 파라미터로 넣어 사용 사용할 API (한국 뉴스를 가져오는 API) : https://new.. 2022. 1. 30. [10주차] 리덕스 미들웨어를 통한 비동기 작업 관리 GDSC FE-Toy Project Study Plan 'React를 다루는 기술' Ch17, 18 공부 및 실습 진행 [Week 10] 1/27 발표자 Ch17. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 - 하수민 Ch18. 리덕스 미들웨어를 통한 비동기 작업 관리 - 장효신 Ch18. 리덕스 미들웨어를 통한 비동기 작업 관리 1) 미들웨어란? 리덕스 미들웨어란? 리덕스에서 액션을 디스패치했을 때, 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행함 미들웨어는 액션과 리듀서 사이의 중간자 👉 액션을 디스패치하고나서 어떤 작업들을 연쇄적으로 실행해야 할 때 사용할 수 있음 미들웨어가 할 수 있는 일 API 요청에 대한 상태를 관리 예를 들어 요청이 시작됐을 때는 로딩 중임을, 요청이.. 2022. 1. 30. [9주차] Context API, 리덕스 라이브러리 이해하기 GDSC FE-Toy Project Study Plan 'React를 다루는 기술' Ch15, 16 공부 및 실습 진행 [Week 9] 1/13 발표자 Ch15. Context API - 장아연 Ch16. 리덕스 라이브러리 이해하기 - 장효신 ✔ 전역 상태 관리 흐름 이해 여러 컴포넌트를 거쳐 props 사용 시 기존의 top->bottom 흐름으로 많은 컴포넌트 거치거나 데이터가 많아지는 경우 유지 보수성 낮아짐 Context 만들어 한번에 원하는 값 받아옴 ✔ Context API 사용법 1. 새로운 Context 생성 createContext 함수를 사용해 Context 생성 파라미터로 해당 Context 기본 상태 지정 import {createContext} from "react"; const .. 2022. 1. 30. [7주차] immer를 사용해 쉽게 불변성 유지하기 GDSC FE-Toy Project Study Plan 'React를 다루는 기술' Ch11, 12 공부 및 실습 진행 [Week 7] 12/23 발표자 Ch11. 컴포넌트 성능 최적화 - 장효신 Ch12. immer를 사용하여 더 쉽게 불변성 유지하기 - 김중현 Ch12_immer를 사용해 쉽게 불변성 유지하기 immer를 사용하는 이유 불변성을 유지하기 위해, 전개 연산자와 배열 내장 함수를 사용해 배열이나 객체를 복사하고 새로운 값을 덮어쓸 수 있다. 그러나 객체의 구조가 커지고 깊어지면, 불변성을 유지하면서 값을 업데이트하기 매우 힘들어진다. 기존의 다른 값들은 유지하면서 값 하나를 업데이트하기 위해 여러 줄의 코드를 작성해야 하는 경우가 생긴다. → immer 라이브러리를 이용하면 구조가 복잡한.. 2022. 1. 7. [6주차] 컴포넌트 반복, 라이프사이클 메서드, 함수형 컴포넌트 GDSC FE-Toy Project Study Plan • 2차 프로젝트 진행 상황 공유 • React 책 기반 개념 공부 진행 Week 6) ~11/25 • 발표자 컴포넌트 반복, 라이프사이클 메서드: 장효신 함수형 컴포넌트: 하수민 6장 컴포넌트 반복 6.1 자바스크립트 배열의 map() 함수 arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성하는 함수, 파라미터는 다음 3가지가 있음 - currentValue: 현재 처리하고 있는 요소 - index: 현재 처리하고 있는 요소의 index값 - array: 현재 처리하고 있는 원본 배열 thisArg(선택): 콜백함수 내부에서 사용할 this 레퍼런스 데이터 배열을 컴포넌트 배열로 map하기 src/com.. 2021. 12. 22. [5주차] 이벤트 핸들링, ref: DOM에 이름 달기 GDSC FE-Toy Project Study Plan • 2차 프로젝트 주제 선정 완료 • React 책 기반 개념 공부 진행 Week 5) ~11/18 • 발표자 이벤트 핸들링: 김채림 ref: DOM에 이름 달기: 김중현 📖 이벤트 핸들링 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 4.1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하다. 4.1.1. 이벤트를 사용할 때 주의사항 이벤트 이름은 카멜 표기법으로 작성. -ex) onclick -> onClick, onkeyup ->onKeyUp 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달. -화살표 함수 문법을 사용하거나.. 2021. 11. 25. 이전 1 2 다음
