본문 바로가기

분류 전체보기518

[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.
[맥 | 맥북] 외장하드 추출 및 인식(마운트) 안될 때 해결방법 # 맥/맥북 외장하드 인식(마운트) 안될 때 해결방법 맥(Mac)이나 맥북에서 외장하드 사용시, 추출을 제대로 안 하고 분리하면, 다음 번 외장하드 연결 시, 인식이 잘 안되는 현상이 나타난다. 재부팅을 하고, 몇번을 연결/분리해도 안되다가 한참 지난 뒤에 다시 해보면 되기도 한다. 우리가 원하는 건 바로 지금! 당장! 외장하드가 인식이 되는 것이다. 1. 외장하드 연결 - 인식이 안 되는 외장하드를 맥북에 연결한다. - 물론 인식이 안 될텐데, 아래의 순서대로 진행해보자(아주 쉽다) 2. 디스크 유틸리티 실행 - SpotLight에서 "디스크 유틸리티"를 검색하여 실행한다. - "LaunchPad > 기타 > 디스크 유틸리티" 경로에서 찾을 수도 있다. 3. "모든 기기 보기" 선택 - 좌상단의 "보기.. 2022. 7. 14.
[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.
[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation() # useNavigate() 파라미터 전달, useLocation() 파라미터 수신 방법 react-router-dom v6 에서 1. useNavigate() 로 페이지를 이동하면서 파라미터를 전달하는 방법 2. useLocation() 으로 파라미터를 취득하는 방법 을 정리한다. 1. 페이지 이동시, 파라미터 전달 방법 1) useNavigate() 훅으로 navigate 함수를 취득한다. 2) navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다. - navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 아래 예제코드는, 버튼을 클릭하면 '/test' 경로로 이동하면서 id, job을 인자로 넘긴다. imp.. 2022. 5. 28.

티스토리툴바