혼자 적어보는 노트

지난 포스팅에서 generator에 대해 아주 기본적인 부분들을 이해 한 후에 saga를 해보기로 했고 로그인 기능을 예제로 작성하였다. 💡 redux-saga를 사용하는 이유 redux의 dispatch는 동기적으로 이루어지며 dispatch를 나누어서 해야할 경우 컴포넌트가 담긴 파일 내부에서 dispatch를 여러번 작성을 해야하는 불편함이 있다. 아주 기본적인 비동기처리를 위해서는 thunk만 사용해도 되지만 기능이 제한적이다. redux-saga는 비동기적으로 dispatch를 사용할 수 있을 뿐만 아니라 내부 메소드에 api의 연속호출을 제어하는 (debounce, throttle) 등 다양한 기능들을 활용할 수 있다. 설치 npm i redux-saga saga 사용 해보기 store 생성 ..

redux saga를 학습하기전에 예시 코드를 만들어가며 제너레이터에 대해 이해를 해보려고 한다. 제너레이터 함수 일반 함수는 값이나 함수를 반환하지만 제너레이터는 필요에 따라 여러개의 값을 하나씩 반환할 수 있다. 제너레이터 함수는 function*을 사용하여 생성한다. 📗 예시 const gen = function* () { yield 1; yield 2; return 3; }; const generator = gen(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); 📑 결과 제너레이터는 특별한 객체를 반환하며 next()와 ..

부모 컴포넌트에서 아래와 같이 텍스트를 전달하는 컴포넌트를 만든다 const textData = '정규표현식 #리액트 #react #정규표현식' //ex [TextContent.js] const TextContent = ({ textData }) => ( // '정규표현식 #리액트 #react #정규표현식' {textData.split(/(#[^\s#]+)/g).map((item) => { //split에서는 ()를 써야함 if (item.match(/(#[^\s#]+)/)) { return ( {item} ); } return v; })} ); const textData = '정규표현식 #리액트 #react #정규표현식' 1. textData.split(/(#[^\s#]+)/g) /#[^\s#]+/g ..

styled-components styled-components는 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 스타일을 바로 삽입하는 CSS in JS 라이브러리 중 하나이다. 개인적으로 css파일을 따로 작성하는 것을 선호하기 때문에 사용을 잘 안했으나 알고는 있어야 할 듯 하여 간단하게 정리를 하였다. 설치 npm i styled-components 사용 시 import import styled from "styled-components"; 일반 태그에 적용하는 법 적용 전 const App = () => { return ( Styled-components ); }; 적용 후 const MainBox = styled.div` padding: 10px; font-size: 16px; `;..

extensions에서 prettire 마우스 오른쪽 버튼 클릭 후 extension settings(확장 설정)을 클릭하면 세부 설정들을 변경할 수 있다. prettier: Print Width 몇 글자 부터 줄바꿈 될 것인지 설정 기본 값은 80으로 되어있다. prettier: Tab Width 탭을 눌렀을 때 몇 칸을 띄울 지 설정 기본값은 2이다. prettier: Single Quote 체크할 경우 더블쿼트들이 강제로 전부 싱글쿼트로 변경된다. 기본값은 false상태.

어렴풋이 알고 있던 내용인데 되새기기 위해 정리해보았다. state를 업데이트 할 때 {...state}나 [...state]로 사용 하는 경우를 많이 봐왔는데, 왜 일까? 배열이나 객체를 개별적인 요소로 열거하는것 외에 spread 연산자를 사용함으로써의 이점은 또 무엇이 있을까? {} === {} // false 일단 객체는 동일한 값이여도 다른 객체로 인식을 한다. 기존의 객체에 spread연산자를 사용하여 값을 비교해보자. const prev = {a: “A”} const next = {…prev} prev === next // false // * 겉의 껍데기 {} 를 바꾸어 주었기 때문에 false로 표현된다. prev.a === next.a // true // * 겉의 껍데기는 다르지만 내부는..

이미지 업로드 버튼을 만드려면 input 태그에 type="file"을 주어야하는데 type file의 경우 브라우저에서 지정한 UI로만 사용이 가능해서 CSS수정이 불가능하다. css를 변경할 수 없으니 다른 방법으로 input태그를 숨겨놓고 커스터마이징 할 버튼을 추가하여 css를 수정하는 방식으로 해결을 할 수 있다. import React, { useRef } from "react"; const imageRef = useRef(); const onImageUploadClick = () => { imageRef.current.click(); } // .. 생략 // 버튼영역 // 실제 이미지 버튼 이미지 업로드 // 커스터마이징 버튼 file input을 hidden으로 숨기고 useRef를 사용하..

보통 새 탭 열기 링크를 만들 때 target = "_blank"를 사용하게 되는데 target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다는 것을 알게되었다. JavsScript에서 windoe.opener로 부모 윈도우의 오브젝트에 접근하여 부모 윈도우의 URL을 바꿀경우 부적절한 페이지로 리디렉션을 하는 등 보안 상의 문제가 발생 할 수 있다. 그리고 _blank로 링크를 열 경우 링크를 건 페이지와 같은 프로세스를 통해 실행되는데 링크를 건 페이지가 부하가 높은 페이지일 경우 링크된 페이지에도 적용이되어 퍼포먼스가 떨어질 우려가 있다. 문제 해결을 위해 noopner, noreferrer를 사용하자. noopener : 링크된 페이지에서 window.opener..