React
-
React - Router (v5)React 2023. 1. 10. 19:02
React Router 시작하기 전에 잠깐 알고 넘어가자! 1. 라우팅이란 ?! 간단히 말해 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 2. SPA와 MPA SPA란 ?! Single Page Application으로 페이지가 한 개인 웹 어플리케이션을 의미하며, CSR(Client Side Rendering)방식으로 렌더링한다. SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 데이터만을 넘겨주어, 첫 요청시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용한다. MPA란 ?! Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며, SSR(Server Side Rendering)..
-
React - CKEditor 사용해보기React 2023. 1. 5. 22:08
CKEditor 란? CKEditor는 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 WYSIWYG(위지위그) Rich Text Editor이다. WYSIWYG란 What You See IS Whay You Get의 줄임말로 ‘보는 대로 얻는다.’ 는 뜻이다. 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 다시 말해 HTML처럼 따로 CSS 문법을 적용해서 디자인 편집을 하는 것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 핵심 코드는 자바스크립트로 작성되어 있으며 CKSource가 개발하였다. 오픈 소스와 상용 라이선스로 이용할 수 있다. 설치방법 https://ckeditor.com/..
-
target="_blank” 사용 이슈 및 해결React 2022. 7. 4. 12:33
target="_blank” 사용 이슈 및 해결 a 태그의 속성인 target="_blank" 를 사용하니 Using target=_blank without rel=noopener noreferrer is a security risk 라는 경고문구가 발생했다. rel=noopener nore referer 없이 target=_blank를 사용하면 보안 위험이 발생한다고 경고하는데, 대체 무슨 보안 위험이 발생하는걸까 ⁉️ 본론으로 들어가기전, target 속성에 어떤 값을 지정할 수 있는지 먼저 알아보자 target 속성 target은 'href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?'를 지정하기 위한 속성이다. _self 연결한 웹 페이지를 현재 탭에서 연다. _self는 기본 설정..
-
React - 저장된 데이터 불러올 때 개행처리React 2022. 5. 20. 17:01
TextArea 작성 데이터 데이터 출력 결과 출력 결과를 확인하였을 때 줄바꿈이 반영되지 않았다.. DB 저장시 \n 과 함께 저장이 되는데, React에서는 텍스트 형태로만 랜더링하게 설정되어 있다고 한다. 개행처리 방법 1 {info.memo.split("\\n").map((line) => { return ( {line} ) })} 받아온 데이터에 \n을 기준으로 나누어 태그를 추가하여 개행 처리를 해준다. 방법 2 .memo { white-space: pre-line; } white-space 스타일을 사용한다. normal : HTML의 기본 값으로 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 wrap 된다. nowrap : normal과 같은데 긴행이 wrap 되지 않는..
-
RefReact 2022. 2. 25. 11:31
Ref 일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById 등을 통해서 접근한다. React에서는 ref 라는 것을 사용해서 접근하게 된다. Ref 란? ‘reference’의 약자로 ‘참조'라는 뜻이다. 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용된다. render 메소드에서 생성된 DOM 노드나 React element 를 엑세스 하는 방법을 제공하는 것이다. React에서 Ref를 사용하는 경우는 다음과 같다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 때 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리 (플레이어, ..
-
React DOMReact 2022. 2. 25. 11:21
돔(DOM) 이란? DOM(Document Object Model)은 문서 객체 모델이라는 뜻이다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체를 의미한다. 즉 DOM이란 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. ⇒ DOM은 HTML과 스크립팅 언어 (JavaScript)를 서로 이어주는 역할이다. 자바스크립트는 document 라는 전역 객체를 통해 HTML 태그에 접근할 수 있다. document 객체는 웹 페이지 그 자체를 의미한다. 또한, document 객체의 상위에 위치한 window라는 객체로도 접근이 가능하다. 가상 돔(Virtual DOM) 이란? 실제 DOM에 ..
-
React 설치 (2022)React 2022. 2. 25. 11:10
설치해야 할 프로그램 Node.js Webpack과 Babel 등의 도구들은 자바스크립트 런타임인 Node.js 기반으로 만들어져 있으며 이 도구들을 사용하기 위해서 설치해야 한다. LTS 버전으로 설치하면 된다. yarn yarn은 조금 개선된 버전의 npm(node package manager)으로 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위해 설치한다. 💡 npm Node.js를 설치할 때 자동으로 설치되는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 버전 관리를 할 때 사용한다. yarn 설치 $ npm install -g yarn 에디터 원하는 에디터를 설치하면 된다. (현재 VS code 사용중) React 설치 $ npx create-react-app 폴더이름