react 썸네일형 리스트형 [React] create-react-app 설치하기 create-react-app : 리액트 개발을 편하게 해주는 도구 앞서 리액트 실습을 할 때 환경 설정을 일일이 해줘야 했다. 굉장히 번거롭다. 이를 해결하기 위해 create-react-app을 설치하면 리액트가 적용되어 있는 상태로 개발을 시작할 수 있다. 설치 과정 1. 사전준비물 : Node.js, npm, VS Code 설치가 되어있어야 한다. 2. 다음 명령어를 VS CODE 터미널에 입력한다. npx create-react-app 는 쓰지 않아도 된다. 그냥 만들고 싶은 이름만 입력하면 됨. 3. 명령어 실행시 to proceed ? (y) 가 나온다. 입력창에 y를 입력하고 엔터. 4. 설치가 끝나면 친절하게 명령어를 안내해준다. 5. cd tmdgh-web , npm start를 순서대.. 더보기 [React] 리액트의 정의. 웹사이트에 React.js 추가하기 리액트의 정의 리액트란 무엇일까? 리액트 공식 웹사이트에서 이렇게 정의하고 있다. A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리다. 라이브러리(Library)는 영어로 도서관을 뜻한다. 프로그래밍 언어에서 라이브러리는 자주 사용되는 기능을 정리해 모아 놓은 것을 뜻한다. 도서관이랑 비슷한 개념이다. UI(User Interface)는 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것이다. 지금 보는 화면도 UI다. 웹사이트의 경우 버튼, 텍스트 입력창 등이 모두 사용자 인터페이스다. 버튼 누르면 반응하고 특정 페이지가 나타난다. 이런 기능을 모아둔 곳이.. 더보기 [Web] SPA란 무엇인가? MPA와 비교하기 SPA란 무엇인가? 리액트를 공부하려면 기본적으로 알아야 할 Web 지식이 있다. 그중 하나가 SPA와 MPA다. 우리가 웹사이트에 접속해서 탐색할 때를 생각해 보자. 아래는 내가 좋아하는 경제 사이트다. 사이트에 접속하면 main 화면이 나오는데 index.html이 연결되어 있는 것을 볼 수 있다. 밑에 경제 버튼을 클릭하면 m_see.html로 변경되는 것도 확인할 수 있다. 이 사이트는 수많은 html 자료로 구성된 오래된 웹사이트다. 이를 MPA라 부른다. 버튼, 탭을 누르면 페이지를 이동하게 되는데 그때마다 페이지가 바뀐다. 각 페이지별로 HTML파일이 존재하며, 페이지를 이동하면 브라우저에서 해당 페이지의 HTML파일을 받아와서 화면에 표시한다. 이 사이트를 만드신 분은 수많은 html파일을.. 더보기 이전 1 다음
