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 그런데 큰 그림을 보지 않고 한 탓인지 계속해서 라우팅 시마다 고려해줘야 할 것들이 생겨났고, 라우팅이 정리가 되지 않고 복잡하다보니 리다이렉트 시에도 꼬이는 문제가 발생했다..

(+ 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를 통해 ..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 필요성과 소개 및 React의 주요 개념 중 1. 기본틀, 2. JSX(JSX으로 Element생성:React.createElement()) , 3. Element (생성된 Element를 DOM으로 rendering: ReactDOM.render()) 에 대해서 알아보았다. 이번에는 React의 주요 개념 중 4. Component와 Pros 에 대해서 정리해볼 것이다. 1. React의 주요 개념들 4) Component와 Pros ① Component란? component는 props라는 입력을 받아서 React element를 return 하는..

1. What is React? 1) React란? React는 Component(하나의 의미를 가진 독립적인 단위 모듈 - 쉽게 말해 나만의 HTML 태그)를 사용하는 사용자 인터페이스를 만들기 위한 프론트엔드 라이브러리이다. 그러니까 주요 단어가, Component, 사용자 인터페이스(UI), 라이브러리 이다. 먼저 사용자 인터페이스는 사용자와 프로그램이 정보를 주고받기 위해 사용자와 프로그램이 상호작용하는 프로그램의 일부분이다. 그리고 라이브러리란, 특정 기능에 대한 API(도구/함수)를 모은 집합니다. (동기이신 SH님께서 쉽게 정리해주신 글을 참고하면) 미리 만들어 둔 여러가지 템플릿을 모아둔 저장소이다. ※ 프레임워크와 라이브러리의 차이점은 여기에.. 그럼 Component는? 위에서 언급했듯..