프론트엔드 정복하기

함수형 컴포넌트 vs 클래스 컴포넌트 https://overreacted.io/ko/how-are-function-components-different-from-classes/

css import를 활용

★★★★컴포넌트는 대문자로 시작해야 한다.

1. html의 정상 작동을 도와줌 : React에서는 html이 아닌 JSX를 사용한다. 따라서 2개 이상의 컴포넌트 등을 그룹화 하기 위해서는 반드시 나 로 묶어줘야 한다. 2. key가 있을 수 있어, map 배열에 쓰인다. ex) 참고사이트 https://a-tothe-z.tistory.com/26

0. JSX 문법이란? -Javascript 안에서 html 문법을 사용하도록 함. 0. class -html에서 > class -jsx > className 0. css 적용 -style ={{ }} 0. import 중괄호 or not -import { user } from user : just export -import User from user : export default 한 것 0. 상대경로 1) 확장자를 붙이지 않아도 된다. (자동으로 붙여준다.) 2) 상대경로 작성방법 : 같은 폴더 안에 있는 경우 : ' ./ ' 로 시작 : 바깥에 있는 것은 : ../ : ' ./ ' 를 붙이지 않으면 NodeJS 라이브러리에서 모듈을 찾는다. : 모듈도 불러올 수 있다? module.exports 한 ..

[ Role에 따라 진입 가능한 페이지가 다름 ] -아무나 진입 가능한 페이지 : Landing Page, About Page -로그인한 회원만 진입 : Detail Page -로그인한 회원은 진입x : Register Page, Login Page -관리자만 진입 : Adimin Page **로그인 한 유저만 댓글, 글 작성 등이 가능함 [ HOC ] : Higher Order Component : 다른 compo를 받아서 새로운 compo를 리턴함. const EnhancedComponent = higherOrderComponent( WrappedComponent ) Auth (HOC) 안에 >> Landing Page, Login Page 등을 포함시킴 back end에 > auth 정보를 보내고 ..