🧩 알고리즘 문제 해결 📘리액트 공부 + 도커 공부🐳 AWS EC2 Ubuntu20.04 서버에서 도커 컨테이너를 활용하여 react-app 실행 : 개발환경 설정 Dockerfile.dev FROM node:alpine WORKDIR /usr/src/app COPY package.json ./ RUN npm install COPY ./ ./ CMD ["npm", "run", "start"] docker-compose.yml version: "3" services: react: build: context: ./ dockerfile: Dockerfile.dev ports: - "3000:3000" volumes: - /usr/src/app/node_modules - ./:/usr/src/app stdin_..

알고리즘 문제 해결 - 스택/큐 리액트 공부

2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..

2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..

1.0 Introduction to useState리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다.import React, { useState } from "react";const [item, setItem] = useState(1)item: 변경할 statesetItem: item의 modifier Hooks vs Class componentimport React, { useState } from "react";// Hooks로 구현한 경우function App() { const [item, setItem] = useState(1); const incrementItem = () =..

알고리즘 문제 풀기 soso-cod3v.tistory.com/43 soso-cod3v.tistory.com/44 리액트 hooks 공부 soso-cod3v.tistory.com/46