본문 바로가기

Front-end100

[React] 크롬 React 디버깅 툴 설치 방법 (React Developer Tools) React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없다. React Developer Tools를 사용하게 되면, 크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이하다. 😎 링크 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revi.. 2021. 12. 13.
[VScode] 리액트 필수 플러그인 React 코드 템플릿 자동 완성 플러그인 @ Reactjs code snippets VS code 툴을 사용하고 React 언어를 사용한다면 필수인 플러그인 Reactjs code snippets 신규로 컴포넌트를 정의할 때마다 일일이 코드를 작성해야 하는 번거로움을 줄여준다, 😎 설치 방법 VS CODE 가장 왼쪽 사이드바에서 4번째 탭을 들어가면 플러그인등 다운받는 스토어 가있다. 그리고 Reactjs code snippets 검색 세부정보를 내려보면 보면 사용가능한 단축 트리거 들이 있다. 😎 사용법 Trigger Content rcc→ class component skeleton rrc→ class component skeleton with react-redux connect rrdc→ class component skeleton with react-redux connect an.. 2021. 11. 19.
[React] 클립보드 텍스트 복사하기 😎서론 웹에서 공유하기 또는 url 복사하기 같은 기능을 편하게 유저에게 제공할 때 두루 쓰이는 기능인 유저가 버튼 클릭시 컴퓨터에 텍스트가 복사되는 (cmd + c) 기능 클립보드에 데이터를 복사하는 방법은 exeCommand (opens new window)를 사용하거나 clipboard api (opens new window)를 사용하는 방법이 있습니다. clipboard api의 경우 exeCommand보다 최근 나온 기술로 호환하는 브라우저가 적으므로 exeCommand로 복사하는 방법을 알아보겠습니다! 😎흐름 현재 브라우저가 copy 기능을 지원하는지 확인 지원한다면 textarea를 만들어서 내부에 원하는 text를 복사 복사한 텍스트를 document.body에 appendChild exe.. 2021. 11. 17.
[JavaScript] reload() 메서드 - 페이지 새로고침 😎캐시에서 페이지 가져와 새로고침 (= false 옵션) [예제1] HTML과 스크립트 분리 새로고침 [예제2] HTML과 스크립트 일체 캐시새로고침 ※ location.reload() 메서드 기본값이라, false는 생략 가능. 😎서버에서 페이지 가져와 새로고침. (= true 옵션) 새로고침 서버새로고침 😎reload() 정의 - 페이지 새로고침 (= 리로드) - 모든 주요 브라우저 지원 😎reload() 구문 location.reload(forceGet) [매개변수] forceGet 선택. 새로고침 방법 지정. (= 리로드 타입 지정) false : 캐시에서 가져와 현재페이지 새로고침. (기본값.) true : 서버에서 가져와 현재페이지 새로고침. 2021. 11. 16.
React Hooks : useEffect() 함수 useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. 😎useEffect() 사용법 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 import React, { useEffect } from 'react'; useEf.. 2021. 11. 14.
티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (2) - 라인 넘버, 폰트 설정 코드 블럭 하이라이트에 이어서 라인 넘버 설정 방법 이 코드를 하이라이트 설정했던 것 처럼 블로그 관리 > 스킨 편집 > HTML 탭에 들어가서 사이에 추가해주면 된다. 그리고 css 탭으로 이동해서 맨 아래에 이 코드를 붙여넣는다. /* Line Number CSS */ /* for block of numbers */ .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #B5B5B5; border-right: 1.. 2021. 11. 13.
티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (1) - 하이라이트 티스토리에 코드를 올리면서 코드가 좀 더 가독성이 좋게 보였으면해서 여러가지 방법을 찾아봤다. 가장 간단한 방법으로 티스토리 플러그인을 이용하는 방법이 있다. 블로그 관리에서 플러그인을 누르면 플러그인 목록이 뜬다. 그 중 코드 문법 강조 플러그인을 누르고 테마를 선택한뒤 적용을 누르면 끝이다. 하지만 플러그인의 강조가 밋밋한 감이 있기 때문에 조금 더 가독성을 높이려면 highlight.js를 사용하는 것을 추천한다. 사용 방법은 highlightjs.org/에 들어가서 Get Version을 누른다. highlight.js Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the .. 2021. 11. 12.
새창을 여는 window.open() 함수 사용법 웹브라우저에서 새창을 열기 위해서 가장 간단히 사용할 수 있는 방법이 자바스크립트 window 객체의 open() 함수를 사용하는 것입니다. 1. 문법(Syntax) var ret = window.open(url, name, specs, replace); 1.1. 반환값(ret) 새로 만들어진 창 객체가 반환됩니다. 창의 생성에 실패하면 null을 반환합니다. 이 객체를 통해서 새창을 제어할 수 있습니다. 예로 ret.close(); 로 창을 닫을 수 있습니다. 1.2. url 새창에 보여질 주소 입니다. 선택적인 값으로 비워두면 빈창(about:blank)이 보입니다. 1.3. name 새로 열릴 참의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값.. 2021. 11. 9.
[JAVASCRIPT] 이미지 클릭시 새창띄우기 (base64 이미지) JS 코드 : window.open 사용 : 이미지가 경로가 아닌 Base64 인코딩된 값 : width, height 이미지사이즈에 맞게 지정가능하다. 나의 경우 base64 인코딩 값이 이미지 src 여서 600px 로 지정해줌 const clickImg = (imgsrc,pageName) =>{ // alert(imgsrc); var imageWin = new Image(); imageWin = window.open("", "", "width=600px, height=600px"); imageWin.document.write(""); imageWin.document.write(""); imageWin.document.write(""); imageWin.document.title = pageName;.. 2021. 11. 9.
728x90
반응형

티스토리툴바