목록FrontEnd/React (3)
The Debugging Chronicles : "코드의 미학"
자바스크립트에서 태그 하나를 DOM이라고 한다.그리고 DOM은 각 각 가지고 가지고 있는 속성을 Property라고 한다. 그런 propety 들이 모여있는 것을 가지고 온것을 Props라고 한다. 그래서 props는 태그가 가지고 있는 속성을 이야기한다. 그럼 props를 어떻게 보내고 가지고 올까? 그림으로 먼저 살펴 보자 A라는 사람의 정보를 컨테이너에서 컴포넌트로 보낸다고 생각해보자 그리고 B라는 사람이 있다고 생각해보자. 그럼 컴포넌트를 만들어서또 정보를 바꿔서 보내줘야한다.또 C라는 사람이 있다면? 그래서 차라리 정보를 변수로 전달하는 것이다. 만약에 홍길동이 값이 들어 왔을 때변수가 인식해서 사용자에게 값만 바꿔서 전달하는 것이다. 컴포넌트는 재사용하고 값이 들어온 것을 그대로 보여주자..
리액트 컴포넌트를 생성할 때 마다직접 작성하기 힘들다 이런 상용구를 단축키로 간편하게 만들 수 있는 extension이다. 확장 프로그램 이름은 Reactjs code snippets 제작자가 charalampos karypidis인 것을 설치하면 된다. 단축키를 살펴 보자면 tirggercontentrsc화살표 함수형 컴포넌트 생성rsf함수형 컴포넌트 생성rcc클래스 컴포넌트 생성rrc클래스 컴포넌트와 react-redux 리덕스를 연결하여 생성rcjcimport와 export 없이 클래스 컴포넌트 생성rwwwdimport 없이 클래스 컴포넌트 생성 rsc를 주로 많이 사용한다.! rsc 치고 tab을 누르면 짠하고 나타난다. 단축키의 더 자세한 내용은 Details에서 확인할 수 있다.
dependencies는 의존성 파일을 이야기 한다.설치되어 있는 라이브러리들의 키 값을 이야기 한다.node modules 폴더 안에는 라이브러리들이 설치 되어있는데해당 폴더는 용량이 크기 때문에 공유하지 않는다. 따라서 npm i or npm install 이라는 명령어를 치게 되면package.json 의 dependencies에 명시되어 있는 라이브러리들을 알아서 설치가 된다.(node_modules폴더가 생성) 그리고 npm 명령어는 script 안에 있다.그래서 npm start는바로 이것을 이야기한다. 단 npm start를 제외하고는 build,test,eject는 run을 적어줘야한다. build는 실제로 배포하기 전에 번들링을 한 상태로 폴더가 만들어진다.그러면 그 빌드 폴더만 배포하..