컴퓨터 알아가기/React
-
[React 기초] React 간단 예제 - 버튼 클릭하기 : 자바스크립트 이벤트클릭컴퓨터 알아가기/React 2023. 12. 18. 19:30
React를 작동하게 만드는 하나의 덩어리 즉 Component가 중요하다고 볼 수 있습니다. Component를 만들어 가는 방법중 Class형으로 하거나 함수로 하는 경우가 있는데 간단한 예제를 통해 이해를 해 보고자 합니다. 본 내역은 제로초 TV의 React 강좌를 기본으로 공부하면서 필요시 다양한 강의를 보면서 내용을 업데이트 하고 있습니다. 사실 그동안 블로그 내용에 설명이 너무 많아 저 또한 잘 안 찾을 것 같은 느낌이라 이제부터는 핵심적인 내용만 담으려 노력해 보고자 합니다. ▒ 다양한 버튼 클릭 동작 (자바스크립트 복습) 리액트는 자바스크립트를 기본으로 하는 프로그램입니다. 따라서 자바스크립트를 알고 리액트를 공부하여야 합니다. 자바스크립트에서 많이 사용되는 이벤트클릭에 대해 이해를 해 ..
-
[React 기초] React Component 구성 - Class형 Component와 함수 Component컴퓨터 알아가기/React 2023. 12. 13. 19:30
React를 구성하고 작동하게 하는 영역이 있습니다. 그 영역을 콤포넌트(Componenrt)라고 하는데 오늘은 간단하게 Component를 이해해 보도록 합니다. 본 내역은 제로초 TV의 React 무료 웹게임을 기본으로 좀 더 자신의 것으로 만들어 보고자 정리한 것입니다. 1. Component 구성방법 구성방법을 알아 보기전에 거의 모든 산업군에 쓰이는 용어가 영어로 되어있음을 인지해야 합니다. 만국 공통어이기도 하지만 해외에서 활발하게 활동과 개발이 이루어지면서 공통언어인 영어로 대부분 사용이 되어 상호간 커뮤니케이션이 문제가 없게 되는 현상입니다. 영어라는 학문은 어떠한 경우에도 다방면으로 도움이 되니 반드시 적응하도록 노력할 필요가 있습니다. 각설하고, Component는 '요소, 항목'이라는..
-
[React 기초] React 기본 포맷컴퓨터 알아가기/React 2023. 12. 12. 19:30
거의 1년만에 글을 쓰는 입장입니다. 개인적으로도 바쁘기도 했지만 바쁜것 보다는 심적 여유가 없었다는게 더 맞는 말인듯 합니다. 좀 더 정확하게 이야기 하자면 지금 내가 무엇을 하고 있는지 몰랐기에 블로그에 글을 남기는 것이 의미가 없었을 수도 있습니다. 정말 다 늦은 나이에 코드를 개인적으로 공부하는게 어떤 의미가 있는지 이게 도움이 되는지에 대한 결론을 내지 않고서는 과거 학생시절처럼 남들이 만들어 놓은 내역을 베끼는 수준에서 더 나아지지는 않기 때문에 쉽게 내 블로그에 접속을 할 수가 없었네요. 어느 순간 하나의 취미로 배우는 기쁨에서 만족하자라는 자기 위안이 더 강하게 들어 다시 정리해 보고자 합니다. 여러 프로그래밍 언어가 있지만 React를 건드렸다가 멈춘 관계로 다시한번 정리를 해 나가 보고..
-
React 업데이트 : 함수 컴포넌트 구조컴퓨터 알아가기/React 2022. 11. 23. 19:30
리액트는 기본적으로 자바스크립트라고 이해를 하고 있습니다. 이에따라 기본적인 구조를 class형태로 공부를 해 보았는데요. 최근 들어서 class형태로 사용하지는 않는다고 합니다. class 형태는 기본적으로 읽을 정도 즉, 코드를 보고 이해가 되는 정도이면 충분하다고 합니다. 이유는 과거 코드는 class 형태로 많이 사용되었고 class 형태로 사용했기에 this 를 사용할 수 밖에 없었다고 합니다. 하지만 최근들어서는 좀 더 헷갈리는 부분은 없애고 간편하게 사용할 수 있는 자바스크립트 라이브러리 형태로 발전을 해 오고 있으며 그 형태가 함수 컴포넌트 구조라고 합니다. 오늘은 이 부분에 대한 이해를 하는데 중점을 두도록 하겠습니다. 역시 본 내용은 '제로초 TV 리액트 무료 강좌'를 기본으로 공부하고..
-
React 업데이트 : 클래스 형태 React 복습 - React Component 이용 '좋아요 버튼 동작' : Class 이용, JSX 이용컴퓨터 알아가기/React 2022. 11. 17. 19:30
자바스크립트를 공부하기 전 무작정 React를 공부한 적이 있습니다. 블로그에도 34개의 글도 연재하였구요. 그러다 기초가 없다보니 어느순간 막히더라구요. 그 이후 시간을 내서 자바스크립트를 먼저 조금이라도 알고 가자 생각을 해서 순서를 바꾸었구요. 다시 제로초 TV 강의를 통해 React에 대해 알고자 합니다. 1. React란 사실 React에 대해 여기에 정의하는 것은 부정확하고 무의미하다고 봅니다. 다음 링크를 통해 정확하게 뜻과 내용들을 보면서 공부하는게 맞다고 보여지고요. 저는 리액트론 된 웹게임에 관심이 있기때문에 그 진도만 별도로 나가고자 합니다. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org) React – 사용자 인터페이스를 만들기 ..
-
React 기본 : 끝말잇기 Hooks 로 전환 후 에러 수정 - Uncaught TypeError : value is not a function (2)컴퓨터 알아가기/React 2021. 9. 14. 19:30
지난 시간 여러가지 Error를 수정해 보았는데 다음과 같이 역시 TypeError가 나왔습니다. 좀 더 심플하게 생각해 봐야겠습니다. TypeError라는 의미는 뭘 잘 못 기입했다는 의미이고 Value가 함수기능을 못한다는 이야기는 Value에서 에러가 난 것이고 오답은 작동하는데 정답에서 에러가 난다는 이야기는 if ~ else 문에서 if 내용이 잘 못 기입되었다는 가설을 세울 수 있습니다. ▒ TypeError 수정 if 절에 쓰여진 내용을 참고로 하고 있는 ZeroCho TV와 비교를 해 보겠습니다. 아무리 비교해도 틀린곳이 없습니다. 다음과 같이 쓰여진 if 절과 else절을 유심히 살펴 보겠습니다. 한가지 차이점은 Value에 set이 들어가 있지 않습니다. 다음과 같이 수정해 보도록 하겠..
-
React 기본 : 끝말잇기 Hooks로 전환 후 에러 수정 - EADDRINUSE, Address already in use컴퓨터 알아가기/React 2021. 9. 9. 19:30
지난 시간 Uncaught TypeError에 대해 나름 추정을 해 보았습니다. (물론 에러 수정에 대한 확신은 아니었지만) 가설로서 세운 수정방식이 루트 디렉토리를 "pack"에서 "relayhooks"로 바꿔 보았습니다. 한번 Hot Reloder 서버를 통해 다시 에러을 확인해 보겠습니다. 명령어는 Node 명령어인 npm run dev로 실행하면 서버가 실행될 겁니다. ▒ EADDRINUSE, Address already in use 수정 다음과 같은 서버에러가 발생되었습니다. 위 그림을 보면 relayhooks라는 이름에서 잘 시작이 되는데 포트 8080이 이미 사용되고 있다고 하네요.역시 다양한 구글링을 통해 수정을 해봐야겠습니다. 1. 8080 포트 사용 수정 지금 내가 8080 포트를 사용..
-
React 기본 : 끝말잇기 Hooks로 전환 후 에러 수정 - Uncaught TypeError : value is not a function컴퓨터 알아가기/React 2021. 9. 7. 19:30
이 글은 ZeroCho TV의 무료강좌를 기본으로 하고 있습니다. 지난시간 Class형으로 되어진 끝말잇기 프로그램을 Hooks로 전환하여 보았습니다. 사실 기본적 프로그램 지식이 미약한 상황에서 강좌를 따라하면서 이해하기도 벅찬데 에러까지 나면 이렇게 난감한 경우도 없을겁니다. 실행을 해보니 역시나 에러가 떴습니다. 이 문제를 해결해 보도록 하겠습니다. (어느 누구도 가르쳐 주는 분이 없길래 수정하는데 까지 얼마나 걸릴지는 모르겠습니다. 특히, React 내용을 정말 오랜만에 들어와서 공부하는 거라 천천히 해 볼려고 하는데 막막하기만 합니다.) 다음과 같이 에러가 발생되어 여기서부터 시작해 볼려고 합니다. ▒ Uncaught TypeError: value is not a function 일단 TypeE..