본문 바로가기

전체 글149

[React] next.js 1. next js란 1. 기본 개념 nextjs는 React로 만드는 서버사이드 렌더링 프레임워크이며, 서버사이드 렌더링으로 얻는 이득은 아래와 같다. 클라이언트 렌더링의 경우 모든 js 파일을 로드하여 사용자가 웹을 보게 됨, 이때까지 많은 시간을 대기해야함 seo 문제 : 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보가 안보임, 구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 된다. 결론 : 클라이언트 측에서 자바스크립트 로딩시간을 줄이고, 서버측에서 JS, htm, css를 만들어 컨텐츠를 직접 업로드 함으로 검색엔진에 게시글이 걸리게 된다. 또한 meta 태그를 자유롭게 추가함으로 seo를.. 2023. 7. 19.
[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.

티스토리툴바