컴퓨터 알아가기
-
[React 기초] Webpack 설치 및 실행 : 4탄 - HTML Plugin 설치컴퓨터 알아가기/React 2023. 12. 30. 19:30
지금까지 공부한 웹팩 설치 방법으로 인하여 React 기본 구문으로 만들어 본 구구단 게임을 웹팩으로 시도해 볼 시간이었는데 공부가 더 필요한 사항이 생겼습니다. 최종 배포시 전체 웹팩 파일을 배포할 수도 없는 일이기에 배포는 dist폴더만 배포하면 되는데 이 폴더에는 웹팩을 통하여 하나로 합쳐진 JS파일만 존재합니다. 이제 dist폴더에 배포용으로 만들어지는 HTML을 만들기 위해서 역시 HTML Plugin이 필요합니다. 본 내용은 제로초 TV와 코딩앙마의 프론트엔드 개발 강좌를 기본으로 React와 JavaScript 웹팩을 동시에 공부하면서 자신의 것으로 정리한 내용입니다. ▒ HTML 웹펙 플러그인 설치 이제는 조금 감이 올 것으로 보여지네요. 지금부터는 자바스크립트 웹팩과 React 웹팩을 구..
-
[React 기초] Webpack 설치 및 실행 : 3탄 - React Webpack Babel Module 설치컴퓨터 알아가기/React 2023. 12. 29. 19:30
이전 웹팩 관련글은 기본적인 입력과 출력에 맞춘 기본 동작에 대한 이해였습니다만, 조금 더 필요한 모듈을 직접 설치해 봄으로써 웹팩에 대한 이해를 높이고자 합니다. 본 내용은 제로초 TV와 코딩앙마 프론트엔드 개발 강좌를 복합적으로 공부하면서 자신의 것으로 만들어 본 것입니다. ▒ Webpack 모듈설치 2탄에서 웹팩을 실행했을 경우 error가 하나 떴습니다. Module parse에서 다음과 같이 에러가 발생이 되었습니다. 에러의 내용을 잠깐 보면 client.jsx에서 최종 render되는 콤포넌트에서 loader가 없다고 나옵니다. 이는 JSX를 React Webpack에서 사용하기 위하여 알맞은 Loader가 필요하다는 말입니다. 이러한 에러를 해결하는 방법이 webpack.config.js에서..
-
[React 기초] Webpack 설치 및 실행 : 2탄 - React 웹팩 실행컴퓨터 알아가기/React 2023. 12. 28. 19:30
지난 시간 Webpack을 설치하고 실행하는 기본적인 것을 연습해 보았습니다. 실행 자체는 자바스크립트 기준으로 실행하였으나 지금 공부하고 있는 과목이 React이기 때문에 좀 더 추가 설치가 필요할 것으로 보여집니다. 향후 CSS까지 웹팩으로 진행할려면 기본적으로 모듈에 대한 이해가 필요한데 그 부분을 중점적으로 보겠습니다. 역시 본 내용은 제로초 TV와 코딩앙마 강좌를 복합적으로 공부하면서 정리하는 내용입니다. ▒ React에서의 Webpack 지난 시간 실행한 Webpack은 React기준이 아닌 자바스크립트 기준이었습니다. 다시 복습하면 여러가지 폴더를 만들고 설정을 하면서 최종적으로 실행이 되는 곳은 dist폴더에 main.js 파일을 통하여 index.html 파일에서 로딩되는 상황이었습니다...
-
[React 기초] Webpack 설치 및 실행 (기본편) : 1탄 - 자바스크립트 웹팩컴퓨터 알아가기/React 2023. 12. 27. 19:30
구구단 게임 예제를 통하여 Class형 Component든 함수 Component든 하나의 모듈 개념으로 Component가 관여하는 것을 알 수 있었습니다. 하지만 실제 예에서는 하나의 Component만 사용되는 경우는 거의 없고 수천 수만가지의 Component가 사용이 되어 하나의 프로그램을 이룹니다. 이렇게 수많은 Component(자바스크립트 프로그램)를 하나로 통하하여 효율적으로 사용할 수 있는 프로그램을 웹팩(Webpack)으로 불립니다. 이러한 프로그램을 자동으로 통합하여 Webpack으로 만들어 주는 프로그램 또한 머리 좋은 누군가가 개발하여 Create-react-app이라는 프로그램으로 널리 통용되나 근본적인 내용을 모르면 사칙연산을 모르고 수학문제를 푸는 경우가 같기 때문에 조금 ..
-
[React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용컴퓨터 알아가기/React 2023. 12. 26. 19:30
지난시간까지 만들어 본 구구단 게임관련 CSS를 적용하여 좀 더 시각적으로 만들어 보는 연습을 해 보겠습니다. 아직까지는 HTML 구문에서 React를 사용하기 때문에 태그를 이용하여 만들 수 있습니다. 에서 중점으로 생각했던 포인트는 ① 구구단 게임이 나오는 영역과 바탕영역을 구분해 보고 싶었고 ② 3항 연산자를 사용하여 정답일경우 Green색으로 오답일 경우 Red색으로 구분 이 주된 목적으로 다음과 같이 작성할 수 있을 것 같습니다. 먼저 id가 root인 태그를 id를 하나더 만들어 구분해 줍니다. 이제 태그를 만들어 봅니다. 이는 개인별 취향이 다른 분야로 각자 만들어 보길 권장합니다. 그리고 3항 연산자가 적용될 태그는 id가 result인 곳에서 class이름을 정답과 오답을 구분해서 만들어..
-
[React 기초] React 간단 예제 - 구구단 게임 : React Hooks컴퓨터 알아가기/React 2023. 12. 25. 19:30
구구단 게임은 임의의 랜덤한 두개의 숫자가 화면에 보이면 답을 입력하여 정답 또는 오답을 나타내는 간단한 웹게임입니다. 지난 시간 자바스크립트로 구성을 복습 하였기에 이제 본 목적인 React로 만들어 보도록 합니다. 본 내역은 제로초 TV의 리액트 강좌를 기본으로 하고 있숩니다. ▒ React Hooks 구구단 게임 처음으로 React Hooks라는 말을 사용하는데 사실 함수Component로 되어 있는 React를 React Hooks라고 칭합니다. 1. React Hooks의 기본 구조 이전 시간 Class Component와 함수 Component의 기본구조를 보았습니다. 거기서 차용을 해오면 아래와 같은 기본틀을 기억해야 합니다. 2. React 특성 우리가 만들고자 하는 결과물은 지난시간 자바..
-
[React 기초] React 간단 예제 - 구구단 게임 : 자바스크립트컴퓨터 알아가기/React 2023. 12. 22. 19:30
React를 하면서 React자체가 자바스크립트라고 하니 자바스크립트를 복습하지 않고서는 React 이해가 힘들것 같네요. 개발자로 취업할 것도 아니고 시간이 날때마다 취미로 편하게 공부할려고 하니 천천히 복습을 하곤 합니다만 코딩이 취미가 될지는 아직도 모르겠네요.. 그냥 마치 수학문제를 푸는 느낌이라고나 할까요.. 역시 본 내용 또한 기본은 제로초 TV의 무료강좌를 기본으로 하고는 있습니다만 글로 옮기기까지 많은 코딩에 대한 착오들이 발생하고 시간이 엄청 걸리긴 합니다. 구구단 게임을 만들어 보고자 합니다. React로 하기전에 과거에 한번이라도 따라해봤던 자바스크립트로 해봐야 그 이후 React에 대한 개념도 잡힐것 같아 새로운 마음으로 해 보는데 이미 머리속에는 많은 내용둘이 지워져 있더군요. 다..
-
[React 기초] React 간단 예제 - 버튼 클릭하기 : 함수 Component컴퓨터 알아가기/React 2023. 12. 21. 19:30
지난 시간 만들어 보았던 환영버튼을 함수 Component로 바꾸어 보도록 하겠습니다. React는 많은 사람들이 함수 Component를 사용한다고 하는군요 1. Class형 Component를 함수 Component로 지난시간 '환영합니다.' 메시지를 Class형으로 다음과 같이 만들어 보있습니다. 이를 함수 Component로 바꾸어 보도록 하겠습니다. Class형에서 사용되었던 this.state를 사용하지 않아도 됩니다. 단, 함수 Component에서 사용되는 기본 규칙을 다시한번 정리해 둘 필요가 있습니다. ※ 함수Component 기본규칙 ① Class형을 함수로 바꾸어 줌 ② 데이터영역의 기본형태는 const [변수명, set변수명] = React.useState(기본값 false); ③..