환경 : Visual Studio Code 로그인을 구현하기 앞서, 세션이 어떻게 변화하는지를 이해하고 있으면 좋다. Monolithic : 단단히 짜여 하나로 되어 있는 개발과 관리가 용이 → 모든 기능들이 하나의 시스템에서 동작하기 때문 시스템이 복잡해지고 커질수록 코드를 이해하기 어려워짐 MSA : MicroService Archtecture 여러 모듈을 조합하여 애플리케이션을 구현하는 방식 독립적이고 확장성을 고려한 설계가 어렵지만 시스템이 커질수록 좋음 (유지보수 쉬움) 리코일을 이용하여 상태 관리를 해보자 Recoil : https://recoiljs.org/ko/docs/introduction/core-concepts 리코일을 사용하고자 하는 곳에 설치해준다. npm install recoi..

환경 : Visual Studio Code, Spring Boot Tool4 반복되는 부분의 코드들을 덜 작성하기 위해(매 파일 마다 설정해주는 것은 귀찮으니까..) axios를 개조하여 사용하려고 한다.. 그러기 위해서 axios 관련한 파일을 모듈화하여 사용해보려고 한다. axios 공식 문서 : https://axios-http.com/kr/docs/req_config - CustomAxios.js //CustomAxios.js //이 파일은 axios를 우리가 원하는 대로 개조하여 //프로그램 전체에서 불러서 사용할 수 있도록 만들기 위한 파일 //[1] 라이브러리가 기본적으로 제공하는 axios를 불러온다 import axios from "axios"; //[2] 필요한 설정을 추가한다 cons..

환경 : Visual Studio Code, Spring Tool Suite4 백엔드 코드 이해 설명 링크 : https://ggingggang05.tistory.com/228 리액트에서 비동기 처리를 위해서 ajax를 사용할 수 있다. 하지만 이는 jquery를 사용했을 경우만 가능하다. 따라서 axios를 활용하여 비동기 통신을 구현할 수 있다. 1) 원하는 프로젝트에 설치한다. npm install axios 비동기를 사용할 js에 비동기 통신 전용 라이브러리를 import 해준다 import axios from "axios"; //비동기 통신 전용 라이브러리 (참고) 이후 비동기 통신 진행시 콘솔에서 확인 가능 2) index.js 파일에 태그를 제거해준다 가 있으면 리액트가 화면을 두 번씩 실행..

환경 : Visual Studio Code 링크 : https://react-icons.github.io/react-icons/ - 아이콘 사용을 원하는 프로젝트에 아래 의존성을 추가 npm install react-icons - 적용 결과 아이콘을 사용하기 위해 import 구문을 사용해야한다. 따라서 간단히 import 구문에 대해 이해해보자! import { a, b } from "c" c에서 a랑 b라는 항목만 불러오겠다 c에는 a랑 b 말고 다른 것도 잇음 naming import [예시] import {useState, useCallback, useEffect} from "react"; - useState() - useCallback() - useEffect() import d from "e"..

환경 : Visual Studio Code - Ex04.js import { useCallback, useState } from "react"; import Jumbotron from "./Jumbotron"; function Ex04() { //state const [nations, setNations] = useState([ {no:1, name:"한국", capital:"서울"}, {no:2, name:"미국", capital:"워싱턴"}, {no:3, name:"일본", capital:"도쿄"}, {no:4, name:"중국", capital:"베이징"}, {no:5, name:"영국", capital:"런던"}, {no:6, name:"프랑스", capital:"파리"}, {no:7, name:..

환경 : Visual Studio Code - Ex03.js import { useState } from "react"; import Jumbotron from "./Jumbotron"; function Ex03(){ const [items, setItems] = useState( [ {itemNo:1, itemName:"참이슬", itemPrice:1200}, {itemNo:2, itemName:"처음처럼", itemPrice:1500}, {itemNo:3, itemName:"새로", itemPrice:1700}, {itemNo:4, itemName:"좋은데이", itemPrice:1000}, {itemNo:5, itemName:"청하", itemPrice:2200} ] ); //전체 삭제란 비어있는 ..