JiYoung Dev 🖥

🎈 영화 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..

🎈 FrontController를 사용하는 이유 📖 FrontController 사용하기 전 JoinController, LoginControll를 모두 servlet으로 작성 servlet은 Httpservlet 객체를 받기 때문에 일반 class보다 무거움 → servlet이 많아지면 프로젝트 자체가 무거워짐 따라서 FrontController라는 하나의 컨트롤러(servlet)를 만들고, 그 안에서 각각의 기능에 대한 클래스를 만들어 처리하도록 만듦! 🎈 FrontController 사용하기 📖 사용자 요청 구분 방법 FrontController를 사용하면 mapping값이 하나 > mapping값만 보면 로그인 기능을 하는지, 회원가입 기능을 하는 지등의 어떤 처리를 하는지 구분할 수 없음 사용자..