본문 바로가기

전체 글129

[React] 렌더링 최적화하는 방법 1. state 선언은 해당 state를 사용하는 컴포넌트 중 최상위에 선언 리액트는 특정 state가 변경되면 그 state가 선언된 컴포넌트와 그 하위 컴포넌트들을 모두 리렌더링 시킵니다. 따라서 state가 선언되는 위치를 잘 설계하는 것은 리렌더링 횟수에 엄청난 영향을 끼칩니다. 기본적으로 state의 선언위치는 이렇습니다. 해당 state를 사용하는 컴포넌트들을 잘 구분해놓은 뒤 그 컴포넌트들 중 가장 최상위 컴포넌트에 선언합니다. 만약 그 state를 사용하는 최상위 컴포넌트보다 더 상위 컴포넌트에 state를 선언하면 state를 사용하지 않는 더 많은 컴포넌트들이 state변경에 의해 불필요한 리렌더링을 겪게 됩니다. 예를 들어 다음과 같은 컴포넌트 구조가 있다고 합시다. Index ㄴGr.. 2022. 3. 10.
[React] CORS 에러 (OPTIONS 요청 발생) 백엔드는 3001포트 프론트는3000 포트로 돌려서 axios 가져오려 할 때마다 cors가 말썽이다. 댓글을 삭제하기 위한 다음과 같이 백엔드 api 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 // 댓글 삭제 router.route('/reply/delete_reply').get((req, res) => { const idx = req.query.idx; if (pool) { replyDelete(idx, (err, result) => { if (err) { res.writeHead('201', { '.. 2021. 12. 24.
[React] 리액트 댓글 좋아요 구현하기 아래는 먼저 페이지의 js이다. frontend/src/user/pages/detailPage.jsx 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import React, { useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; import ReplyLike from ../components/replyLike; const UploadPage = () => { const param = window.location.search.split('=')[1] // memberIdx (현재 로그인한 사람의 id.. 2021. 12. 23.
[Oracle] 오라클 instr() 함수 /* instr(문자열, 검색할 문자, 시작지점, n번째 검색단어) - 찾는 문자의 위치를 반환 - 찾는 문자가 없으면 0을 반환 - 찾는 단어 앞글자의 인덱스를 반환 - 시작지점에 -1을 넣을 경우 뒤에서 부터 시작 */ SELECT instr('Hello Oracle', 'O') as instr FROM dual; -- 7 SELECT instr('Hello Oracle', 'Ox') as instr FROM dual; -- 0 SELECT instr('Hello Oracle', 'Or') as instr FROM dual; -- 7 SELECT instr('Hello Oracle', 'l') as instr FROM dual; -- 3 SELECT instr('Hello Oracle', 'l', 5.. 2021. 8. 12.
[Oracle] 제약조건 CONSTRAINT 제약조건 CONSTRAINT NOT NULL -- 해당 컬럼에 null값이 들어오지 못하도록 함 UNIQUE -- null은 허용하지만 중복은 저장하지 못함 PRIMARY KEY -- null과 중복을 저장하지 못함, 테이블에 저장된 데이터를 고유하게 식별하기 위한 키를 정의, 인덱싱 기능, FOREIGN KEY의 원본 테이블의 필드 DEFAULT -- null값이 입력될 경우 default로 정의된 값이 자동으로 입력 CHECK -- 컬럼에 정해진 데이터 조건을 지정하여 그 범위내에 데이터만 입력 -- 테이블 만들기 CREATE TABLE tb_student( stu_idx NUMBER(5) NOT NULL, -- 99999까지 stu_name VARCHAR2(20) NOT NULL, stu_age N.. 2021. 8. 12.
[Oracle] 데이터 타입 문자열 CHAR -- 고정길이 문자열을 취급, 최대 2000byte(한글 약 666글자), 기억장소가 남으면 공백이 삽입, 기억공간보다 큰 데이터는 저장오류 VARCHAR2 -- 가변길이 문자열을 취급, 최대4000byte(약 1300글자), 기억장소가 남으면 남은 공간은 시스템에 반남, varchar와 같은 기능이나 오라클은 varchar2를 권장 CLOB (varchar2를 넘어갈 것 같으면 clob을 사용) -- 대용량 문자열 자료를 처리하기 위한 타입, 최대 4GB까지 처리 가능, 가변길이 문자 자료형 ⊙ NVLOB, NVARCHAR2는 다국어를 지원, UTF-8, UTF-16형식을 ENCODING -> 다국어를 지원해야 할 경우 사용 숫자 NUMBER(정밀도|스케일) -- 표현할 수 있는 값의 .. 2021. 8. 12.

티스토리툴바