본문 바로가기
728x90

react

블록체인_9기/과제 2023. 7. 19. 51강_220718_React(useContext, useMemo 활용_TODOLIST 제작) 과제내용 TODO LIST 컴포넌트 부모 컴포넌트 내용 컴포넌트 전역으로 내용관리 작성 컴포넌트(팝업) 가능 게시판 제목과, 사용자 이름은 변경이 가능하다. 제목과 이름 변경 시, 리스트는 리렌더링 되지 않는다. 리스트가 렌더링 되는 경우는 리스트의 내용이 추가되었을 때만이다. 신규 작성 시, 작성 버튼으로 팝업이 열려서 작성 컴포넌트에서 수행한다. 결과물 💻 App.js_useContext를 사용할 수 있도록 Provider를 설정한다. createContext를 실행하는 Global객체를 선언하여, Provider로 state객체를 초기값으로 설정한다. 루트 컴포넌트인 App 컴포넌트 상위에 Global.Provider를 감싸 context를 사용할 수 있도록 설정하였다. import { create..
블록체인_9기/🩵 React 2023. 7. 18. 51강_230718_React(React Hook함수 - useContext, useReducer, useCallback, useMemo) 목차 051 1. useContext 2. useReducer 3. useCallback 4. useMemo useContext react에서 제공해주는 내장 hook 함수이다. 전역 상태 관리를 도와주는 함수이다. Context? Context 사용 시, 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적으로는 데이터를 props에 담아 부모에서 자식으로 전달되지만, context를 사용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게된다. 👩‍🏫 Context를 사용하기 위해 알아두어야 할 개념! createContext(initialValue) context 객체를 생성한다. Provider와 Consumer를 반환한다. 파라미터 in..
230711~230714_Toy project_React를 이용한 게시판 페이지 제작
프로젝트/개인 프로젝트 2023. 7. 16. 230711~230714_Toy project_React를 이용한 게시판 페이지 제작 개요 React 작업을 진행하면서 컴포넌트를 얼마나 더 세부적으로 쪼갤 수 있는지, 얼마나 재사용성을 높여서 작업할 수 있는지를 중점으로 작업을 진행하고자 했고, 아직 리엑트에서 axios를 설정하는 것이 어려워서 서버단이랑 연결하는 방법에 대해서도 터득하고자 하였다. 과제의 요구사항은 다음과 같다. 게시판 페이지 제작 글 추가, 삭제, 수정을 할 수 있다. express를 사용해서 서버를 구축하고 게시판 CRUD 설정 로그인을 JSONWEBTOKEN을 사용해서 로그인 인증 진행 빌드 완료 이 요구사항들을 충족하되 가장 중요한 것은 아래의 내용이다. " 내가 어디까지 알고 있는지, 어디까지 할 수 있는지 역량 체크를 위한 프로젝트이다. " 기획과정 제작을 하기 앞서 먼저 구성을 해야했던 것은 컴포넌트 구..
블록체인_9기/🩵 React 2023. 7. 14. 50강_230711_React(styled-components, redux-thunk, weather API로 페이지 생성) 목차 050 1. Styled-components 2. redux-thunk 3. weather API를 이용한 간단한 사이트 제작 Styled-components 대표적인 CSS-in-JS 라이브러리이다. 클래스 명을 겹치지 않도록한다. 스타일에 관련되어서 props로 값을 전달해서 스타일 값을 적용시킬 수 있다. 💡 CSS-in-JS 스타일 정의를 CSS 파일이 아닌, JS로 작성된 컴포넌트에 바로 삽입되는 스타일 기법이다. 기존에 웹 사이트를 개발했을 때는 HTML, JS, CSS를 각자 별도의 파일에서 작업하는 것을 권장하였지만, react, Vue 등의 모던 자바스크립트 라이브러리가 인기를 끌면서 패러다임의 변화가 찾아왔다. 설치 npm i styled-components 기본문법 import ..
49강_220710_React(Redux 활용_간단한 주문페이지 제작)
블록체인_9기/과제 2023. 7. 10. 49강_220710_React(Redux 활용_간단한 주문페이지 제작) 과제내용 음식주문 페이지 ... 하지만 음식이 아닌 차를 넣어보았다...ㅎ 메인페이지 👉 로그인 페이지 👉 음식주문 페이지 👉 마이페이지 로그인을 해야 '음식주문 페이지'와 '마이페이지'로 넘어갈 수 있다. 주문한 음식들을 마이페이지에서 확인할 수 있다. react-router / react-redux 사용한다. props 사용하지 않기! 결과물 #. 폴더의 경로는 다음과 같다 1. redux/reducer/index.js_store로 설정할 객체를 선언하고, 스토어 상태를 변경하는 함수 reducer를 선언한다. my 객체에 store값으로 사용될 값을 선언한다. reduccer 함수에 전달받은 action 값에 따라 상태를 업데이트한다. 지금은 선택하는 값 밖에 안들어갔지만 추후에 익숙해지면 토글되는..
49강_230710_React(Redux)
블록체인_9기/🩵 React 2023. 7. 10. 49강_230710_React(Redux) 목차 049 1. Redux 2. Redux DevTools 3. Redux를 사용한 간단한 예시 Redux Redux는 리액트에서 사용할 수 있는 JS 상태관리 라이브러리이다. React는 자식 컴포넌트에 props로 전달받은 값을 사용하기 때문에, 자식관계가 아닌 컴포넌트와는 데이터를 직접 공유하는 것이 불가능하다. 따라서, 공유해야할 데이터를 공유받는 자식 컴포넌트들이 사용할 때 공통적인 부모라는 개념인 store를 만드는 것이다. store로 데이터를 공유할 수 있도록 만들어 준 것이다. 리엑트의 데이터 흐름은 단방향이라 이런 단점을 보완하기 위해 만들어졌다. 데이터를 직접 부모에게 전달받는 것이 아닌, 컴포넌트에 직접 값을 요청하고 전달받는 것을 말한다. Action, Dispatch, Stor..
개발일지/React 2023. 7. 9. [React] Axios와 Fetch. 사용해야 할 라이브러리는? Axios Axios는 node.js와 브라우저를 위한 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 가능하게 해주며, return을 promise 객체(json형식)으로 해주기 때문에 res데이터를 다루기 쉽다. axios가 제공하는 추가기능 브라우저와 node환경에서 사용이 가능 : 서버 측과 클라이언트 측에서 동일한 코드를 사용하여 HTTP 요청을 처리할 수 있다는 것을 의미한다. 요청과 응답 인터셉트 : 요청과 응답을 인터셉트하여 변형하거나 추가적인 로직을 수행할 수 있는 기능을 제공한다. 오류처리 : HTTP 상태 코드에 기반하여 자동으로 오류를 처리하는 기능을 제공한다. 요청취소 : 중단된 요청에 대한 리소스 낭비를 줄이고 응답이 필요 없는 경우에 요청을 취소할 수 있다. 데이터변환 ..
48강_220706_React(TODO LIST 제작)
블록체인_9기/과제 2023. 7. 7. 48강_220706_React(TODO LIST 제작) 과제내용 TODO LIST 제작 노출되어야 할 내용 순번 내용 할일 처리 체크 리스트를 작성할 수 있다. 자유작업 상세페이지 자유 작업은 진행하지 않고, 필수 작업만을 진행하였다. 결과물 #. 폴더의 경로는 다음과 같다. 1. main.jsx_전체를 그리는 컴포넌트 Main을 정의한다. import React from "react"; import { Header, Input } from "../components"; const Main = () => { // Todo 내용을 입력받아 값을 보내준다. // input의 기능을 함 // 내용을 리스트로 보내준다. return ( ); }; export default Main; 2. Input.jxs_내용을 입력받는 input을 그려주고, 입력받은 내용을 그리..
48강_230706_React(Hook 함수(useNavigate, useLocation, useParams, useSearchParams), 상점 사이트 제작 )
블록체인_9기/🩵 React 2023. 7. 6. 48강_230706_React(Hook 함수(useNavigate, useLocation, useParams, useSearchParams), 상점 사이트 제작 ) 목차 048 1. Hook 함수 2. 상점 사이트 제작 Hook 함수 💛 useNavigate 페이지를 이동할 때 사용된다. 특정이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 사용한다. 💛 useLocation 현재 브라우저의 URL 위치 값을 가져오는데 사용한다. 예) http://localhost:5500/main/2/33/test => /main/2/33/test 의 값을 가져온다. 그 외에도 search, hash 등의 값을 가져온다. 💛 useParams URL에 params 값을 접근하는데 사용한다. params 값을 객체 형태로 가져올 수 있다. 예) {id: '2', num: '33', name: 'test '} 💛 useSearchParams URL의 query 값을..
728x90

티스토리툴바