전체 글153 [MySQL] 쿼리 플랜 확인 및 인덱싱을 통한 쿼리 최적화 사내에서 개발 중인 백오피스의 특정 페이지 로딩이 갈수록 점점 느려졌다. 네트워크 탭을 확인해보니 api 3개의 응답시간이 무려 최대 3.6초대가 나왔다. 해당 API에서 사용하는 쿼리를 직접 DB에 날려보니 쿼리가 매우 느리게 동작했고, explain으로 실행 계획을 확인해보니.. cssc 테이블에서 SELECT 시 풀스캔을 하고 있었고, 로우 수가 많아 쿼리가 오래 걸렸던 것으로 분석된다. 그래서 해당 테이블의 조건절에 사용된 컬럼을 인덱스로 추가하였다. create index 문은 아래처럼 쓰면 되는데, 자세한 내용은 링크를 통해 확인할 수 있다. create index index_name on table_name(column1, column2, ...) https://www.w3schools.co.. 2022. 9. 23. [S3] AWS S3 fetch시 cors문제 해결 텍스트 에디터를 달아 글 작성을 완료할 때 반환받은 HTML을 파일로 만들어 S3로 업로드했다. DB에는 당연히 S3에 업로드 후 반환받은 url을 집어넣는다. 그리고 해당 글을 불러올 때 해당 url로 fetch 요청을 날리면 CORS 에러가 발생한다. 여태껏 이미지를 저장할 용도로 S3를 많이 사용했으니 fetch 요청 시에 CORS 에러가 발생한다는 건 처음 알았다. 이미지는 src 프로퍼티에 적어주기만 하면 되니까 말이다. 해당 코드에서 CORS 에러가 발생한다. axios.get(`${res?.html_url}`).then((data) => setHtml(data.data)); 여러 블로그를 참고하여 문제를 해결했는데, 방법은 크게 복잡하지 않았다. 먼저 S3 -> 버킷 -> 권한에 들어가서 제.. 2022. 9. 20. [Next.js] Next.js에서 Toast UI Editor 사용하기 https://ui.toast.com/tui-editor TOAST UI :: Make Your Web Delicious!TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.ui.toast.com 사내 백오피스 개발 중에 웹 에디터가 필요한 기능이 생겨, 에디터 라이브러리 중 사용해본 적 있던 Toast UI Editor를 다시 붙이게 되었다.Toast UI Editor는 nhn에서 개발한 Editor인데, 아직까지는 SSR를 지원하지 않기 때문에,Next.js에 적용하려면 클라이언트 사이드에서 에디터를 불러다 렌더링해야 한다.해당 문제는 좋은 블로그 글들을 참조해 해결했지만, 그 외 겪은 다양한 문제점들도 같이 적어보려 한다.. 2022. 9. 20. [React] Material UI의 TextField 만들어보기 워낙 유명한 MUI의 TextField 컴포넌트다. 깔끔하고 직관적이다. 번잡하지 않은 애니메이션으로 UX도 상당히 좋다고 생각한다. css만으로 해당 컴포넌트를 만들어보자. 구조는 아래처럼 input 태그와 label 태그를 감싸는 컨테이너 div 태그하나로 구성하였다. //TextField.tsx import { useState } from "react"; import "./style.css"; interface TextFieldProps { label: string; } const TextField = (props: TextFieldProps) => { const { label } = props; const [value, setValue] = useState(""); return ( setValue.. 2022. 9. 4. 이전 1 2 3 4 5 6 7 8 ··· 39 다음
