✏️

react를 npm start 해서 작업할때 용량이 큰편 그런데 build를 하면 용량이 줄어든다고 해서 해본다 1. 리액트 프로젝트 폴더 위치에서 터미널에 npm run build 명령어를 입력한다. 2. npm install -g serve serve -s build 위 명령어를 모두 입력하면 이런 serving! 메시지가 나온다. build 전/후 용량 차이를 비교해보면 왼쪽이 build 전 오른쪽이 build 후

1. 프로젝트 폴더 생성 2. npx create-react-app client 3. cd client 4. npm start client라는 리액트 프로젝트 폴더를 만들어서 npm start 명령어를 입력하면 localhost:3000 포트로 리액트 프로젝트가 열린다. (node.js가 설치된 상태에서 npx명령어 입력 가능) ex) 1004_DISPLAY라는 프로젝트 폴더에 npx ... 명령어로 client 폴더를 생성한 후 불필요한 파일을 삭제한 상태이다. (public에 images폴더는 추가한 것) App.js와 index.js 코드는 위와 같다 :D 초기 세팅 끝! success

JavaScript를 줄여서 JS라고 하고 JSX는 A syntax extension to JavaScript라는 의미이며 해석하면 자바스크립트의 확장 문법 이라는 뜻이다. const element = Hello, world!; 대입연산자 (=)이 나오고 이때 오른쪽 값을 왼쪽 변수에 대입해준다. const element까지는 흔한 JavaScript 문법이지만 오른쪽의 태그는 HTML문법이다. 즉 위 코드는 JavaScript + HTML의 JSX코드이다. 이 코드의 역할 : 태그로 둘러쌓인 문자열을 element라는 변수에 저장하는 것 // JSX를 사용한 코드 const element = { Hello, world! } // JSX를 사용하지 않은 코드 const element = React.cre..

리액트는 무엇인가? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리. 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 사용자 인터페이스 : 사용자와 컴퓨터 프로그램이 상호작용 하기 위한 입출력을 제어해주는 것 / 버튼, 입력창 등 UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음 / 화면을 만들기 위한 기능들을 모아놓은 것 대표적인 UI 라이브버리 : NGULAR JS / React / Vue.js 리액트의 장점 1) 빠른 업데이트 & 렌더링 속도 2) 컴포넌트 기반의 구조 - 재사용성이 높다 - 개발 기간이 단축됨 - 유지보수가 용이함 리액트의 단점 1) 방대한 학습량 2) 변경되는 내용, 새로운 내용이 많음 3) 높은 상태관리 복잡도

React 선수지식 HTML : 웹 사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 HTML에서는 Tag를 사용해 웹사이트의 구조와 내용을 채워넣는다. ex) : 태그는 열었으면 꼭 닫아줘야 함! 태그의 종류 : html의 시작과 끝을 나타냄 : html의 머리부분 - 웹사이트의 속성 (제목, 설명 등 메타데이터) : haed 태그 안에서 웹사이트의 제목을 나타내는 태그 : html의 몸통부분 / head태그 다음에 나오며 웹사이트의 contents가 들어감.(실제로 웹사이트에서 보이는 콘텐츠) 페이지를 이동하게 될 경우 html 파일도 변경됨 복잡한 웹사이트의 경우 html 파일이 아주 많아지게 됨. 관리에 어려움 이 어려움을 해결하기 위해 등장한 것 : Single Page Appl..

리액트로 프로젝트를 하겠다고 마음먹었는데 난 아직 리액트에 대해 잘 모른다. 기초를 다지고 시작해야겠다 생각해서 인강을 찾아보다 인프런에 입문자를 위한 무료 강의가 있는 것을 발견했다. https://inf.run/NE3A [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com 무료이니만큼 바로 수강신청해서 오늘부터 공부 시작!