JiYoung Dev 🖥

Spring Boot와 연동하여 shop 만들기 [Spring Boot] Spring Boot 사용하기 (2023.06.07) Spring Boot 개발 환경 준비 🎈 프로그램 설치 (Spring & MySQL) spring tool suite 4 Spring | Tools spring.io C드라이브 바로 아래에 설치 (필수는 아님!) jar파일도 압축파일이라 압축풀기하면 됨 그런데 안되는 경 danyoujeong.tistory.com CORS 오류 (Cross Origin Resource Sysytem) 교차 출처 리소스 공유 proxy 서버(미들웨어)로 해결을 하자 setupProxy.js 검색 프록시 서버란 클라이언트와 서버 사이에서 데이터 요청과 응답을 대신 받아주는 역할을 해줌 보안상의 문제로..

react 템플릿 사용하는 법 git Clone 후 node 설치까지 해줘야함! Boot Strap 은 react BootStrap 사용 https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app react UI 툴 https://mui.com/store/ React themes & templates - MUI Store A collection of the best React templates, React dashboard, and React themes. It includes templa..

React에서 카카오지도 API 사용하기 🎈 OPEN API 사용하는 방법 🎈 key 발급받기 1. 로그인 후 애플리케이션 추가 React는 JavaScript 기반이므로 JavaScript 코드 사용할 예정 2. web 플랫폼 등록하기 만약 jsp/servlet에서도 사용할거라면 해당 주소도 추가(ex. 8080)해야 사용할 수 있다! 3. react-kako-maps-sdk 로 리액트에서 kakao map 사용하기 typeScript 자료형 지정해주는 script >> 최근 뜨는 중 3.1. index.html head태그에 api 입력 3.2. react-kakao-maps-sdk 설치 3.3. App.js 작성 MapMarker, Map > import 해줘야 함! import "./App.css..

Session/Local Storage에 데이터 저장하기 /** * Local Storage vs Session Storage * - 주의사항! 둘 다 브라우저에 저장을 하는 데이터 * - local Storage : 동일한 PC + 동일한 브라우저일 경우, 저장된 데이터를 불러 올 수 있음 * ex. 자동 로그인, 장바구니, ... * => 브라우저를 닫더라도 데이터가 계속해서 저장되어있다. * - session Storage : 브라우저 창이 종료되면 세션도 함께 종료되면서 데이터 소멸됨 * ex. 로그인 기록 */ 백엔드, 프론트 어디서 관리할 것인지는 자유 순서의 차이일뿐! 1. Local Storage 자동 로그인, 장바구니와 같이 보안이 딱히 필요하지 않을 때 사용 1.1. 저장하기 local..

🎈 영화 API 불러오기 - fetch, Axios 사용 import React, { useEffect, useState } from "react"; import axios from "axios"; import "./App.css"; const Ex04 = () => { let movieUrl = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230501"; /** * 화면에 영화 랭킹을 띄어주자! * * jQuery + Ajax >>>>> 논외! (사용추천X 속도 느림) * Fecth API (New!) *..

🎈 참참참 게임 만들기 📖 게임규칙 1. 나는 공격, 컴퓨터는 수비 담당 2. 내가 버튼을 클릭했을 때 나와 컴퓨터의 선택이 같다면 나(공격)의 승리 3. 나와 컴퓨터의 선택이 다르다면 컴퓨터(수비)의 승리 📖 작성코드 import React, { useState, useEffect } from "react"; const Ex03 = () => { /** * 참참참 게임을 만들어보자! * 게임 규칙 * 1. 나는 공격, 컴퓨터는 수비를 담당 * 2. 내가 버튼을 클릭했을 때 나와 컴퓨터의 선택이 같다면 나(공격)의 승리 * 3. 나와 컴퓨터의 선택이 다르다면 컴퓨터(수비)의 승리 * * 문제풀이 * 1. 필요한 state들을 관리 : 내선택, 컴퓨터선택, 게임결과 * >> useState * 2. 내 선..

LifeCycle 현재 react는 node.js 서버 위에서 돌아가고 있음. node.js는 싱글스레드로 작업을 진행하는 프로세스가 하나 밖에 없음. 그렇기 때문에 위에서 아래로 코드가 작성된 순서대로 진행되는 java와는 달리 코드 중간에 조건문과 같은 무거운 작업이 있으면 위에서 아래로 코드 작성 순서대로 작업을 진행하지 않고, 가벼운 작업부터 진행 후 무거운 작업을 진행시킴. 따라서 React에서는 위에서 아래로 순서대로 코드를 작성한다고 해서 원하는 대로 작업이 실행되지 않음. Reactsms 컴포넌트가 실행되거나, 업데이트 되거나, 삭제될 때 특정 이벤트가 발생함. 이러한 React의 특성을 생명주기(LifeCycle)이라고 하며, React를 통해 우리가 원하는 대로 웹페이지가 작동하게 만들..

useRef 🎈 useRef 예제 작게 버튼을 클릭하면 사각형의 크기가 작게, 원본 버튼을 클릭하면 원본 크기로, 크게 버튼을 클릭하면 사각형의 크기가 크게 변하게 만들기 📖 자바스크립트 자바스크립트에서는 이 문제를 풀기위해 사각형 요소에 접근하기 위해서 document에 접근해야 했음 사각형 요소 : 자바스크립트로 id가 box인 요소에 접근하기 : document.getElementById('box").style.width= 100px 📖 리액트에서 변경시키려면? DOM으로 마찬가지로 접근해야함 useRef 사용 usdRef : 특정 DOM 요소에 접근하고 싶을 때 사용 - 바닐라JS에서는 getElementById, querySelector 등을 사용하여 특정 DOM 요소에 접근하였음 - React..

🎈 구성하기 📖 컴포넌트 1. TodoList 2. TodoItem 3. TodoInput 📖 컨텍스트 - TodoContext 전역적으로 사용할 값 1. todos : 내용, 완료여부 (객체로 저장) 2. newTodo : 내용 🎈 코드 작성하기 (순서) 1) 화면에 첫 Todo 보이게 하기 컴포넌트 연결 컨텍스트 연결 컨텍스트로 사용할 값 state로 저장 후 초깃값 지정하여 출력되도록 2) 입력창에 글씨를 입력하면 newTodo에 저장 handleNewTodo() 3) Add 버튼클릭시 Todos에 newTodo 객체 추가, input 텍스트 창 공백으로 addNewTodo() 4) add 버튼 클릭시 추가된 객체 화면에 띄우기 addNewTodo() 5) delete 클릭하면 해당 리스트 삭제 d..

🎈 context API 쓰는 이유 📖 props의 단점 단방향 데이터의 흐름 위와 같은 데이트 흐름을 단방향 데이터 흐름 (one-way reactive data flow)이라하고 react는 이러한 흐름을 가지고 있음 단방향 데이터 흐름의 장점 1. 관리에 용이함 2. DOM과의 궁합 - tree구조의 dom 구조에 유리함 단방향 데이터 흐름의 단점 자식요소에서 부모요소로 데이터를 바로 전달할 수 없음 ⚙️ 부모요소가 자식요소의 값을 받아볼 수 있도록 하는 방법 귀찮다 >> contextAPI를 사용함 🎈 context API 📖 context API 사용하는 이유 props를 사용하면 여러번 사용해야 함 데이터를 따로 보관하여 끌어다 쓰는 법 >> Context API 장점 : 전역적으로 사용할 수..