Code-Jaram blog

React_13_축구선수 정보 홈페이지 실습 [환경설정] 라우터, axios 설치 index.js에서 을 BrowserRouter로 감싸고 BrowserRouter import하기 player.json 선수정보 추가하기 대한축구협회 https://www.kfa.or.kr/national/?act=nt_man ※이미지 주소 복사 안 되는 경우 이미지 가져오는 방법 F12(개발자도구)-요소 클릭-url 복사하기 [Player.jsx] import: useEffect, useState, axios, Routes, Route, 컴포넌트 public 폴더 내 json 파일에서 데이터 가져오기 선수데이터를 담을 state 생성하기 json 파일에 접근하여 선수데이터를 state에 저장(useEffect, axios..

React_12_Strorage [홈페이지 실습] *React_10_라우터 홈페이지 실습 이어서 진행 [Storage] 1. Local Storage: 동일한 PC, 동일한 브라우저라면 데이터를 불러올 수 있음 -구현기능: 자동로그인, 로그인이 안 된 채로 장바구니 기능, 7일간 보지 않기, 북마크 등 -브라우저를 종료하더라도 데이터를 계속 저장할 수 있음 -A 브라우저에 저장한 데이터를 B 브라우저에서 불러올 수 없음 -보안에 취약함 2. Session Storage: 브라우저 창이 종료되면 세션이 함께 종료, 데이터 소멸 -구현기능: 일반로그인 *주의사항! local Storage, session Storage는 브라우저에 저장하는 데이터 -DB에 저장되는 데이터가 아니기 때문에 유저별 정보를 저장할..

리액트 11_Kakao API 실습 [카카오 API 설정] https://developers.kakao.com/ 내 애플리케이션-등록한 애플리케이션-웹사이트 주소 수정: localhost 주소로 변경(http://localhost:3000) https://react-kakao-maps-sdk.jaeseokim.dev/ public 폴더-index.html에 script 태그 붙여넣기 내 애플리케이션-등록한 애플리케이션-JavaScript 키를 APP KEY 자리에 붙여넣기 kakao map install: install 코드를 terminal에 붙여넣기 [카카오 지도 기본 실습] Map, MapMarker import -import {Map, MapMarker} from 'react-kakao-maps-..

React_10_라우터 라우터(Router): 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트는 Single Page Application이지만 여러 페이지인 것처럼 페이지를 전환하는기능(SPA의 장점을 유지) 2. 라우터 사용방법 1)react router dom 설치: npm i react-router-dom 2)BrowserRouter [index.js] BrowserRouter import하기 라우팅 기능을 사용할 컴포넌트 전체를 감싸기 →index.js에서 App을 감싸는 방식 사용 3)Routes-Route [App.js] Routes: 여러 경로(Route)들을 감싸서 하위 Route 중 조건에 맞는 Route 하나만 렌더링 해주는 역할 -과거에는 Switch라..

React_09_useEffect 실습 [가위바위보 게임] (1)나의 선택, 컴퓨터의 선택, 결과 state 생성: 가위바위보를 0,1,2 숫자로 설정 (2)나의 선택 설정: 클릭한 버튼값에 따라 0,1,2값을 설정 (3)컴퓨터의 선택 설정: 0,1,2 랜덤 수 설정(난수 생성) (4)게임 결과 판별: useEffect 사용하여 정확한 시점 지정 가위바위보, 결과값 State 생성 2. 클릭한 가위바위보 값을 숫자로 바꿔서 저장하기 3. 가위바위보 승부 판별하는 함수 -승리: 사용자(가위, 바위, 보), 컴퓨터(보, 가위, 주먹) -패배: 사용자(가위, 바위, 보), 컴퓨터(주먹, 보, 가위) 4. 클릭한 가위바위보 이모티콘과 결과값 출력 -이모티콘 출력: 이모티콘 배열[State 값] -가위바위보 버튼..

[클래스형 컴포넌트] 컴포넌트: 리액트로 만들어진 애플리케이션의 UI를 이루는 최소 단위 컴포넌트의 종류 1)함수형 컴포넌트 2)클래스형 컴포넌트 구분 함수형 컴포넌트 클래스형 컴포넌트 State state 사용불가 state 사용가능 Life Cycle Life Cycle 사용불가 Life Cycle 사용가능 3. Life Cycle: 컴포넌트의 생성부터,변화,소멸까지의 전 과정 *클래스형 컴포넌트에서만 사용가능 4. Life Cycle단계별 메소드 *클래스형 컴포넌트 구조 단축키: rcc+Enter [실습]텍스트, 숫자 변경 1)Mount constructor(생성자) -초기 state 값 설정 -화면 렌더링 전 가장 첫 번째 단계 2)ComponentDidMount 3)componentDidUpda..

React_07_Context API 실습 [TodoList 실습]할 일 추가/완료한 일 체크/할 일 삭제 [createContext.Js] [App6.js] State 생성 새로운 할 일 추가하는 함수 새로운 할 일을 기존의 State 배열에 누적하는 함수 완료한 일 체크하는 함수: [ListItem.js] 할 일 삭제하는 함수: [List.js] return문: TodoContext.Provider로 context 값 넣기 -전역적으로 공유할 state, 함수, ref 저장하기 -[AddTodo], [List] 컴포넌트 출력하기 [List.js]리스트의 데이터를 반복하는 컴포넌트 Context 데이터 가져오기: todos State(할 일) [ListItem.js]로 할 일, index 전송 [Lis..

React_07_Context API [ContextAPI] 컴포넌트의 구조: 단방향 데이터 흐름 상위컴포넌트에서 하위컴포넌트로 데이터 전송 장점: 관리 용이,DOM 요소와의 궁합 단점 -하위컴포넌트에서 상위컴포넌트로 데이터전송이 불가 -하위컴포넌트끼리의 데이터전송 불가 2. 양방향 데이터 전송방법 1)상위→하위 컴포넌트: input의 value값으로 데이터 전송 2)하위→상위 컴포넌트: 함수의 매개변수로 데이터 전송 props로 데이터를 전달할 때 발생하는 문제 - 최하단에 위치한 컴포넌트에서 최상위 컴포넌트로 데이터를 전달해야 하는 경우 여러 컴포넌트를 연달아 props 전달해야 함(props drilling) - 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 과정이 불편함 →context라는 ..

React_05_JS 함수 map() 함수 배열함수의 종류 중 하나로 반복되는 컴포넌트를 렌더링하기 위해 사용 주어진 함수를 호출한 결과를 모아서 원하는 규칙에 따라 새로운 배열을 생성(반복문 역할) 사용법: 배열이름.map(콜백함수) *콜백함수: 함수 내에 있는 함수 -문자열 데이터 추출: item -객체 데이터 추출: item.속성명 [map 실습]화씨를 섭씨로 변환하기 *객체의 여러 속성값을 return문에 작성하고 싶은 경우 스프레드 문법 사용 *스프레드 문법: 객체나 배열과 함께 사용하면 변경된 값을 제외한 나머지는 값을 그대로 유지하는 문법→…item, 2. Filter 함수 - 배열의 각 요소에 대해서 주어진 함수의 결과값이 true인 요소들만 모아서 새로운 배열로 반환하는 함수 [Filte..

React_04_주사위 게임(State, useEffect) [실습 4]주사위 게임 [부트스트랩] 리액트 부트스트랩 홈페이지 https://react-bootstrap.netlify.app/ https://mui.com/ 부트스트랩 설치(terminal) 2. 부트스트랩 import *프로젝트 전체에 부트스트랩 적용 3. 부트스트랩 css import 4. 가져오기 [주사위 게임룰] Step1. '던지기' 버튼을 눌렀을 때 주사위의 모양 변경/유저의 선택/컴퓨터의 선택 1-1)유저의 주사위 숫자가 랜덤으로 표시 1-2)컴퓨터의 주사위 숫자도 랜덤으로 표시 1-3)유저의 숫자/컴퓨터의 숫자가 이미지로 표시 Step2. 유저와 컴퓨터의 숫자 결과 비교(useEffect) 2-1)내가 이겼을 경우 나의 점수 ..