혼자 적어보는 노트

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

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

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

브라우저가 화면에 렌더링을 할 때는 렌더링 엔진을 사용한다. 렌더링 엔진의 역할은 요청받은 내용을 화면에 표시하는 일이다. 파이어폭스는 게코엔진, 사파리와 크롬의 경우 웹킷 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링 할 때 CRP(Critical Rendering Path)프로세스를 사용하며 단계는 아래와 같다. 1. HTML문서를 파싱하여 DOM 트리 구축 (Constructing the DOM Tree) 2. CSS를 파싱하여 CSSOM 트리 구축 (Constructing the CSSOM Tree) 3. 자바스크립트를 실행한다. (Running JavaScript) 4. DOM트리와 CSS트리를 조합하여 렌더트리 구축. (Creating the Render Tr..

Redux DevTools를 사용하려면 아래와 같이 store에서 세팅을 해주어야 한다. const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); 하지만 미들웨어를 추가해야 할 때 rootReducer, Redux DevTools Extension코드, applyMiddlewere 이렇게 세 가지를 적어버리면 에러가 발생한다. import { createStore, combineReducers, applyMiddleware } from "redux"; import { composeWithDevTools } from "redux-devtools-ext..

이번에 데스크탑이 고장나서 수리를 맡기는 바람에 그동안 맥북을 다시 사용하게 되었는데 git에 작은 프로젝트를 하고 있었어서 노트북에서 이어서 하고 싶었다. git clone 명령어를 사용하여 원격 저장소에 있는 데이터를 새로운 컴퓨터에 복제할 수 있다. 1. 새로운 컴퓨터에 등록되어 있는 계정 정보 확인. git config --list 2. 계정 정보가 없다면 원격 저장소에서 사용하던 이름과 email을 새로운 컴퓨터에 등록. git config --global user.name [name] git config --global user.email [email] 3. 복제하려고 하는 원격 저장소의 url을 clone. git clone [URL] 4. 터미널로 해당 폴더에 들어가서 log 확인 git ..

git log git의 커밋들의 내역들을 조회할 수 있는 명령어이다. 커밋 메세지에 포함된 텍스트 검색 커밋한 내역들 중 커밋 메세지에 해당 검색어가 포함되어있는 커밋을 찾을 수 있다. git log --grep [검색어] 커밋 변경사항에 포함된 텍스트 검색 커밋한 내역들 중 커밋의 변경 사항에 해당 검색어가 포함되어 있는 커밋을 찾을 수 있다. git log -S [검색어] 커밋들을 한 줄로 보기 git log --onelin 커밋들을 한줄로 n개 보기 git log --onelin -(개수) 커밋들을 그래프로 보기 git log --all --oneline --graph git log fomatting --pretty 옵션을 사용하면 원하는 대로 git log를 foramatting할 수 있다 git..

이전 포스팅에 이어서 이번엔 Google, Gitbut로그인을 진행해보려 한다. Google 로그인 🔨Firebase setting firebase console의 Authentication - Sign-in method 에서 로그인 제공업체를 추가해준다. ✍ 코드작성 reducer의 상단에 이전에 만들어 두었던 provider 불러오기 import { auth, googleAuthProvider } from "../firebase"; [reducer.js] ActionType과 Actions 작성 const GOOGLE_LOGIN_START = "GOOGLE_LOGIN_START"; const GOOGLE_LOGIN_SUCCESS = "GOOGLE_LOGIN_SUCCESS"; const GOOGLE_L..