이제껏 java, spring 프레임워크, jsp로만 웹을 구축했었는데 취준하다 한계를 느꼈다. 괜찮아 보이고 트렌디해보이는 중소기업, 스타트업들은 하나도 빠.짐.없.이 리액트 개발자를 구한다.그래서 리액트 기초 강의 되는대로 다 줍줍하고 있는 중... 리액트 개발 환경설정을 하면서 node.js를 다운받았는데, 그에 대해서도 공부하고자 카테고리도 생성했고 첫글 기념으로 가벼운 글?도 한번 써본다... node.js를 이용한 웹사이트 구축에는 무엇이 필요한지 알아보자 (feat. 챗지피티) Node.js를 이용하여 웹사이트 개발을 위한 기술 스택1. 백엔드 : Node.js + ExpressNode.js 는 JavaScript로 서버를 개발할 수 있게 해주는 런타임Express.js 는 가장 많이 ..
[React] 카운터 앱을 만들어보자
아주 쉬운 예제지만 컴포넌트에 익숙해지기 위해 만들어보았다. 구현화면 App.jsx import React, { useState } from 'react'import './App.css'import Counter from './pages/Counter'function App() { const [count, setCount] = useState(0); const handleCount = (value) =>{ setCount(count+value); } return ( main> div>counter를 구현해보자div> Counter count={count} handleCount={handleCount} /> main> )}export default App..
[React] 리액트의 라우팅 처리
서론네비게이션의 특정 메뉴를 클릭하면 해당 페이지로 이동하는게 기본적인 웹사이트의 형태이다. 그런데 리액트는 SPA (Single Page Application)으로,메뉴를 클릭할 때마다 서버에서 새로운 페이지가 날아오는 개념이 아니다. 실제는 index.html 파일 하나인데,이 html 파일에서 필요한 부분만 자바스크립트를 통해 바꿔나가는 형태로 이루어진다.이러한 방식을 클라이언트 사이드 렌더링(CSR) 이라 한다.(서버가 파일을 호출하는 게 아니라 클라이언트에서 자바스크립트로 페이지 전환을 하는 방식) 리액트에서는 메뉴를 클릭할 때마다index.html에 특정 컴포넌트가 보이게 바꿔치기 해주고, 그에 맞게 URL을 변경해준다. 브라우저의 URL이 바뀔 때마다, 보여줄 컴포넌트를 맵핑하고 렌더링하..