Grace's Tech Blog

Oct 24, 2020에 Main 페이지(이 때도 아직까지 page와 컴포넌트의 경계를 헷갈리고 있었다.)에서 Login컴포넌트, Mypage컴포넌트, Signup컴포넌트 가 아래에 누적되어 나타난다는 피드백을 받았다. 문제는 각각으로 라우팅을 해주지 않고, 그냥 바로 Main 컴포넌트 내에 Login컴포넌트, Mypage컴포넌트, Signup컴포넌트를 직접 작성해주었기 때문이었다. 그래서 Oct 24, 2020에 대대적인(ㅋㅋ) 라우팅 작업을 진행해주었다. github.com/codestates/SAFU-client/pull/51 그런데 큰 그림을 보지 않고 한 탓인지 계속해서 라우팅 시마다 고려해줘야 할 것들이 생겨났고, 라우팅이 정리가 되지 않고 복잡하다보니 리다이렉트 시에도 꼬이는 문제가 발생했다..

벌써 Bare Minimum을 마무리 하기로 한 31일이 일주일도 채 남지 않았다. 제목은 통일성있게 맞추려하다보니 이라고 지었지만 저것만 한 것은 아니다. Client와 Server의 통신이 바로바로 확인 되고 두 파트 모두 마무리가 되는 것을 확인해봐야 다음 기능 구현으로 넘어가기에도 수월하다는 것을 프로젝트 초반부터 깨달았고, 그러다보니 양 쪽 파트의 PR사항을 그날그날 코드 리뷰하느라 여기에도 코드 작업하는 시간 만큼 쓰이는 것 같다. 양 쪽 파트를 모두 코드리뷰하는 것은 정말 좋다. Client 파트를 맡아서 Server구현을 프로젝트가 진행되는 한 달간 못(?) 하게 되어 잊어버리면 어떡하지? 라는 걱정이 있었는데 코드리뷰를 통해 이 걱정은 할 필요가 없게 되었다. 또 블로그를 통해 각 기능에..

10/17~10/20까지 Signup 컴포넌트 구현과 Server API를 코드리뷰 하면서 일단 1차로 마무리를 시켰다. 여기서 회원가입이 완료되면 Login 컴포넌트로 Redirect가 되어야하는데 아직 Login 컴포넌트가 완성이 되지 않아서 이를 새로운 이슈카드로 빼놓고 일단 PR & upstream-client로 merge 까지 해 놓은 상태였다. 10/21~ 부터 Login/Logout 컴포넌트 기능 구현 작업에 들어갔다. 의 해야 할 것은 login 컴포넌트 틀 잡기 일반 로그인 구현 log in 버튼 누르면 -> redirect -> (logged) main 페이지 회원이 아니신가요? Sign up 버튼 누르면 -> redirect -> Sign up 페이지 findId 버튼 누르면 -> r..

처음 맡게 된 기능 구현 이슈카드는 였다. 해야할 것은 회원가입 컴포넌트 틀 구성 아이디, 이메일 유효성 검사 제출하기 버튼 -> redirect -> login 페이지 1. 회원가입 컴포넌트 틀 구성 - (Oct 17~18, 2020) 회고 회원가입 컴포넌트 틀을 짜는 것은 거의 HTML 같으니까 뭐... 라고 생각했지만 와 그리고 만 쓰고 있는 나 자신을 발견했다. 시멘틱 마크업이 뭐길래? 아무튼 배우고 싶고 배워야 할 건 너어무 많다. - 라는 강의가 있는데, 수강하고 싶다. 더보기 youtu.be/jOzR83vixsE 아무튼 예전에 HTML 태그 복습 해놓은게 있어서 그나마 다행이었다. 2. 아이디, 이메일 유효성 검사 - (Oct 18~19, 2020) 회고 아이디는 2개, 비밀번호는 1개의 유..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞선 27. Redux - Redux의 작동방식2. React-Redux를 통해 상태 사용하기 을 통해 1. Presentational 컴포넌트, Container 컴포넌트 로 구분하고 2. Container 컴포넌트의 Props에 Connect( ) 함수를 사용하여 State값을 연결시켜주고 나면, 해당 컴포넌트는 Store로부터 State를 사용할 수 있게 되는 것 까지 정리해보았다. 이제 Store로부터 State를 사용할 수 있도록 Props에 받아오는 것까지는 했으니, State를 변경하고,그 변경된 것이 화면 UI에 나타나는 것을 할 차례이다. 다시말해 "리듀..

지금까지 1. State와 Store의 역할을 알아보고 2. Action, Reducer을 정의하여서 스토어에 해당 상태를 저장할 수 잇도록 리듀서와 스토어를 연결하는것 까지 알아보았다. 여기서는 Redux의 Store에 있는 State를 React를 통해 사용하는 것에 대해 배운 것을 정리해보도록 하겠다. https://ko.redux.js.org/basics/usage-with-react/ React와 함께 사용하기 | Redux 기초 강좌 > React와 함께 사용하기: How to use Redux with React components ko.redux.js.org 1. Redux를 도입한 React component의 한계와 Presentational 컴포넌트와 Container 컴포넌트 분리 ..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서서 Redux에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징을 살펴보았다. 여기서는 Redux을 배우고, 활용할 때 등장하는 State, Store, reducer,action등의 역할과 서로 어떻게 연관되어 작동하게 되는지를 정리해보고자 한다. 1. State(상태) React를 배울 때 처음 접한 State는 컴포넌트 내부적을 사용하는 데이터의 집합이다. 유튜브라면, 상태는 재생되고 있는 비디오 정보, 화면 비디오 리스트에 출력되는 비디오들의 정보, 다크모드 여부, 등이 될 수 있다. 앞선 유튜브 클론 코딩을 통해 state는 어떤 ev..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) Intro & Redux란 앞서서 22-24번 포스팅을 통해 React를 배웠고, React Sprint -유튜브 클론 코딩을 진행했다. 아래는 미로 에서 제가 짠 유튜브 클론 코딩의 컴포넌트 구성을 나타낸 것이다. (컴포넌트 시각화를 트리 구조로 짜는 것이 편하다는 것을 몰랐다는 것을 감안하더라도 너무 복잡..) 실제로 유튜브 클론 코딩을 하면서 가장 많은 시간을 쓰고 고민하고 힘들었던 점이 'state 끌어올리기'였다. 한 예를 들면, App에 있는 state인 currentVideo와 함수인 handleVideoListEntryTitleClick을 props형태로 ..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 5. State & Lifecyclev 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 6. Handling Events 에 대해서 정리해볼 것이다. React의 주요 개념들 6) Handling Events 앞에서 정리한 순서대로 ' react 개발환경 설치 → Component 제작 → Props의 사용 → state의 사용' 등을 해서 이런 결과창을 띄우는 것 까지 했다고 가정해보자. 그런데 아무런 event를 등록 해주지 않아서, 리스트에 각각의 링크를 클릭 하더라도 아무 일도 일어나지 않는다. 그래서 지금부터는 R..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 4. Component와 Pros 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 5. State & Lifecycle 에 대해서 정리해볼 것이다. React의 주요 개념들 5) State & Lifecycle 1. State 이전 Component와 Pros를 정리한 포스트에서 " name='Sara', name='Grace'에 해당하는 props는 읽기 전용값으로, 함수 component나 클래스 component 모두 component의 자체 props를 수정해서는 안 된다. 그래서 React에서는 State를 통해 ..