상상코딩 입니다. ^^;

이렇게 하면 되지 않을까 하는...

지금 블로그에만 들어와 있는 상황인지라... 

//Startup class 의 ConfigureServices method 에 다음을 추가합니다.
services.AddHttpContextAccessor();
// WoojjaExcludeAuthFilter 라는 Custom Attribute 를 생성합니다.
public class WoojjaExcludeAuthFilter : AuthorizeAttribute, IAuthorizationFilter
{
    public WoojjaAuthFilter(params string[] roles)
    {
        ProtectedRoles = roles;
    }

    public string[] ProtectedRoles { get; }

    public void OnAuthorization(AuthorizationFilterContext context)
    {
	//container 로부터 IHttpContextAccessor haccess 를 Resolve
        var haccess = context.HttpContext.RequestServices.GetRequiredService<IHttpContextAccessor>();
	ClaimsPrincipal cp = hcontext.User;

/*
	// 또는 WebApi 에서 Claim 을 조회.
        using var httpClient = httpClientFactory.CreateClient();

        var resp = await httpClient.GetAsync("https://woojja.com/API/GetAccountClaims/woojja");
        ProtectedRoles = await resp.Content.ReadAsStringAsync();
*/

	for(int i = 0: i < ProtectedRoles.Count: i++){
		if(cp.Claims.Where(c => c.Type == jwtClaim.ToString()).Count > 0){			
			context.Result = new UnauthorizedResult();
		}
	}
    }
}

그리고 Action Result 에 적용합니다. 

[Authorize(Roles = "Administrators"]
[WoojjaExcludeAuthFilter("Sales","HRM")]
public async Task<IActionResult> Index()

조만간 적용해 보고 다시 글을 올리겠습니다. ^^;;;

 

행복한 고수되셔요...

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




Posted by woojja

댓글을 달아 주세요

2020. 4. 16. 10:34

VisualStudio 오류를 확인하던 중 ASCII 값에 대한 내용을 기록으로 남깁니다. ^^

 

System.NullReferenceException: Object reference not set to an instance of an object.&#x000D;&#x000A;   at Microsoft.CodeAnalysis.FindUsages.DefinitionItem.Create(ImmutableArray`1 tags, ImmutableArray`1 displayParts, ImmutableArray`1 sourceSpans, ImmutableArray`1 nameDisplayParts, ImmutableDictionary`2 properties, Boolean displayIfNoReferences)&#x000D;&#x000A;   at Microsoft.CodeAnalysis.FindUsages.DefinitionItem.Create(ImmutableArray`1 tags, ImmutableArray`1 displayParts, ImmutableArray`1 sourceSpans, ImmutableArray`1 nameDisplayParts, Boolean displayIfNoReferences)&#x000D;&#x000A;   at Microsoft.CodeAnalysis.Editor.TypeScript.Features.GoToDefinition.NamedDefinitionItemExtensions.TryGetNavigableDefinitionItem(NamedDefinitionItem namedDefinition, Project currentProject, IFilePathDefinitionItemProvider filePathDefinitionItemProvider, JoinableTaskContext joinableTaskContext, DefinitionItem&amp; definitionItem)&#x000D;&#x000A;   at Microsoft.CodeAnalysis.Editor.TypeScript.Features.GoToDefinition.TypeScriptGoToSymbolService.&lt;GetSymbolsAsync&gt;d__4.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.CodeAnalysis.Editor.NavigableSymbols.NavigableSymbolService.NavigableSymbolSource.&lt;GetNavigableSymbolAsync&gt;d__5.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.&lt;QueryNavigableSymbolAsync&gt;d__35.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.&lt;SetMouseCursorAndNavigableSpanHelperAsync&gt;d__33.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.&lt;SetMouseCursorAndNavigableSpanHelperAsync&gt;d__33.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.&lt;&gt;c__DisplayClass32_0.&lt;&lt;SetMouseCursorAndNavigableSpanAsync&gt;b__0&gt;d.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Threading.JoinableTask.&lt;JoinAsync&gt;d__78.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Threading.JoinableTask`1.&lt;JoinAsync&gt;d__3.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.&lt;SetMouseCursorAndNavigableSpanAsync&gt;d__32.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)&#x000D;&#x000A;   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)&#x000D;&#x000A;   at Microsoft.VisualStudio.Text.Utilities.GuardedOperations.&lt;CallExtensionPointAsync&gt;d__32.MoveNext()&#x000D;&#x000A;--- End of stack trace from previous location where exception was thrown ---&#x000D;&#x000A;   at Microsoft.VisualStudio.Telemetry.WindowsErrorReporting.WatsonReport.GetClrWatsonExceptionInfo(Exception exceptionObject)
더보기
System.NullReferenceException: Object reference not set to an instance of an object.    at Microsoft.CodeAnalysis.FindUsages.DefinitionItem.Create(ImmutableArray`1 tags, ImmutableArray`1 displayParts, ImmutableArray`1 sourceSpans, ImmutableArray`1 nameDisplayParts, ImmutableDictionary`2 properties, Boolean displayIfNoReferences)    at Microsoft.CodeAnalysis.FindUsages.DefinitionItem.Create(ImmutableArray`1 tags, ImmutableArray`1 displayParts, ImmutableArray`1 sourceSpans, ImmutableArray`1 nameDisplayParts, Boolean displayIfNoReferences)    at Microsoft.CodeAnalysis.Editor.TypeScript.Features.GoToDefinition.NamedDefinitionItemExtensions.TryGetNavigableDefinitionItem(NamedDefinitionItem namedDefinition, Project currentProject, IFilePathDefinitionItemProvider filePathDefinitionItemProvider, JoinableTaskContext joinableTaskContext, DefinitionItem& definitionItem)    at Microsoft.CodeAnalysis.Editor.TypeScript.Features.GoToDefinition.TypeScriptGoToSymbolService.<GetSymbolsAsync>d__4.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.CodeAnalysis.Editor.NavigableSymbols.NavigableSymbolService.NavigableSymbolSource.<GetNavigableSymbolAsync>d__5.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.<QueryNavigableSymbolAsync>d__35.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.<SetMouseCursorAndNavigableSpanHelperAsync>d__33.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.<SetMouseCursorAndNavigableSpanHelperAsync>d__33.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.<>c__DisplayClass32_0.<<SetMouseCursorAndNavigableSpanAsync>b__0>d.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Threading.JoinableTask.<JoinAsync>d__78.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Threading.JoinableTask`1.<JoinAsync>d__3.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Language.Intellisense.Implementation.GoToDefMouseHandler.<SetMouseCursorAndNavigableSpanAsync>d__32.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)    at Microsoft.VisualStudio.Text.Utilities.GuardedOperations.<CallExtensionPointAsync>d__32.MoveNext() --- End of stack trace from previous location where exception was thrown ---    at Microsoft.VisualStudio.Telemetry.WindowsErrorReporting.WatsonReport.GetClrWatsonExceptionInfo(Exception exceptionObject)

 

 

 

https://www.facebook.com/groups/MHVB.Net/permalink/1679882212162998/

 

보안 확인 필요

메뉴를 열려면 alt + / 키 조합을 누르세요

www.facebook.com

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




Posted by woojja

댓글을 달아 주세요

asp.net mvc5 에서 ES5 Setting 하는 방법에 대해 알아봤습니다.

 

다음과 같은 글이 있어 공유합니다.

 

https://sung.codes/blog/2017/05/22/setting-es6-environment-asp-net-mvc-5/

 

Setting up an ES6 Environment for ASP.NET MVC 5

UPDATE : October 13th, 2018 Following post uses Babel 7 & Webpack 4. https://sung.codes/blog/2018/10/13/setting-up-a-react-environment-for…

sung.codes

 

 

행복한 고수되십시오.

 

woojja ))*

]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]




Posted by woojja

댓글을 달아 주세요

  1. 빅샤크3 젤리몬스터 대소동 다시보기 수정/삭제 댓글쓰기 댓글주소
    2020.08.27 11:35

    관리자의 승인을 기다리고 있는 댓글입니다

Controller 에 RoutePrefix Attribute 를 설정해도 작동하지 않는 경우가 있다.

이는 한가지를 설정해주지 않아서 일텐데...

 

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            
            routes.MapMvcAttributeRoutes();
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

 

위와 같이 routes.MapMvcAttributeRoutes(); 를 추가해준다.

 

위 구문을 추가해주면 각 Controller 의 노출된 Action Method 에 기본적으로 Route Attribute 를 추가해주어야 한다.

 

 

 

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




Posted by woojja

댓글을 달아 주세요

ls -l 명령어는 사용가능하지만 ll 명령어는 찾을 수 없다는 메세지를 뱉을 때는...

 

sudo nano ~/.bashrc 를 입력하여 

주석처리되어 있는 아래 구문의 주석을 제거해준다.

#alias ll='ls -l' 

#alias la='ls -A'

#alias l='ls -CF'

 

이보다 먼저

sudo nano .bash_profile

를 열어

export PATH=%PATH:/bin:/usr/local/bin:/usr/bin

가 추가되어 있는지 확인해 보는 것도 좋다.

 

 

행복한 고수되셔요.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\




'ETC > Raspberry Pi' 카테고리의 다른 글

[Raspberry Pi] ll, la 명령어 활성하는 방법  (0) 2020.03.12
[Raspberry Pi] WiFi 설정  (0) 2020.03.11
[Raspberry Pi] Raspberry pi SSH 연결  (0) 2020.03.11
Posted by woojja

댓글을 달아 주세요

windows command 창에서 ipconfig 명령어와 같은 명령어로

ifconfig 와  iwconfig 가 있다.

 

raspberry pi 의 기본 wifi 는 wlan0 으로 설정되어 있다.

 

sudo raspi-config 를 통해 wifi 설정이 가능하며

wifi 설정 이전에 국가 코드를 입력하는 화면이 나타나며

오류가 발생할 수 있으므로 기본 GB (영국) 을 수정하지 않았다.

SSID 명과 비밀번호를 입력하면 설정이 끝난다.

 

아래 명령을 통해 주변의 AccessPoint 를 검색하는 것도 가능하다.

sudo iwlist wlan0 scan

 

SSID 를 알고 있는 경우 아래와 같이 입력하여 지정가능하다.

sudo wpa_passphrase ssid password

==> sudo wpa_passphrase WoojjaAccessPoint WoojjaPassword

 

iwconfig 나 ifconfig 명령을 통해서 wlan0 이 설정되어 있는지 확인한다.

하지만 AccessPoint 가 숨김처리 되어 있다면 위 그림과 같이 연결되지 않을 수 있다.

 

이런 경우 아래 명령을 통해 해당 파일을 열어 

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

 

다음과 같이 추가할 구문이 있다.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=GB

network={
        ssid="WoojjaAccessPoint_SSID"
        #psk="WoojjaPassword"
        psk=98698b6c797140f3bWoojjaPassword53c04c5ed47948796e4920
}


==> 

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=GB

network={
        ssid="WoojjaAccessPoint_SSID"
        scan_ssid=1
        mode=0
        proto=WPA2
        pairwise=TKIP
        group=TKIP
        key_mgmt=WPA-PSK
        #psk="WoojjaPassword"
        psk=98698b6c797140f3bWoojjaPassword53c04c5ed47948796e4920
}

sudo reboot 명령을 실행하여  Reboot 한다.

 

잘 안되는 경우 해당 wlan0 내렸다가 올리는 명령어도 존재한다.

sudo ifconfig wlan0 down

sudo ifconfig wlan0 up

 

 

 

아래 글을 참고했습니다. 고맙습니다.

https://webnautes.tistory.com/903

 

Raspberry Pi 3 에서 무선랜(WiFi) 설정하는 방법

Raspberry Pi 3에 내장된 무선랜(WiFi)를 사용하기 위해 필요한 설정 방법에 대해서 다룹니다. 1. raspi-config를 사용시 문제점 2. 커맨드 명령으로 WiFi 연결 설정 및 테스트 3. 두 장소 이상에서 무선랜(WIFI)..

webnautes.tistory.com

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




'ETC > Raspberry Pi' 카테고리의 다른 글

[Raspberry Pi] ll, la 명령어 활성하는 방법  (0) 2020.03.12
[Raspberry Pi] WiFi 설정  (0) 2020.03.11
[Raspberry Pi] Raspberry pi SSH 연결  (0) 2020.03.11
Posted by woojja

댓글을 달아 주세요

ping raspberrypi.local

ping -4 raspberrypi.local

 

ssh pi@192.168.0.106 (IP Address)

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




'ETC > Raspberry Pi' 카테고리의 다른 글

[Raspberry Pi] ll, la 명령어 활성하는 방법  (0) 2020.03.12
[Raspberry Pi] WiFi 설정  (0) 2020.03.11
[Raspberry Pi] Raspberry pi SSH 연결  (0) 2020.03.11
Posted by woojja

댓글을 달아 주세요

 

https://www.w3schools.com/charsets/ref_utf_dingbats.asp

 

UTF-8 Dingbat 은 HTML Symbol 들 중의 하나입니다.

HTML Symbol 에는 이외에도 여러가지가 있으니 살펴보기 바랍니다.

 

Emoji 도 포함되어있습니다.

 

재미납니다. ^^

 

 

행복한 고수되십시오. ^^

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 

 

 

 

 




'Web > HTML 5' 카테고리의 다른 글

[HTML Symbols] UTF-8 Dingbats  (0) 2020.02.06
[HTML5] autocomplete Attribute  (0) 2020.01.31
[HTML 5] 20. File API - 동영상  (0) 2011.07.29
[HTML 5] 19. SVG - 동영상  (0) 2011.07.29
[HTML 5] 18. Geolocation API - 동영상  (0) 2011.07.21
[HTML 5] 17. Web Socket - 동영상  (0) 2011.07.21
Posted by woojja

댓글을 달아 주세요

Web 개발을 하다 Developer Console 에  다음과 같은 정보가 나타났을 때 ...

Chrome Developer Console screenshot

More info 에 표시되어 있는 링크(https://goo.gl/9p2vKq) 로 이동하여 내용을 확인한다.

결국 autocomplete 속성을 설명한 페이지로 이동하게 되는데

이 페이지에서 내용을 확인한다.

 

Autofilling form controls: the autocomplete attribute

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls%3A-the-autocomplete-attribute

 

하지만 React 개발 시 Attribute 명을 autocomplete 로 입력하게 되면 아래와 같은 Error Message 를 확인하게 된다.

Chrome Developer Console ScreenShot

내용을 확인해 보면 autoComplete 로 입력을 유도하는 Message 를 확인할 수 있다.

 

해당사항을 수정하게되면 Console 에서 Message 가 사라지는 모습을 확인할 수 있다.

 

 

행복한 고수되셔요. ^^

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\

 

 

 

 

 

 

 

 




'Web > HTML 5' 카테고리의 다른 글

[HTML Symbols] UTF-8 Dingbats  (0) 2020.02.06
[HTML5] autocomplete Attribute  (0) 2020.01.31
[HTML 5] 20. File API - 동영상  (0) 2011.07.29
[HTML 5] 19. SVG - 동영상  (0) 2011.07.29
[HTML 5] 18. Geolocation API - 동영상  (0) 2011.07.21
[HTML 5] 17. Web Socket - 동영상  (0) 2011.07.21
Posted by woojja

댓글을 달아 주세요

yarn add react-router-dom

yarn add firebase

yarn add redux redux-logger react-redux  

 

Redux 설정

 

1. redux 를 이용하기 위해 Provider 의 아래에 위치.

// ./index.js

import { Provider } from 'react-redux';

...

ReactDOM.render(
    <Provider>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

2. redux Folder 를 생성한다.

3. root.reducer.js 를 생성한다.

 

4. user Folder 를 생성한다.

5. user.reducer.js 를 생성한다.

 

// ./redux/user/user.reducer.js

// default value 를 설정.
const INITIAL_STATE = {
    currentUser: null
}

/*
reducer 에서는 state 와 action 을 parameter 로 사용한다.
state 에는 현재의 state (current state) 를 담고 있다.
action 은 action 의 type 과 값을 담고 있는 payload 를 포함하고 있다.
*/
const userReducer = (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'SET_CURRENT_USER':
            return {
                ...state,
                currentUser: action.payload
            }
        default:
            return state;
    }
}

export default userReducer;

6. root.reducer 에 user reducer 를 포함시킨다.

// ./redux/root.reducer.js

import { combineReducers } from 'redux';

import userReducer from './user/user.reducer';

// redux 내의 state 는 하나의 큰 json object 다.
// 생성한 Reducer 를 combineReducers 를 이용하여 관리한다.
export default combineReducers({
    user: userReducer
});

7. store 를 생성하여 reducer 를 담는다.

// ./redux/store.js

import { createStore, applyMiddleware} from 'redux';
// redux code 디버깅시 유용한 middleware
import logger from 'redux-logger'; 

import rootReducer from './root.reducer';

// 사용할 middleware 를 등록
const middlewares = [logger];

// store 생성
const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default store;

8. redux  의 Provider 에 store 정보를 설정한다.

// ./index.js

...

import store from './redux/store';

...

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

9. 이제 action 을 생성한다.

// ./redux/user/user.action.js

export const setCurrentUser = user => {
    return ({
        type: 'SET_CURRENT_USER',
        payload: user
    });
}

Redux 의 사용.

 

1. Redux 에 연결한다.

 

connect()

 

// ./App.js

...

import { connect } from 'react-redux';

...

// connect(mapStateToProps, mapDispatchToProps)(Component)
// 초기에는 전달할 mapStateToProps state 값이 없으므로 null 을 전달 
export default connect(null, )(App);

2. action 을 Reducer 와 연결할 수 있도록 dispatch 에 action 을 넘겨준다.

// ./App.js

...

import { setCurrentUser } from './redux/user/user.actions';
...


class App extends React.Component {

...

something() {

  setCurrentUser({
    currentUser : {
    id: snapShot.id,
    ...snapShot.data()
    }
  });
}

...

}

const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setCurrentUser(user))
})

//connect(mapStateToProps, mapDispatchToProps)(Component)
export default connect(null, mapDispatchToProps)(App);

 

3. 위 component 를 사용하는 상위 component 의 parameter 를 전달하는 부분을 삭제한다.

// ./App.js

<Header currentUser={this.state.currentUser} />

// =>

<Header />

 

4. 사용할 component 에서 redux 연결하기 위해 react-redux 의 connect 를 추가한다.

// state 를 사용할 component

import { connect } from 'react-redux';

...


const Header = ({ currentUser }) => {
    return (
        ...
    );
}

// 이름은 아무래도 상관없지만 mapStateToProps 이 redux code 표준.
// argument 로 사용되는 state 가 root reducer 의 state 다.
const mapStateToProps = (state) => ({
    currentUser : state.user.currentUser
});

// 처음에는 root reducer 의 user state 가 없으므로 null 일 것이다.
export default connect(mapStateToProps)(Header);

 

 

Site 구축 연습 중에 정리차원의 지극히 개인적인 내용입니다.

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




'Web > React' 카테고리의 다른 글

[React] React for ECommerce Site with Redux 1  (0) 2020.01.30
[Web/React] React info ...  (0) 2020.01.29
[React] npm packages and Database info in blog site  (0) 2019.12.19
[React] React 정리  (0) 2018.02.19
Posted by woojja

댓글을 달아 주세요