728x90 반응형 NPM4 WEB 만들기 - 17 구조 설명 Create React App구조(Structure) Client 안에 있는 것이 create-react-app 하면서 생성된것 인데 client폴더에 가서 npm run start를 하면 되는 이유는 package.json 부분에 스크립트 부분에 "start"라고 되어있어서 명령을 npm run start라고 하는것이다. 우리가 이것을 "init"라고 바꾸면 npm run init 로 시작할 수 있는것입니다. 이렇게 시작을 하게 되면 화면에 이렇게 나옵니다. 이부분이 나오는 부분이 App.js 부분인데 이것에 써놓은것들이 화면에 표시가 되는 것 입니다. 그리고 index.js 부분을 보게되면 여기서 App.js가 컴포넌트로 들어간게 보이는데 여기서 ReactDOM.render( , document.ge.. 2021. 1. 20. WEB 만들기 - 16 NPM? NPX? NPM(Node Package Management)은 레지스트리 저장소 역활을한다. 지금까지 우리가 dependencies 쪽에 저장되는 라이브러리가 저장되어있는곳을 말한다. 애플리케이션을 켤때 npm run start나 배포를 할때 빌드를 해서 배포를 해야하는데 이때 npm run build 할때쓴다. 이처럼 이런 이름이 뭐고 스크립트는 뭐고 어떤게 다운되어있는지 나와있다. 그리고 우리가 npm install ``` 하면서 설치를 할때는 로컬로 다운이되는 Locally로 . 로컬에 다운하면 이곳에 다운이되는것이고 npm install ``` -g 를 하면 Grobally 글로벌로 되는데 프로젝트가 아닌 bin/directort인 윈도우는 %AppData%/npm에 저장이 된다고 생각하면되고 맥의 경우는.. 2021. 1. 19. WEB 만들기 15 - Create React App 예전에 리액트 앱을 처음 실행하려면 Babel이나 Webpack을 설정하기 위해서 많은 시간이 걸렸다. 하지만 이제는 create-react-app Command로 바로 시작할 수 있습니다. Babel 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수 있게 해주는것을 말한다. Webpack 이걸을 통해 저런것을 묶어주는 bundle을 시킨다. 이런식으로 폴더로 서버와 클라이언트를 구분해주고 cd client로 해서 client쪽으로 들어간후에 npx create-react-app . 해줍니다. 이렇게 해주고 여기서 지금까지 npm을 했는데 npm은 뭐고 npx는 무엇인지 생각할 수 있다. 다음에 알려드리겠습니다. 2021. 1. 19. WEB 만들기 14 - 리액트란? 프론트의 시작 React JS 페이스북에서 만들어졌고 2013에 발표 Components로 module과 비슷하게 컴포넘트로 이뤄져 있어서 reusable이 뛰어납니다. 한파일에 모듈화 컴포넘트화 하면 편하게 쓸수 있다. Real Dom과 virual Dom Real Dom은 10개의 리스트가 있을대 한가지의 리스트가 업데이트 되었다고 하자. 그러면 그 전체 리스트를 다시 리로드(Reload) 해줘야한다. 그래서 super expensive한 작업이 된다. virual Dom에서는 하나가 바뀌면 그 하나만 새로 가져올 수 있다. 어떻게 한개만 바꿀수 있는지? 이 리스트들을 스냅샷으로 찍어놓고 스냅샷 찍은거랑 새로 살펴본것에서 차이 분석해서 그 부분만 realDom에서 바꿔주는것이다. Virual Domd.. 2021. 1. 19. 이전 1 다음 728x90 반응형
