본문 바로가기

개발공부73

[REDUX] REDUX(리덕스)에 대해 알아보기 feat. 데이터 fetch 본 내용은 생활코딩 리덕스편과 유튜버 데브리님의 ( 리액트 리덕스(Redux)실습강좌 ( 프로젝트에 넣기...)) 강의 내용에 기반하여 작성되었습니다. 💥 리덕스란 무엇인가? JavaScript 애플리케이션 상태를 관리하기 위한 예측 가능한 상태 컨테이너 패턴의 라이브러리 애플리케이션의 상태를 단일 저장소에 저장하고, 상태에 대한 모든 변경은 불변성을 유지하며 액션을 통해 수행 React와 함께 많이 사용되며, Angular, Vue.js, jQuery 등의 프레임워크와도 함께 사용 ❗ 리덕스의 다운로드 // npm npm install redux // yarn yarn add redux ❗ 리덕스의 주요 요소 store(저장소): Redux의 상태가 담기는 중앙 저장소 애플리케이션의 전역 상태가 여기에.. 2023. 7. 24.
[TIL] 23.07.20 Today I Learned / context API, redux 요약: context API, redux 일시: 23.07.20 장소: 더휴먼컴퓨터아트아카데미 배운 점: context API 리액트 애플리케이션에서 전역 상태를 관리하기 위한 기능을 제공하는 리액트의 내장된 기능 Context API를 사용하면 컴포넌트 간에 props를 통해 데이터를 계속해서 전달하지 않고도 상태를 관리할 수 있음. 어플리케이션의 전역 상태가 여러 컴포넌트에서 필요하거나, 깊은 컴포넌트 트리에서 데이터를 전달해야 할 때 유용 Context API의 핵심 개념 React.createContext() Context를 생성하는 함수 이 함수를 사용하여 새로운 Context 객체를 생성 Context.Provider Context로부터 데이터를 제공하는 컴포넌트 이 컴포넌트로 감싸진 하위 컴.. 2023. 7. 21.
[TIL] 23.07.18 Today I Learned - react-router-dom 요약: react router dom 일시: 23.07.18 장소: 더휴먼컴퓨터아트아카데미 배운 점: react-router-dom react-router-dom은 React 애플리케이션에서 사용되는 라우팅 라이브러리이다. 라우팅은 다중 페이지나 다중 뷰를 가진 애플리케이션에서 사용자의 요청에 따라 올바른 컴포넌트를 렌더링하는 것을 의미한다. react-router-dom은 이러한 라우팅 기능을 React 애플리케이션에 쉽게 구현할 수 있도록 도와준다. 주요한 컴포넌트와 기능 : React 애플리케이션에서 브라우저 기반의 라우팅을 설정하기 위한 컴포넌트 주소 표시줄의 변화에 따라 적절한 컴포넌트를 렌더링 : 특정 URL 경로와 매칭되는 컴포넌트를 렌더링하는 역할 path prop으로 경로를 지정하고, c.. 2023. 7. 18.
[TIL] 23.07.17 Today I Learned 요약: react 기초 문법 일시: 23.07.17 장소: 더휴먼컴퓨터아트아카데미 배운 점: reduce() Array.prototype.reduce(callback[, initiaValue) callback 함수의 4가지 인자 accumulator: 누산기(callback 함수의 누적된 결과값) currentValue: 현재 값(cur) currentIndex: 현재 인덱스(idx)(Optional) array: 원본 배열(src)(Optional) initialvalue callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용함. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생 reduce() 예시 - 1부터 10까지 더하기 c.. 2023. 7. 18.
[TIL] 23.07.16 Today I Learned 요약: 미니프로젝트(파이어베이스를 이용한 WhoHowMuch) ver.1 일시: 23.07.16 장소: 집 배운 점: 시상대 UI 만들기 Who How Much {rank[1]} 🥈2등 {rank[0]} 🥇1등 {rank[2]} 🥉3등 {showUsers} @font-face { font-family: "Ramche"; src: url("../assets/font/Ramche.ttf"); } *{ margin: 0; padding: 0; } .App { width: 1200px; height: 1500px; margin: 0 auto; font-family: "Ramche"; font-weight: 400; font-size: 1.5rem; background: rgba(128, 0, 128, 0.3) .. 2023. 7. 18.
[TIL] 23.07.14 Today I Learned 요약: 리액트 훅(useState, useReducer, useEffect, useMemo) 일시: 23.07.14 09:30 ~ 18:20 장소: 더휴먼컴퓨터아트아카데미 배운 점: useState // useState를 사용하기 위한 import import React, { useState } from 'react'; function Counter() { // 구조 분해 할당을 통해 useState 호출 // 첫 번째 원소는 현재 상태 // 두 번째 원소는 상태를 업데이트하는 함수 const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNu.. 2023. 7. 15.
[TIL] 23.07.13 Today I Learned 요약: 리액트 일정관리 앱 실습, 패스트컴퍼스 강의 일시: 23.07.13 09:30 ~ 18:20 장소: 더휴먼컴퓨터아트아카데미 배운 점: HTML 데이터 속성 사용하기 - 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성 - "data-"로 시작하여 사용자가 직접 작명 가능 - 특정한 데이터를 DOM 요소에 저장해두기 위한 목적. - getAttribute로 속성값을 불러올 수 있음 - 하나의 HTML 요소에 여러 데이터 속성을 동시에 사용할 수 있다. CSS backdrop-filter - 요소 뒤에 흐릿하게 흐림 효과 주거나, 다양한 색상 필터링 효과 줄 때 사용. mask // mask클래스가 추가로 붙었을 때 모션 처리 &:nth-of-type(1)... 2023. 7. 14.
[TIL] 23.07.12 Today I Learned 요약: 리액트 & 자바스크립트 문법(대괄호 표기법, concat, map, filter, ref, clientHeight, scrollHeight), 패스트캠퍼스 뮤직 플레이어 UI 실습 일시: 23.07.12 09:30 ~ 18:20 + a 장소: 더휴먼컴퓨터아트아카데미 배운 점: ✔ 대괄호 표기법, 구조분해할당 // 파라미터로 이전 요소를 받아와서 -> prevState // 구조분해할당을 통해 이전 배열을 가져와서 -> ...prevState // e.target.name에 맞는 key 값의 value를 변경 const handleChange = (e) => { setInputs((prevState) => ({ ...prevState, [e.target.name]: e.target.value, }).. 2023. 7. 12.
[Develop] 23.07.11 개발 공부 일지 요약: 리액트 기초 문법, 패스트캠퍼스 인터렉티브 UI 실습 일시: 23.07.11 09:30~18:20 장소: 더휴먼컴퓨터아트아카데미 배운 점: node 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - 안정성과 신뢰도가 높은 버전을 다운로드 받는 것을 더 추천함. create-react-app 설치 - 리액트 개발을 더욱 쉽게 해주는 템플릿이라고 이해하면 쉽다. npx create-react-app my-app cd my-app npm start ES7 React/Redux/GraphQL/React Native snippets rce : c.. 2023. 7. 12.

티스토리툴바