Air's blog

조코딩 영상의 추천으로 udemy 에서 리액트 강좌를 듣기 시작했다. 2023년 1월 5일까지 할인도 진행되었던 관계로, 12000원이라는 비용으로 "[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript" 라는 제목의 강좌를 구매했다. 총 31개의 섹션에 강의번호가 507번까지 존재하는 어마어마한 분량의 강좌였다. 거기에 프로그램이 업데이트 되면, 강좌 내용도 업데이트 된다고하니 안사고 베길 수가 없었다. 지금까지 구매했거나 인터넷에서 배웠던 모든 React 강좌에서 막힘이 존재했었기에 어느정도 이해가 되면서도 막상 내 프로젝트를 하기엔 부족함을 느끼고 있었는데.. 이제 겨우 섹션4까지 끝낸 내가, 내 프로젝트 시작을 고민하기 시작하게 했으니 말 다하지 않았나 싶다..

웹을 사용하다 보면, x 를 누르면 자연스럽게 사라지는 창을 쉽게 볼 수 있다. 팝업창인 경우도 있고, 그렇지 않은 경우도 있는데, React 에서는 Reactstrap 의 UncontrolledAlert 를 사용해서 이뤄낼 수 있다. 소스는 다음과 같다. import React from 'react'; import { UncontrolledAlert } from 'reactstrap'; function App(){ return( 내용작성 ) } export default App; 컬러 속성은 primary, secondary, success, danger, warning, info, light, dark 가 있다. 리액트에서도 Carousel 즉 자동으로 다른 배너로 교체되는 방식의 디자인을 손쉽게 짤..

1. nodejs 설치 nodejs.org 접속 Recommended For Most Users 버전 설치 2. 프로젝트 생성 C:\>npx create-react-app 만들폴더명 만약 "만들폴더명" 을 newsite 라고 정했다면, newsite 폴더가 생기고 아래에 다음과 같은 파일들이 생성될 것이다. newsite >node_modules >public >src .gitignore package-lock.json package.json README.md 이 상태가 되면 사실상 React 를 구동할 수 있는 가장 기본적인 상태가 된다. 리엑트를 실행시켜 브라우저에 띄워보자 3. 생성된 폴더명으로 이동 C:\>cd newsite C:\newsite> 4. 미리보기 실행(개발현황을 크롬브라우저로 여는 ..