React (17) 썸네일형 리스트형 프로젝트 구조 설명 gitignore파일 여기에 명시되어 있는 폴더나 파일들은 깃 정보가 유지되지 않아요 빌드라는 것은 프로젝트를 실행하면 실행 하기 위해서 만들어지는 임시파일들이 여기에 들어와 있음. 이런 내용을 깃허브에 따로 추적해서 파일들의 버전을 관리할 필요가 없기 때문에 이네 이런 아이들은 깃에 더이상 트레킹하고 싶지 않다, 트레킹하고 싶지 않을 때 gitignore파일에 추가해 줍니다. 그래서 프로젝트를 실행했을 때 부수적으로 생기는 아이들, 버전 관리에 포함이 되면 안되는 아이들을 gitignore파일에 들어가요. package.json npm에서 버전을 관리할 때 즉 내 프로젝트에서 외부적으로 쓰고 있는 라이브러리와 그 버전들이 명시되어있어요. 직접 수정할 일 없어요. 이유는 외부라이브러리를 추가하고 버전 업.. 툴 프로젝트 설치 실행 create-react-app 이툴을 이용해서 프로젝트 설치하고 실행까지 해봅시다. create-react-app.dev/docs/getting-started/ Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 페이스북에서 만든 리액트 개발자들이 공통으로 사용하는 정말 유용한 툴들을 한번에 자동적으로 설치 할 수 있게 도와주는 너무나 유용한 친구입니다. 리액트에서 create-react-app (위에 사이트) 이툴을 권고하고 있어요. 실제로 현업에서는 이렇게 자동으로 하는 것 보다 실제로 필요한 것들을 직접 컨피규레이션해.. nodejs, npm, npx, yarn nodejs - 자바스크립트를 실행할수있는 환경 어느 곳에서나 프로그래밍이 가능하게 하는 프레임워크입니다 예전에 자바스크립트는 브라우저 위에서 동작하는 웹페이지나 웹 어플리케이션을 위해서 작성하는 언어. 이제는 nodejs덕분에 웹브라우저 밖에서도 nodejs환경이 있다면 운영체제 위에서 라든지 우리가 자바스크립트로 코드를 작성하고 실행할 수 있어요. 파이썬으로 우리가 파일을 읽고 여러가지 작업을 하고 스크립트를 작성할 수 있는 것처럼 nodejs를 이용해서 자바스크립트 언어로 우리가 스크립트를 만들 수도 있어요. 즉 운영체제 위에 내 파일을 읽어서 파일을 수정하고 다시 저장하는 이런 일들도 자바스크립트로 충분히 할 수가 있습니다. 그것을 실행할 수 있게 도와주는 것이 nodejs예요. 백엔드 서버를 만.. 환경 tool terminal(cmder.......) nodejs git yarn terminal 간단하게 커맨드로 필요한 기능을 수행하고 nodejs와같이 이런 명령어 단위로 동작하는 아이들을 간단하게 명령어 하나로 필요한 기능을 수행할 수 있기 때문이에요 mac - 기본 터미널 대신에 iterm 윈도우 - iterm2 이런 식으로 cmder 이라는 툴을 이용해도 좋다. 이걸 설치하면 git도 함께 따라온다. cmder.net/ Cmder | Console Emulator Total portability Carry it with you on a USB stick or in the Cloud, so your settings, aliases and history can go anywhere you go. You wil.. react 핵심두가지 1. 컴포넌트들로 이루어진 web UI 를 만들 수 있는 라이브러리이다. 독립적 , 고립, 재사용가능 testablity가 좋다. 꼭 하나의 컴토넌트로 이루어져 있다. 최상위 컴포넌트를 root라고 부른다. HTML dom tree로 이루어져서 우리 코드를 브라우저가 알아듣고 화면에 보여준다 cohesive 박스단위로 페이지를 바라보기 너무 작은 단위로 박스를 나눌필요는 없고 재사용할 다위 2. state변경될 때 마다 render함수를 계속 호출한다. 그럼에도 성능이 괜찮은 이유는 react에서 가상의 dom tree 를 메모리에 가지고 있다가 한번에 모았다가 정말 dom tree에 업데이트 함. (rerender the whole app on every update) 리액트 훅 함수형 컴포넌트 문서보.. react는 라이브러리이다 리액트 UI를 만들수 있는 라이브러리입니다. 클릭을하면 이벤트발생 하면 처리하는 일을 할 수 있어요 mvc패턴에서 view레이어를 담당 프레임워크와 라이브러리의 차이점 웹어플리케이션 만들기 집짓기 프레임워크는 이미 갖퉈진 틀안에서 집짓기 라이브러리는 자재부터 다 선택해서 집짓기 프레임워크 - 앵귤러 - 한번에 묶어서 제공함 그걸 이용해서 만들어야 함. 안드 운영체제에서 만듬 //정해진 골격안에서 만들기 /HTTP Client, UI, -> 호환문제(no breaking 문제가 있다) 라이브러리 - react - 재료도 선택, UI, sstate , routing, 골라서 문서화 잘 되어있음. 커뮤니티에서 이미 해결한 문제들이 많음. View는 프레임워크랑 라이브러리 중간쯤 axios - guide 사이드 https://yamoo9.github.io/axios/guide/api.html API | Axios 러닝 가이드 API 구성(configuration) 설정을axios()에 전달하여 요청할 수 있습니다. axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); 1 2 3 4 5 6 7 8 9 axios({ method:'get', url:'http://bit yamoo9.github.io 5강 final하고 const의 차이, let / final하고 const의 차이, let final readonly 고칠 수 없어요 컴파일언어가 아니고 인터프리터 언어라서 실행 시에 결정이 나야해요. 그래서 실행시에 결정되고나면 readonly로 된다. const 프로그램 시작 시에 읽어서 값을 넣어놔요. 그리고나서 readonly! 그래서 날짜나 현재시간 같은거 를 const에 담지마요. 리엑트에서 var쓰지 말기! 리액트에서는 변하지 않을 값은 무조건 const으로 변수 선언해요. let은 변해야하는 애들만 선언한다. function컴포넌트(후크사용할때)가 있고 class형 컴포넌트있어요 main파일만 class형 컴포넌트로 그 외에는 function컴포넌트 만듭니다. 이렇게 눌렀을때 변수의 값이 바뀌고 바인딩이 되어있는데 render가 호출이 안.. 이전 1 2 3 다음
