목록dev-log/react (9)
H-Log
이제 코드를 작성해보자! 처음 app.js를 열면 className = App인 div 안에 뭐가 막 있는데 일단 다 지우고 div하나만 남기고 시작하자 저장하면 이제 흰 화면만 나온다. 그상태로 시작하면 된다! 이전에 사용하던 html과 똑같이 작업하면 되는데,,, 어떻게 js파일인데 어떻게 html이 먹히지?! 싶은데, 사실 우리가 작성할건 html이 아니라 jsx이다 (js에서 html대신 사용할 대용품) 이전에는 js파일 안에서 div를 새로 만들려면 react.createElement('div', null, 'hi hi')와 같이 작성했어야 했다. 하지만 넘 길기도 하고 복잡해보여서 굉장히 사용하기 꺼려졌다... 지금은 jsx를 개발하신 분 덕분에 사용해서 이전 html처럼 간단히 만들 수 있게..
기본적으로 node.js 와 vscode 에디터가 있다는 전제 하에 진행! node package modules을 사용해야하기 때문에 node.js가 필요하다. 작업용 폴더 하나 생성한 후 터미널에 아래 명령어 입력하기 npx create-react-app 프로젝트명 이번 프로젝트는 블로그랍니다. 그래서 npx create-react-app blog로 ㄱㄱㄱ 모든 설치가 끝난 후 폴더를 보면 자동으로 프로젝트 폴더가 생성이 되어있다 그 폴더를 vscode로 가져가서 오픈! blog 폴더가 최상위 폴더여야한당 안그러면 명령어 입력시 오류들이 나당 이처럼 blog라 잘 뜨면 성공 그리고 프로젝트 화면ㄴ을 실시간 미리보기로 보고싶으면 terminal에서 아래 명령어 입력! npm start 화면이 뜬 후 텍스..
첫번째 이유! single page app 형태로 만들기 위해! 페이지 이동 시 깜빡임 없이 부드럽게 이동되어 마치 스마트폰 어플리케이션과 같다. 그래서 '웹앱' 스타일이라고도 한다. 물론 Vanila JS로도 가능은 하다. 다만 코드가 너무 길어지고 복잡해져서 React라는 라이브러리를 사용하는 것! vue, svelte, preact, solidJS 등 비슷한게 많지만 리액트가 가장 오래되고 유저도 가장 많다. 두번째 이유 html 재사용에 용이하다. html 코드를 함수, 객체, 배열 등에 넣어 재사용할 수 있다. 세번째 이유 거의 비슷한 문법으로 모바일 앱 개발을 할 수 있다. 네번째 이유 취업에 아주 아주 용이하다 ^____^