Air's blog

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

https://reactrouter.com/en/main/start/tutorial Tutorial v6.5.0 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in th reactrouter.com 지난번에 리액트 따라하기 책을 통해 연습을 해보다가, Router 부분이 해결되지 않았었다. 무언가 빠진것인지 아니면..

리액트... 그냥 인터넷만 보고 공부를 해보다가, 한계가 왔었다. 누구는 이렇게 알려주고 누구는 저렇게 알려주고... 그래서 예전 PHP 공부할 때 처럼 클론코딩을 해보기 위해 "클론코딩" 관련 책을 구매했다. 종종 보는 노마드 코더 니꼴라스님의 책이었다. 일단, 매우 쉽게 잘 가르쳐주신 부분 매우 좋았다. 깃은 예전에 잠깐 잠깐 보긴 했지만, 처음 셋팅하고 올리는 과정 사실 그게 제일 필요했는데, 그부분이 간단하지만 아주 좋았다. 딱 내가 바라는 스타일이 었다. 하지만 문제가 있었다. 알고보니 2년전 책이었던 것이다. 라우터 부분에서 문제가 생겼다. 기본적으로 사이트에서 가장 중요하다고 보는 것이 데이터를 날리고 받아오는 것, 그리고 링크다. 라우터는 링크와 관계된 부분이었다. 아직 해결하지 못했다. ..

웹을 사용하다 보면, 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. 미리보기 실행(개발현황을 크롬브라우저로 여는 ..