본문 바로가기

전체 글66

React 파일 생성 후 탐색하기... 리액트를 이용해서 파일을 생성했더니 파일 확장자가 App.jsx와 main.jsx 등 js가 아닌 jsx로 써있었다. jsx는 쉽게 얘기해서 HTML코드를 자바스크립트에 포함시킨 것이다. 코드들은 브라우저가 지원하지 않고 내부적으로 변환이 필요하다! css 파일 또한 자바스크립트 파일로 import 되있는 코드가 있기에 프로젝트가 알아서 내부적으로 변환을 해준다. 더 자세히 살펴보자면 이 main.jsx 파일을 보면 React, ReactDOM에서 각각 'react', 'react-dom/client'를 import 하는데 이 라이브러리는 package.json 파일을 보면 알 수 있다. Node.js가 이 package.json 파일을 이용한다. (프로젝트의 의존성 관리) 그리고 다시 main.jsx .. 2023. 12. 26.
React.js vs Vanilla.js 사람들은 리액트를 무조건 써야지!!!! 하지만 왜 써야하는지는 정작 물어보면 잘 알지 못한다. 나도 그랬었다. 그래서 오늘 알아볼 것은 React.js와 Vanilla.js의 차이가 뭔지 비교하면서 왜 React를 써야하는가에 대해서 알아 볼 것이다. 우선 한 줄로 리액트를 말하자면 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다. 근데 이렇다고 해서 왜 리액트를 쓰는가에는 답을 주진 못한다. 대표적으로 리액트를 쓰는 사이트를 보면 넷플릭스 같은 곳이 있다. 넷플릭스는 화면 전환이 매우 부드럽고 페이지를 로딩하는 것 같지 않고 빠르게 화면 전환이 되는걸 알 수 있다. 그 이유는 리액트는 SPA(Single Page Application)이기 때문이다. 말 그대로 하나의 페이지로 만든 어플이기 때.. 2023. 12. 26.