아리의 개발 일상

리액트 Global State 여러 컴포넌트 간에 상속 없이도 자기가 원하는 컴포넌트에만 공유할수 있는 것을 말한다. 데이터를 공유할 컴포넌트 context 를 만든다. import { createContext,useState } from "react"; export const AdminFlagContext = createContext({}); //사용법 export const AdminFlagProviders =(props) => { const {children}=props //플래그 만들기 const [isAdmin,setIsAdmin] =useState(false); //AdminFlagContext 안에 provider 이 있으으로 감싸면 된다 return ( {children} ) } index..

React 메모이제이션 App이라는 컴포넌트가 있으면 아래 child1,2,3,4, 의 하위 컴포넌트가 존재 한다 App컴포넌트가 랜더링 되면 아래의 하위 컴포넌트도 모두다 랜더링 되게에 메모리를 많이 소비하게 된다 이러한 문제점을 해결하기 위해 memo,useCallback,useMemo를 사용하여 상위 컴포넌트가 랜더링 되어도 랜더링 하게 하는걸 막을수 있다 폴더 구조 App코드 import { Child1 } from './components/Child1.jsx'; import { Child4 } from './components/Child4.jsx'; export const App = memo(() => { console.log("APP 랜더링") const [num, setNum] = useSt..

1. 외부css 파일 사용하기 2. css 모듈 사용하기 // Button.module.css .button { background-color: blue; color: white; } // Button.js import React from 'react'; import styles from './Button.module.css'; const Button = () => { return Click me; } export default Button; 파일 이름을 ~~~.modul.css로 지정하여 css 모듈을 만들수 있다 node-sass 를 이용하면 scss파일로 만들어서 위와 같은 방식으로 외부모듈로 사용할수 있다 설치할때 터미널에 npm install node-sass 를 입력하면 설치가능하다 scss ..

리액트 2일(속성 이용법,외부 컴포넌트 사용,useState,상속 ) 노드 js 환경에서 리액트 사용 index js 파일에 아래하고는 조금 다르지만 App이라는 파일을 import해서 불러오는 형식의 파일이 있을거다 import React from "react"; import ReactDOM from "react-dom"; import {App} from "./App.jsx" //이파일을 사용 ReactDOM.render(, document.getElementById("root")); import {ColorMassage} from "./components/ColorMassage.jsx"; import { useEffect, useState } from "react"; export const App =..

리액트 공부1일차 리앤트 기본적인 사용법 컴포넌트를 만들어 컨테이너에 집어넣어서 사용할수 있다 클래스 이용방법 componentDidMount는 컴포넌트가 화면에 나타낼때에 실행되는 메소드로 현재 위 코드는 1초마다 componentDidMount 안의 내용이 실행되어서 현재 시간을 나타내는 코드이다 이벤트 연결하는방법 class App extends React.Component { constructor(props) { super(props) this.state = { count : 0 } this.countup = this.countup.bind(this) //bind는 이벤트 연결해주는 메소드 } render() { return {this.state.count} 클릭 } countup (event) ..

Welcome I'M A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu risus accumsan, volutpat diam eget, rhoncus ipsum. Phasellus in molestie felis, finibus venenatis mauris. DownLoad 이 부분에 대한 js 코드는 (function (){ const spanel = document.querySelector("main h2 span"); const txtArr=["web publisher","front-end developer","web ui desginer"] let index=0 let currentTxt = txtArr[index].split..

(2024 03 12) js 19일차 클래스 =>객체를 생성하기 위한 설계도로 클래스 안에는 필드(속성)와 메서드로 구성되어 있다 추상화 =>핵심적인 기능 또는 데이터만 간추려 내어 표현하는 과정을 의미한다 =>객체의 공통적인 특성을 축출하여 추상클래스로 정의 하여 상의 클래스로 만든다. 예를 들어 자동차를 추상해 보면 자동차 종류는 여러가지 있어도 기본적으로 장도차에는 가속,멈춤,회전등 공통적인 기능들이 존재한다 이런 공통적인 기능들을 모아서 하나의 클래스로 만드는것을 추상화라 한다. //사각형 클래스 class Rectangle{ //생성자 #width #height constructor (width,height) { if (width constructor (width,height) 이부분을 호출하는..

(2024 03 11)JS 18일차 localStorage => 데이터를 저장하는 객체 localStorage.getItem(키) = 데이터 가져오기 localStorage.setItem(키,값) =값 저장 .removeitem(키) = 값제거 localStorage.clear() => 모든 데이터 삭제하기 처음실행할때 내부에 입력하고 새로고침 눌렀을때 예외처리 try { // 예외가 발생할 수 있는 코드 wuu.bye() } catch (exception) { console.log('예외처리') } finally { // 항상 실행되는 코드 (선택적) console.log("finally") } 객체를 생성하고 이용하는 방법 //객체 생성 const students=[] students.push({이름..

(2024 03 07-08)16-17일차 js 객체란? 변수화 함수들의 집합으로 js에서의객체는 {}로 생성하면 다음 과 같은 형태의 자료를 쉼표로 연결해서 입력 const product = { 제품명:"망고", 유형:"당절임", 성분:"망고,설탕,항색소", eat:function(food) {} } 호출 product["제품명"] product.제품명 속성 속성은 객체안의 자료형 메소드는 객체의 속성중 함수 자료형인 속성 =>eat이 메소드라고 한다 객체 속성 추가 const student = {} student.이름="윤인성" student.취미="악기" console.log(JSON.stringify(student,null,2)) // 이건 출력형식 속성 제거 delete student.취미 화살표..

(2024 03 07) js 15일차 콜백함수 매개변수로 전달하는 함수를 콜백함수라 한다 function callThreeTime(callback) { for(let i=0; i { } let number = [0,1,2,3,4,5,6,7,8,9,10] end=number .filter((value) => value%2===0) console.log(end) 위와 같이 짝수만 출력된다 time함수 setTimeout(함수,시간) 특정 시가훈 하수 한번호출 setinterval(함수,시간) 특정 시간 마다 함수를 호출 clearTimeout(타이머_id): 지정된 타이머를 취소합니다. 이 함수를 사용하면 setTimeout() 함수로 설정된 지연 실행이 취소됩니다. clearInterval(타이머_id):..