Project/프리온보딩 (7) 썸네일형 리스트형 [프리온보딩 프론트엔드 챌린지 3월] - ROUTE 수정 (feat. Route Object) 프리온보딩 3월 사전 과제였던 로그인 구현. 과제의 세부 사항으로 여러 개의 페이지가 언제든 추가될 수 있다고 가정하고 페이지 별로 로그인 여부를 판단하고 구조를 확장이 있었다. 이번 게시글에서는 멘토님의 1회 차 강의를 기반으로 사전 과제를 리팩터링 하고자 한다. 로그인 구현을 위한 개념 코드 리팩토링 전 로그인 구현을 위한 개념을 살펴보자. 로그인의 간략한 정의는 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차이다. 이러한 정의를 서비스 관점에서 살펴보면 어떨까? 쇼핑몰 애플리케이션을 이용하는 사용자가 있다 가정해 보자. 이 사용자는 상품을 사고 상품이 너무 마음에 들어 리뷰를 남기고 싶어 한다. 이 경우 사용자를 식별하지 않고 상품에 대한 리뷰를 남기게 해.. [프리온보딩 프론트엔드 챌린지 1월] 사용자 인증 토큰 관리하기 프리온보딩 프로젝트 요구 사항 중 하나인 토큰을 발급받아 로컬스토리지에 저장. 🔥토큰에 대한 개념이 없어 강의에서 멘토님의 말씀에 속으로 ㄹㅇㅋㅋ만 외치던 나, 이번 기회에 공부하고 리액트에 인증 기능을 추가해보려 한다. 인증 대부분의 웹 앱에는 인증 DOM이 필요하며, 해당 인증을 통해 애플리케이션에 접근 가능한 영역들이 있다. 즉, 회원가입과 로그인을 통해 인증을 받아야 접근할 수 있는 부분이 있을 것이다. [ 인증의 필요성 ] 인증이 동작하는 원리를 이해하기 전 인증의 필요성을 이해하면 좋을 것 같다. 인증이 필요한 이유는 보호해야 할 정보가 있기 때문이다. 사이트의 모든 이용자나 방문자가 모든 정보에 접근 권한을 가져선 안되니 인증이 필요하다. 이때 인증을 통해 보호해야 하는 정보는 여러 가지가 .. [프리온보딩 프론트엔드 챌린지 1월] Suspense RFC 톺아보기 프로온보딩 챌린지 프로젝트에 Suspense를 적용해 봤다. 제대로 사용한 것인지 긴가민가한 상황이라 Reactjs RFC를 참고하여 React Suspense에 대해 알아보면 좋을 것 같다는 생각이 든다. GitHub - reactjs/rfcs: RFCs for changes to React RFCs for changes to React. Contribute to reactjs/rfcs development by creating an account on GitHub. github.com [ Summary ] RFC의 Suspense의 요약을 확인하면 아래와 같다. 동작 변경 : 커밋된 트리는 항상 일관성이 있습니다. 새로운 기능 : 스트리밍을 통한 서버 측 렌더링 지원 새로운 기능 : 기존 내용을 숨기.. [프리온보딩 프론트엔드 챌린지 1월] 비동기 코드 다루기 프리온보딩 챌린지 강의 1회 차 때 멘토님께서 비동기에 대해 살짝궁 말씀하셨다. 아니나 다를까 과제 중 비동기 함수 때문에 애를 먹었다. 이번 회고는 비동기에 대해 간략하게 정리하려 한다. [ 현재 문제 ] getToDo API는 axios를 사용해 DB로 사용하는 firebase와 HTTP 통신을 하여 얻은 for...in 반복문을 사용하여 배열 데이터 데이터로 반환한다. getToDo API를 호출해 반환하는 값을 변수 toDoList에 담았으며, 이후 store에 dispatch하여 반환 값을 저장하려고 했지만, 에러 메시지만 계속 확인할 수 있었다. 때문에 dispatch하기 전 변수 toDoList에 담긴 값을 콘솔로 확인해 봤더니 pending 상태의 Promise를 확인하게 되었다.😨 우선 .. [프리온보딩 프론트엔드 챌린지 1월] 순수 함수 구현 및 코드 리팩토링 프리온보딩 챌린지 과제를 수행 할 때 순수 함수를 사용하려 최대한 고민하면서 진행 중이다. [ 순수 함수 ] 순수 함수란 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수이며, 부수 효과가 없어야 한다. 여기서 말하는 함수의 부수 효과는 외부의 값을 바꿔서는 안되고, 외부에서 값이 변함으로 인해 함수가 영향을 받아서는 안된다. 완벽하게 이해가 되지 않아 이전에 진행 했던 프로젝트를 함께 보며 순수 함수에 대해 정리해보려 했다. 이전 프로젝트 내가 받아 들은 순수 함수는 이렇다. 함수가 외부의 값의 변화에 영향을 받아서는 안된다. 즉, checkedItems의 값이 변하면 해당 함수는 영향을 받게 된다. ✏️ 오히려 함수 handleDelete의 매개 변수에 checkedItems를 전달받아 내부에.. [프리온보딩 프론트엔드 챌린지 1월] 유틸리티 타입으로 수정하기 map 타입, condition 타입 [ map 타입 ] ✏️ map 타입을 사용하면 기존에 있는 타입을 이용하면서 다른 형태로 변환이 가능하다. 예시 코드와 map 타입에 대해 살펴보기 전 아래의 사항을 짚고 넘어가면 좋을 것 같다. 배열의 nicehyun12.tistory.com 최근 타입스크립트의 유틸리티 타입 관련 글을 작성했었다. 해당 게시글을 작성하고 유틸리티 타입에 대해 조금 더 살펴보았고 내가 만든 타입이 조금 부끄러워졌다😭 [ 기존 프로젝트 ] 기존에는 ViewRendering 컴포넌트에서 View 컴포넌트로 ObjectProps의 타입을 위와 같이 명시해서 내려주었다. 이렇게 내려주는 것까지는 괜찮았다. View 컴포넌트에서 하위 컴포넌트로 뿌려줄 때 TodoList 컴포넌트에는 함수 .. [프리온보딩 프론트엔드 챌린지 1월] VAC 패턴 타입스크립트를 배운 지 얼마 되지 않아 프리온보딩 프론트엔드 챌린지에 참여하게 되었다. 챌린지 과제 진행을 위해 여러 정보를 찾아보다가 VAC 패턴에 대해 알게 되었으며, 이 VAC 패턴에 대해 정리해보려 한다. React 관심사 분리 고차 컴포넌트(High Order Component)란? 리액트 공식 문서의 고차 컴포넌트(HOC)에 관한 문서이다. 여기서는 HOC에 대해서는 컴포넌트를 전달받아 새로운 컴포넌트를 반환한다 정도로만 짚고 넘어가면 nicehyun12.tistory.com 이전 게시글 React관심사 분리에서 View와 Model의 분리와 각각의 관심사에 따라 코드를 분리하는 기법인 관심사 분리를 중점으로 정리했었다. [ View와 Model의 분리 ] 우선 view와 model의 분리를 .. 이전 1 다음
