jwlee

Block Updateblock update란 컴포넌트가 렌더링을 안 하는 것을 의미한다. 보통 Link를 통해 location을 바꿀 때마다 인식하길 원할 때 새롭게 바뀐 장소를 인지 못하면서 발생하는 버그다. 해결 방법은 컴포넌트에게 location을 알려주면 된다. 콘솔을 봐 보자.router안에 location의 pathname을 prop할 수 있게 지정해 주면 된다. const mapStateToProps = (state, ownProps)=>{ const { user, router: {location}} = state; return{ isLoggedIn: user.isLoggedIn, pathname:location.pathname, };};

시작점(Entry Point)와 Manifest파일Entry Point 대부분의 운영체제나 언어에서 프로그램의 Entry Point는 오직 하나만 존재하고 보통은 main이라는 함수이다. 반면에 안드로이드는 예외적으로 단일 진입점을 가지고 있지 않다. 안드로이드는 단일 Entry Point 대신 사용가능한 4가지 컴포넌트를 가지고 있다. 4대 컴포넌트는 Activity, Service, BroadCastReceiver, Content Provider이고, Entry Porint를 통해 시스템에서 컴포넌트로 제어권을 넘기기 위해서는 AndroidManifest.xml 파일에 적어둬야 한다. ActivityActivity는 화면에 포커싱되어 사용자와 상호 작용을 하는 컴포넌트이다. MainActivity가 ..

Middle Ware redux thunk에 대해 설명하기 전에 미들웨어에 대해 설명해 보겠다. 미들웨어는 액션이 디스패치 되어서 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하면 된다. 리듀서가 액션을 처리하기 전에, 미들웨어가 할 수 있는 작업들은 여러가지가 있는데 단순히 전달받은 액션을 콘솔에 기록할 수도 있고 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있다. what's a redux-thunk리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로는 redux-thunk라는 미들웨어를 사용하는 것이다. 이를 사용하여 비동기 작업을 관리하는 건..

Redux리덕스의 3가지 규칙1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.하나의 애플리케이션에서는 단 한 개의 스토어를 만들어 사용한다. 여러개의 스토어를 사용하는 것이 가능은 하지만 권장하지 않는다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있다. 하지만 이럴 경우 개발 도구를 활용하지 못하게 된다. 2. 상태는 읽기 전용이다.리액트에서 state를 업데이트 할 때, setState를 사용하고, 배열을 업데이트 해야 할 대는 배열 자체에 push를 직접 하지 않고, concat같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. 엄청 깊은 구조로 되어있는 객..

Redux리덕스 소개리덕스는 상태관리 라이브러리이다. 리액트에 종속되어 있지 않고, 리덕스를 사용하면 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 추가적으로, 리덕스의 미들웨어라는 기능을 통해 비동기 작업, 로깅 등의 확장적인 작업들을 더 쉽게 할 수 있게 해 준다. 개념 정리Action상태에 어떠한 변화가 필요하게 될 때 우리는 액션이란 것을 발생시킨다. 이는, 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이뤄져 있다.{ type: "TOGGLE_VALUE" }액션 객체는 type필드를 필수적으로 가지고 있어야 하고 그..

장고와 리액트를 연결하기 위한 순서는 다음과 같다. 1. 장고를 위한 proxy를 만들기2. djnago-cors-headers 설치3. corsheaders를 INSTALLED_APPS에 추가4. corsheaders.middleware.CorsMiddleware를 django.middleware.common.CommonMiddleware전에 추가5. CORS_ORIGIN_ALLOW_ALL = True를 base.py 맨 아래 추가6. 장고가 bundle을 static file로 로딩하게 해야 한다.7. 디렉토리 전체를 위한 views.py추가 proxyyarn build를 할 때마다 build디렉토러에 개발한 내용들이 압축될 것이다. 이걸 장고가 읽을 수 있도록 해야 한다. 리액트가 실행되고 있는 포..

CRA(Create React App)CRA는 일종의 Configuration base로 처음부터 웹팩을 작업 하기에는 시간이 많이 걸리기 때문에 사용한다. CRA를 사용하기 위해서 글로벌로 추가해준다. yarn global add create-react-app그 다음 아래의 명령어로 앱을 만들어 주면 된다.create-react-app MyApp자신이 만든 앱으로 이동해서 yarn start를 해 주면 CRA을 성공적으로 생성한 것이다.yarn start module먼저 scss를 CRA에서 사용하기 위해서는 아래 명령을 터미널에서 실행시켜 준다.yarn add node-sass sass-loader 이제 module에 대해서 설명해 보겠다. scss에서 module을 사용하면 클래스명을 랜덤으로 지정..

Login in with Facebook페이스북으로 로그인 기능을 구현하기 위해서는 아래 코드를 installed_apps에 추가해 준다.'allauth.socialaccount.providers.facebook', 어드민 패널에 가 보면 Social Account가 생긴 것을 볼 수 있다. Socail Application에 들어가서 추가를 해 준다. 그 다음 user -> views.py, urls.py에 아래 코드를 추가해 준다. views.pyfrom allauth.socialaccount.providers.facebook.views import FacebookOAuth2Adapter from rest_auth.registration.views import SocialLoginView class ..