이제 코드에 관한 이야기를 해볼까 한다.(굉장히 오랜만이다.) 과제에서는 모든 사용자는 42인트라넷의 OAuth를 통해서 로그인해야 한다고 명시되어 있다. 우리는 차후 배포 해볼 계획도 가지고 있어서 구글 소셜 로그인도 함께 구현을 했다. OAuth OAuth는 "Open Authorization"의 약자로, 사용자가 제3자 애플리케이션에 자신의 정보에 대한 일정한 접근 권한을 부여할 수 있게 해주는 표준 프로토콜이다. 이를 통해 사용자는 자신의 하나의 계정 정보로 다양한 서비스와 애플리케이션에 로그인하고 특정한 정보나 기능에 접근할 수 있게 된다. OAuth 기본 원리 리소스 소유자(Resource Owner): 데이터의 실제 소유자, 여기서는 42 카뎃이 된다. 클라이언트(Client): 사용자의 정..
드디어 42서울의 이너서클의 마지막 과제에 도달했다. 이번에는 과제 완료 후 정리해서 쓰는것이 아닌, 부분적으로 새로 배운 것이나 적용해본 것들을 위주로 글을 써볼까 싶다. 먼저, 우리 팀은 7월 초부터 프로젝트를 시작했다. 웹 프로젝트를 어떻게 시작해야하는지 모르겠어서 주변 사람들에게 도움을 좀 받았었다. 고맙게도 여러 조언들을 들을 수 있었고, 그 중에서도 여러 사람들이 공통적으로 조언을 했던 부분은 "설계"였다. 설계를 잘 하자 설계를 잘 하자는 말은 사실 42서울 과제를 하다보면 매번 듣는 말이었다. 하지만 개인 과제를 할 때는 뭔가 "하다보면 답이 나오겠지" 라는 생각으로 설계를 조금 소홀히 했었다. 그래서 막상 과제를 끝내고 코드를 다시 보면... ㅎ 점점 상위 과제를 할 수록 팀 프로젝트의 ..
Recoil 레퍼런스를 토대로 진행했습니다. Recoil A state management library for React. recoiljs.org 리코일 사용해보기 전편에 이어서.. 리코일 사용해보기 - 1 [React/Recoil/typescript] Recoil 레퍼런스를 토대로 진행했습니다. Recoil A state management library for React. recoiljs.org 리코일(Recoil) 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 woongtech.tistory.com 이번에는 간단한 todo 리스트 애플리케이션을 제작할 예정이다. 애플리케이션은 다음 기능을 수행한다. todo 아이템 추가 todo 아이템 수정 tod..
Recoil 레퍼런스를 토대로 진행했습니다. Recoil A state management library for React. recoiljs.org 리코일(Recoil) 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. 그러나 React는 다음과 같은 한계가 있다. 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유될 수 있으며, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 말단(state가 사용되는 ..
이전 게시글에 이어서.. 리액트 리덕스 상태관리 - 1 [react/redux/typescript] 리액트에서 리덕스의 사용은 상태 관리를 효율적으로 할 수 있다는 점이다. 리덕스는 상태를 중앙 집중적으로 관리하고 변경 사항을 예측 가능한 방식으로 다룬다. 여러 컴포넌트에서 공유해야 woongtech.tistory.com 컨테이너 컴포넌트 생성 컴포넌트 리덕스 스토어에 접근해 원하는 상태를 받아오고, 또 액션도 디스패치할 것이다. 리덕스 스토어와 연동된 컴포넌트를 컨테이너 컴포넌트라고 부른다. CounterContainer 만들기 src 디렉토리 내에 containers 디렉토리를 생성한 뒤, CounterContainer 컴포넌트를 만들자. import Counter from "../components..
리액트에서 리덕스의 사용은 상태 관리를 효율적으로 할 수 있다는 점이다. 리덕스는 상태를 중앙 집중적으로 관리하고 변경 사항을 예측 가능한 방식으로 다룬다. 여러 컴포넌트에서 공유해야 하는 데이터를 중앙에서 관리하면, 컴포넌트 간의 데이터 흐름이 단순화된다. 데이터를 컴포넌트 트리를 따라 전달하는 대신, 컴포넌트는 필요할 때 데이터를 구독하고 업데이트를 수신한다. 이를 통해 애플리케이션의 전반적인 복잡도를 줄이고 디버깅을 용이하게 만들 수 있다. 또한, 리덕스는 애플리케이션의 상태를 일관된 방식으로 업데이트한다. 상태 변경을 위해 액션(action)을 사용하고, 상태를 변경하는 로직을 순수한 함수인 리듀서(reducer)로 분리한다. 이러한 방식은 애플리케이션에서 발생하는 상태 변화를 예측 가능하게 하고..
리덕스란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 이용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 리덕스는 전역 상태 관리를 지원하며, 단방향 데이터 흐름을 따른다. 이는 애플리케이션에서 상태를 변경할 때, 컴포넌트에서 발생한 이벤트가 아닌, 액션(Action)을 발생시켜 상태를 변경한다. 액션은 일종의 객체이며, 해당 객체는 상태를 변경하는 데 필요한 정보를 가지고 있다. 예를 들어, 사용자가 로그인하는 경우, 로그인 액션은 사용자 정보를 가진 객체를 생성한다. 액션을 생성한 후, 이를 리듀서(R..
Context API는 리액트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리액트 애플리케이션에서 여러 컴포넌트에서 공유해야 할 상태나 함수등의 값을 트리 구조 상에서 상위에서 하위로 props를 전달하지 않고, 직접적으로 하위 컴포넌트에서 접근할 수 있도록 도와준다. Context API는 createContext 라는 함수로 생성한다. createContext 함수는 provider와 consumer를 생성한다. provider는 context를 생성하고, 해당 컴포넌트 내의 모든 하위 컴포넌트에서 해당 context에 접근할 수 있도록 한다. consumer는 context를 사용해 값을 가져오는 함수이다. Context API를 사용하면 props 전달을 줄일 수 있어 코드의 가독성을..
