본문 바로가기

개발(Development)273

[React] useRef로 DOM 취득시, null | undefined 되는 이유와 해결방법 # useRef : DOM 취득시 null이 되는 이유 useRef로 DOM을 취득시, 사용 시점에 따라 null 이나 undefined가 될 수 있다. 예를 들어 아래 코드는 작동하지 않는다. import React, { useEffect, useRef } from 'react'; import './App.css'; function App() { // useRef 사용 const inputRef = useRef(null); // 최초 실행시 input에 focus 주기: 실패한다. inputRef.current.focus(); console.log(inputRef.current); // null 이 찍힌다. return ( {/* input 을 useRef로 참조 */} ); } export defau.. 2022. 8. 9.
[React] 컴포넌트 렌더링 과정 정리(useLayoutEffect vs. useEffect) # React 컴포넌트 재렌더링 케이스 - React 컴포넌트는 아래의 2가지 상황에서 재렌더링(Re-rendering) 된다. 1. 내부 상태값(state)이나 중앙 상태값(redux store 등)이 변경되는 경우 2. 부모 컴포넌트가 재렌더링되는 경우, 자식 컴포넌트도 재렌더링. - 컴포넌트가 렌더링되면, 해당 컴포넌트 함수가 호출되어 화면을 다시 그리는데, 이 과정을 정리해둔다. # React 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 단, hook 에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리된다. 3. return 실행 - 렌더링 시작 4. 렌더 단계(Render Phase) - 가상DOM을 .. 2022. 8. 9.
[React] create-react-app (CRA) 기초 정리 (Feat. 환경변수) Create-React-App(CRA) 란? - 리액트 개발환경을 쉽게 구축해준다.(by 페이스북 리액트팀) - 대략 아래의 것들 + 알파가 자동으로 세팅된다. webpack(모듈+라이브러리 번들링) babel(jsx 컴파일) jest(테스트) eslint(코드형상관리) polyfill(구형 브라우저 미지원 문법 등 대응) HMR(Hot Module Replacement: 재시작 없이 변경사항 반영) CSS 후처리(SASS 컴파일, 벤더접두사prefix 등) - 위의 것들을 알아서 설정해주므로 매우 편리하지만, eslint 등의 설정 변경이 불편하다는 단점은 있다. CRA 사용법 - React npx create-reat-app 폴더명(현재경로는 .) - React + TypeScript npx crea.. 2022. 8. 8.
[React] 리액트 기초 동작 원리(Feat. Virtual DOM : 가상돔이란?) 리액트란? 자바스크립트 UI 라이브러리이다. 좀더 친절하게 요약하면, "상태값이 변경되거나, 부모가 재렌더링 될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리" 이다. 그리고 이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택했다. 사실 리액트 자체는 이게 다다. 자칫하면 잊기 쉬운 리액트의 알몸을 간략하게 정리해둔다. # 리액트는 자바스크립트 UI 라이브러리다. 1. 리액트는 컴포넌트의 1) 상태값이 변경되거나 부모가 재렌더링되면, 2) UI를 자동 업데이트 해주는 라이브러리다. * 즉, state, redux store 등의 상태값이 변경되거나, 부모 컴포넌트가 재렌더링 되면, * 리액트가 해당 컴포넌트 함수를 자동으로 재호출하여 재렌더링 해준다. 2. 이 .. 2022. 8. 6.
[React] Toast-UI Editor/Viewer 유튜브 동영상 삽입/표시 방법 Toast-UI 에디터, 뷰어에서 유튜브를 삽입하고, 표시하는 방법을 정리한다. 1. Toast-UI Editor 유튜브 삽입 방법 - 마크다운 모드에서 iframe 으로 유튜브 동영상을 삽입하고, 미리보기(preview) 하는 방법 2. Toast-UI Viewer 유튜브 표시 방법 - iframe 으로된 유튜브 공유 태그를 토스트 뷰어에서 렌더링하는 방법 1. Toast-UI Editor 유튜브 삽입 방법 - Editor 컴포넌트에 customHTMLRenderer 속성을 추가하고, iframe 을 입력할 수 있도록 정의해준다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css.. 2022. 8. 6.
[AWS] EC2 Node.js, Mysql 설치 및 세팅 방법 # AWS EC2 에서 Node.js 와 MySQL 을 설치, 세팅하는 방법 EC2(Elastic Compute Cloud)에서 1) 인스턴스(컴퓨터 1대)를 생성하고, 2) SSH 접속하여, 3) node.js 와 MySQL을 세팅하는 방법을 정리한다. 1. EC2 생성 - 리전 : 화면 우상단에서 리전을 "서울" 등으로 선택하고 시작 - 인스턴스 시작 : EC2 서비스 화면에서 "인스턴스 시작" - 이름 입력: 원하는 이름을 입력. - OS 이미지 선택 : 원하는 OS를 골라준다. (이 글은 리눅스 우분투 기준이다) - 방화벽(보안그룹) : ssh 22포트 체크 확인. (SSH 접속 용도) - 필요에 따라 http 80포트, https 443 포트를 추가해둔다. (웹서버 접속 용도) - 키페어: SS.. 2022. 7. 4.
[JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API 기존에 텍스트 복사를 구현하려면 document.execCommand("copy") 을 이용했다. 아래 글 참고 [자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 그러나 execCommand 메서드는 Deprecated 되었으며, 대안으로 훨씬 쉽고 강력한 Clipboard API 가 나왔다. window.navigator.clipboard.writeText() 메서드를 사용하면, 아주 쉽게 텍스트를 클립보드에 복사해둘 수 있다. 너무나 쉽고 좋아서 정리해두지 않을 수 없다. 1. 텍스트 복사 - navigator.clipboard.writeText("복사할 텍스트") 호출하면 끝! - 비동기로 복사를 수행하고 Promise 를 반환하므로, 복사가 완료되었을 때 수행할 작업을 th.. 2022. 6. 23.
[React] create-react-app 리액트 버전 변경 및 에러 처리 방법 npx create-react-app 으로 리액트 프로젝트를 세팅하면, 항상 최신 버전의 react, react-dom 으로 설치가 된다. 그러나 다른 라이브러리와 호환이 안되는 등의 이슈로 인해, react의 버전을 변경해야 할 때가 있다. 혹은, GitHub 레퍼지터리 등에서 clone/pull 해온 프로젝트에서 npm install || yarn install 을 실행하면 버전이 서로 안 맞는다는 식의 에러코드가 쏟아질 때가 있다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.. 2022. 6. 23.
[React] Toast-UI Viewer 글자 크기, 행 간격, 마진 등 CSS 조정 방법 리액트에서 Toast-UI Viewer에 html문서를 렌더링하면, 아래처럼 글자 크기, 행간 간격, 마진 등이 자동 적용 되는 이슈가 있다. 확인해보면 toast-ui 자체에서 설정된 css 값임을 알 수 있다. 원치 않는 margin이 위아래로 10px 적용되어 있는데, 바꾸고 싶다면, CSS로 조정해주면 된다. # Toast-ui Viewer CSS 조정 방법 다양한 방법이 있겠지만, 필자는 편의상 App.css 파일에서 아래와 같이 !important 로 지정하여 우선순위를 높여주었다. (CSS Selector 는 크롬 inspect/검사 기능 등을 통해 파악하면 된다) .toastui-editor-contents p, .toastui-editor-contents h1, .toastui-edito.. 2022. 5. 31.

티스토리툴바