본문 바로가기

전체 글144

[React] useEffect 무한 요청 해결 1. 문제 1. 코드 상황 1-1) 서버 쪽 코드 app.get("/list", (req, res) => { const sqlQuery = "SELECT * FROM DEVICES;"; db.query(sqlQuery, (err, result) => { //res.send에 result를 보내지 않으면 안간다 console.log("리스트 보낸당") res.send(result); }); }); 1-2) 프론트 코드 import { Component } from "react"; import Table from "react-bootstrap/Table"; import Axios from "axios"; import { Button } from "react-bootstrap"; import { LineCha.. 2023. 7. 18.
[JS/Node] 기초 지식 0. 기초지식 1) 동기/ 비동기 동기 : 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행 비동기 : 응답 상태와 상관없이 다음 동작을 수행 비동기적으로 처리하는 경우 Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 하는 경우 파일 읽기 : 서버에서 파일을 읽어야 하는 경우 암호화/복호화 : 바로 처리되지 않고, 어느정도 시간이 걸리는 경우 작업 예약 : setTimeout을 사용하여 비동기 처리 하는경우 JS는 동기적 언어이지만 비동기적으로 작동할 수 있게 할 수 있다. 2)비동기 처리 방식 2-1)콜백 지옥 콜백 함수는 함수 안에서 어떤 특정 시점에 호출되는 함수를 말한다. 그림과 같이 콜백 함수를 연속적으로 사용할 때 가독성이 매우 떨어진다. 2-2)Promise const .. 2023. 7. 17.
[React] Hook, Function Component vs Class Component 1 . Hook 이란? 1) 한마디로 하자면 리액트의 훅은 16.8 버전부터 추가된 새로운 기능, 함수형 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수 기존 클래스의 생명주기 메서드를 함수형 방식에서 함수로 사용할 수 있도록 한것이 훅인 것과 같다. 상태 값을 초기화 하거나, 변경이 발생했을 때 등의 상황에서 리액트의 훅함수가 호출되는 방식인듯 하다. 2)리액트 훅의 규칙 반복문, 조건문, 중첩된 함수 내에서 호출하면 안됨 이 규칙을 지키면 컴포넌트가 렌더링 될 때 마다 동일한 순서로 훅이 호출되는 것을 보장 일반적인 javascript함수 내에서 호출하면 안됨 이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 .. 2023. 7. 17.
[FE] 스크롤(overflow) 0. 참고자료 1)overflow 관련 정리 : https://truecode-95.tistory.com/93 [css] overflow 사용하기 (스크롤) 1. overflow: visible; 기본값. 사이즈를 넘 칠경 우 글이 상자 밖으로 보임. 2. overflow: hidden; 사이즈를 넘 칠경 우 글이 잘림. 3. overflow: scroll; 사이즈를 넘칠경우 가로 세로 모두 스크롤이 추가. 4. overflo truecode-95.tistory.com 2)Position 속성 정리 : https://engkimbs.tistory.com/922 [HTML&CSS] position 속성 정리하기! *아래를 누르시면 HTML, CSS 코드 실행환경을 만드실 수 있습니다.[Language & .. 2023. 7. 17.

티스토리툴바