컴퓨터 알아가기/React
-
React 기본 : Class형 끝말잇기 Hooks로 전환컴퓨터 알아가기/React 2021. 8. 5. 19:30
본 내용은 ZeroCho TV의 React 무료강의를 기본으로 하고 있습니다. 이제 지난시간 Webpack 폴더까지 같은 내용을 복사하여 새로운 폴더를 만들어 보았습니다. 여기서 필요한 파일을 수정하면서 Class형 Component로 만들어진 끝말잇기 게임을 React Hooks로 전환하는 방법을 공부헤 보도록 하겠습니다. 그럼 Hooks로 바꾸는 파일은 WordRelay.jsx입니다. 일전에 구구단을 Hooks로 바꾸었을때 기본 내역을 생각하고 정리를 해 보도록 하겠습니다. ▒ Hooks의 기본원칙 ① Component 부분을 함수화 시킨다. class 를 const로 바꾸고 Component는 없앱니다. 예를 들어 const WordRelay = ( ) => { }; 이 기본틀이 됩니다. ② sta..
-
React 기본 : 끝말잇기 React Hooks로 전환 (CMD 명령어 익히기)컴퓨터 알아가기/React 2021. 8. 3. 19:30
요즘 React는 Class 형 component대신 Hooks가 대세라고 합니다. 따라서 다시한번 현재까지 만든 Component를 이용한 끝말잇기 프로그램을 Hooks로 바꾸는 과정을 공부해 볼려고 합니다. 지난번 만든 폴더에는 많은 파일과 폴더를 생성하여 Webpack을 실행하였습니다. 에러없이 만들어진 기본 React Webpack이었기에 큰 변화가 없는한 본 파일들을 활용하여 새로운 프로젝트에 적용하는게 편할 듯 합니다. 이런 과정을 거치면 변경하고자하는 파일만 수정을 하면 될 듯 합니다. ▒ CMD 파일 복사 명령어 윈도우탐색기에서 미리 만들어 놓은 폴더를 전체 복사하여 새로운 폴더안에 옮길수도 있으나 React의 폴더 전체를 복사하고 붙혀넣기하는 과정이 시간적으로 많이 소요됩니다. 이에 따라..
-
React 기본 : 웹팩개발서버와 핫리로딩 설치컴퓨터 알아가기/React 2021. 8. 2. 19:30
본 글은 ZeroCho TV님의 React무료강좌를 기본으로 하고 있습니다. 지난시간까지 Webpack을 설치하여 끝말잇기에 대한 프로그램을 해 보았습니다. Webpack의 버전이 높아지면서 설치해야 할 플러그인들이 필요하다고 하네요. 그래서 이번 시간에는 지난시간까지 설치를 하지 않았던 부분을 같이 설치를 해 보도록 하고 개발을 하는데 필요한 개발서버도 같이 설치를 해 보도록 하겠습니다. 개발서버를 설정하는 주된이유는 React Webpack의 가장 중요한 기능중 하나인 핫리로딩이 되게 하기 위함입니다. 핫리로딩은 코딩과 동시에 서버에 반영이 되어 새로고침없이 웹에 바로 표시되는 기능으로 단계별 프로그래밍시 처음부터 재 수정하지 않고 수정되어야야 할 부분을 확인하여 해당 코딩만 수정을 할 수 있는 상당..
-
React 기본: 끝말잇기 프로그램 Webpack Build 및 에러 수정컴퓨터 알아가기/React 2021. 7. 29. 19:30
본 내용은 ZeroCho TV 무료 웹강좌를 기본으로 하고 있으며 스스로 발견한 내용들을 추가하여 정리한 글입니다. 바로 전시간까지는 끝말잇기 프로그램인 WordRelay.jsx 파일에 코딩을 하였습니다. 이미 이 연습문제는 package.json 및 client.jsx와 webpack.config.js파일은 만들어진 상태이며 끝말잇기 로직이 적용되지 않은 WordRelay.jsx 파일을 이용하여 app.js파일을 만들어내는 webpack을 해 본 상태입니다. 이제 끝말잇기 로직을 적용하였고 webpack.config.js에서 module의 rules 가운데 preset-env의 브라우저도 세팅을 했었습니다. 바로 webpack build를 해보겠습니다. 지난시간 한국에서 점유율이 5%이상 브라우저를 타..
-
React 기본 : 끝말잇기 프로그램 만들기 (WordRelay.jsx 파일 만들기)컴퓨터 알아가기/React 2021. 7. 27. 19:30
본 내용은 ZeroCho TV의 무료 웹강좌를 기본으로 정리하고 있는 React 내용입니다. Webpack의 Build도 성공하였으니 다양한 프로그램을 따라 공부하면서 나만의 실력을 키울 첫번째 과정입니다. 여러가지 Package중에서 중요한 역할을 담당하고 있는 webpack.config.js 파일에서 약간 더 보충이 되어야 할 내용이 있어 첨가합니다. ▒ webpack.config.js 파일의 구성요소 지난시간까지는 입력 entry >> module >> output 의 순서로 기억 했습니다. 여기서 좀 더 추가할 부분은 프로그램에 필요한 플러그인이 필요한데 그러기 위해서는 entry >> module >> plugins >> output으로 기억해 놓는게 기본이라고 합니다. 아울러 module에서 ..
-
React 기본 : React Webpack 설치순서 정리 및 초보자에게 가장 많이 나오는 코딩 에러컴퓨터 알아가기/React 2021. 7. 26. 19:30
지난시간 index.html에서 시작하여 React의 기본 package를 수동으로 하나하나 설치함으로써 최종 Webpack 명령어를 사용하여 화면에 출력까지 진행해 보았습니다. 진도를 더 나가기에 앞서 React의 Webpack 설치에 대한 순서를 정리하고 저같이 완전 초보인 사람이 아무리 똑같이 따라해도 에러가 나는 경우가 다반사인데 대부분 어떤 내용이 에러인지 정리를 해보겠습니다. ▒ Webpack 설치순서 관련된 프로그램이 결국 브라우저에 표현되는데 관여하는 파일은 index.html입니다. 여기서부터 다음 순서로 만들어 보는 과정을 갖도록 하겠습니다. 1. Package.json 만들기 Pacjage.json은 Terminal창에서 npm init으로 만듭니다. ① npm init npm ini..
-
React 기본 : React Webpack 빌드하기 (Node 명령어 등록, 웹팩에 Babel 로더 설치)컴퓨터 알아가기/React 2021. 7. 23. 19:30
본 내용은 ZeroCho TV의 무료강좌를 기본으로 하고 있습니다. 지난 2시간은 React의 기본을 몰랐더라도 전체 팩키지가 형성되는 과정을 직접 Key-in 해보면서 이해를 해보았습니다. 이제는 기본적인 Tree가 형성이 되었으니 가장중요한 app.js를 만드는 webpack build를 해보도록 하겠습니다. Webpack Build를 하기 위해서는 명령어인 webpack을 사용하면 됩니다. 그런데 Node에서 자주보는 에러에 대해 설명하고 넘어가야겠습니다. ▒ Node 명령어 등록하기 우선 VS Code Terminal창에서 webpack이라고 타이핑하고 엔터를 쳐보면 다음과 같은 에러메시지가 표시됩니다. 즉, 프로그램으로 인식되지 않는다는 표시는 Node에서 이런 명령어가 등록되어 있지 않다라는 ..
-
React 기본 : React Webpack 기본설정하기(2)와 Module 시스템 이해하기컴퓨터 알아가기/React 2021. 7. 16. 19:30
본 강의는 ZeroCho TV의 무료강의를 기본으로 하고 있습니다. 지난시간에는 React를 사용하는데 있어서 webpack의 가장 기본적인 틀을 공부해 보있습니다. 즉, 대부분의 React에서 사용하는 create-react-app 자동기능을 수동으로 하나씩 세팅해 나가면서 React webpack에 대한 기본개념을 잡고 있습니다. 오늘은 좀 더 구체적으로 설정을 해 보도록 하겠습니다. 아래는 npm으로 설치를 한 기본구조였습니다. ▶ client.jsx에 ReactDom 렌더링 선언 React와 ReactDom을 불러온 client.jsx에 Component 렌더링 정의를 다음과 같이 합니다. 구구단 작성시 html에서와 비슷한 모습을 하고 있습니다. 이제부터는 필요한 파일을 만들면서 연관된 파일들끼..