리다기 정리15(프론트엔드 프로젝트 : 시작 및 회원 인증 구현)

yarn create react-app blog-fronted

아래 방법으로 두 프로젝트 한꺼번에 관리(blog폴더로 관리하는 것 보다 자동 import 더욱 완벽)

 

yarn add react-router-dom

yarn add redux react-redux redux-actions immer redux-devtools-extension

 

snippet-generator.app/

snippet generator

snippet을 만드는 법

원하는 코드를 입력하고 바뀌는 내용을 ${TM_FILENAME_BASE}으로 입력한다.

${1}을 넣으면 그곳에 커서

임의로 왼쪽위에 Styled React Functional Component    srfc를 입력

왼쪽은 설명, 오른쪽은 단축어

하고 오른쪽 내용 복사

사용자 코드조각을 선택한 후

javascriptreact 입력하면 javascriptreact.json파일이 나오는데 거기에 위에 복사한 내용 붙여넣기

 

아래 내용이 빨간색네모안처럼 javascript면 사용할 수 없어. 그 부분을 클릭한 뒤

.js에 대한 파일연결구성>javascriptreact 선택

 

이제 srfc라고 입력한 뒤 enter를 누르면 코드가 자동으로 생성

 

프록시

package.json

  "proxy": "http://localhost:4000/"

 

 

      <PostContent

        dangerouslySetInnerHTML={{ __html: '<p>HTML <b>내용</b>입니다.</p>' }}

      />

 

 

27

postActionButton 컴포넌트를 PostViewr에서 직접 렌더링하면 나중에 onEdi, onRemove 등의 props를 전달할 때 무조건 PostViewer를 거쳐서 전달해야 합니다. 이 방법이 틀린것은 아니지만 자칫하면 컴포넌트가 받아오는 props가 너무 많아져 관리하기가 어려워질 수 있다.

이 방법이 싫다면 두가지 방법 고려

첫번째 : PostActionButtons의 컨테이너 컴포넌트를 만들고 PostViewer 내부에서 바로 렌더링하는 것

두번째 : props를 JSX 형태로 받아와서 렌더링 하는 것

책은 두번째