여행가는개발자

ESLint ESLint는 ES + Lint의 합성어로 ES는 EcmaScript를 의미하고 Lint는 보푸라기라는 뜻인데, 프로그래밍에서는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다. 즉 ESLint는 JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. 코딩 컨벤션 및 안티 패턴을 자동 검출 하므로 옮바른 코딩 습관을 위해 필히 사용할 것을 권장한다. ESLint는 스타일 가이드를 편리하게 적용하기 위해 사용되기도 하는데, 많은 개발자가 사용중인 Airbnb Style Guide, Google Style Guide가 대표적인 예이다. Prettier Prettier는 기존의 코드에 적용되어있던 스타일들을 전부 무시하..

react-microsoft-login 해당 라이브러리를 적용하였습니다. https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps 에서 앱을 등록하고 clientId 추출 내앱 → 인증 → ID 토큰 , 모든 조직 디렉터리의 계정 체크 내앱 → 매니페스트 “oauth2AllowIdTokenImplicitFlow” false → true 변경 해당 프로젝트에 npm install react-microsoft-login or yarn add react-microsoft-login 추가 function microsoft.js const responseMicrosoft = (response) => { cons..

https://github.com/anthonyjgrove/react-google-login 해당 라이브러리를 적용하였습니다. https://console.cloud.google.com/ 에서 프로젝트를 하나 생성한다. 대시 보드가 생성되는데 API 쪽 카드에 보면 API 개요로 이동 버튼을 클릭 사용자 인증 정보 - Ouath 동의 화면 에 간단히 설정. 나는 애플리케이션 이름만 수정했음. 사용자 인증 정보 만들기 - OAuth 클라이언트 ID 클릭 웹 어플리케이션 선택 사용자 인증 정보 → 사용자 인증 정보 만들기 → 0Auth 클라이언트 ID 으로 클라이언트 ID 추출 해당 프로젝트에 npm install react-google-login or yarn add react-google-login 추가..

react-kakao-login 해당 라이브러리를 적용하였습니다. developers.kakao 에서 앱을 만들고 App Keys 추출 key중 JavaScript key 사용 합니다 Kakao Login → Activation Settings 활성화, Redirect URI url 등록 해당 프로젝트에서 npm install react-kakao-login or yarn add react-kakao-login 추가 해당 프로젝트에 npm install react-kakao-login or yarn add react-kakao-login 추가 function kakao.js return( git에서 나와있는 코드는 위와 같다 이 코드에서 필요한 것만 내 코드에 적용하였다. { return ( { e.pr..

https://github.com/keppelen/react-facebook-login 해당 라이브러리를 적용하였습니다. https://developers.facebook.com/apps/ 에서 앱을 만들고 앱ID 추출 합니다 해당 프로젝트에 npm install react-facebook-login or yarn add react-facebook-login 추가 합니다. function import React from 'react'; import FacebookLogin from 'react-facebook-login'; class MyComponent extends React.Component { responseFacebook(response) { console.log(response); } rend..

리덕스란? 사용률이 가장 높은 상태관리 라이브러리 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 용어정리 스토어 (Store) 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 됩니다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다. 디스패치 (dispatch) 디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는, 액션을 발생 시키는 것 이라고 이해하시면 됩니다. dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠. 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시..

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있겠죠. 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택..

useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다. useEffect를 사용하는 이유 라이프 사이클에서 논리 작성 문제 React의 이전 라이프 사이클은 부작용이있을 수 있습니다. 예를 들어 페이지 제목에 클릭 횟수를 표시하려는 경우 코드는 다음과 같습니다. componentDidMount() { document.title = `${this.state.count} times` } componentDidUpdate() { document.title = `${this.state.count} times` } componen..