hooks
-
[React 기초] 끝말잇기 게임 React로 만들기컴퓨터 알아가기/React 2024. 1. 22. 19:30
바로 지난시간 끝말잇기 게임에 대한 자바스크립트로 과거 공부한 것을 복습해 보았습니다. 이제 이 부분을 React Hooks로 만들어 볼 차례입니다. 지금 참고하고 있는 강좌에서는 좀 더 간단한 예제로 진행을 해서 스스로 만들어 본 자바스크립트를 React로 적용하는 과정에서 많은 시행착오를 겪었내요. 시행착오를 다시 겪지 않기위해 이 곳에 정리해 봅니다. ▒ React 끝말잇기 게임 1. 함수 콤포너트 변수 설정 초보자로서 React를 한다는 것은 어떤 변수가 사용될지에 90%이상 성공확률이 있다고 볼 수 있습니다. 자바스크립트에 사용되었던 변수가 그대로 변수로 된다면 더할 나위 없겠지만 그렇지가 않다는 겁니다. 지난번 자바스크립트로 만든 결과물은 아래와 같았습니다. 위 그림을 기준으로 고민을 해 보면..
-
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..
-
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 Hooks로 구구단 만들기컴퓨터 알아가기/React 2021. 7. 12. 19:30
본 Summary는 ZeoCho TV 무료 웹강의를 기본으로 정리한 내역입니다. Class형으로 만들어진 구구단과 Hooks로 만들어진 구구단의 코딩 내역을 보면서 두 코딩간의 차이점과 장단점을 보고자 합니다. 지난시간 Hooks를 사용하기 위해 함수형 Component 형태로 다음과 같이 state를 구성하였습니다. 상기 그림을 다시 설명하면 함수형 Component의 이름은 GuGu로 하고 각각의 객체를 별도로 정의하였습니다. 브라우저로 확인을 하면 첫번째와 두번째수가 랜덤하게 화면에 표시되며 Value와 Result는 공백으로 화면에 표시되지 않습니다. 한번에 객체러 묶은 setState가 없어지고 각각 분리하여 setFirst, setSecond등으로 나뉘어져 있습니다. 이제부터 return( )..
-
React 기본 : React Hooks의 개념컴퓨터 알아가기/React 2021. 7. 5. 19:30
※ 본 내용은 ZeroCho TV의 React 무료강좌를 기본으로 하고 있습니다. 지금까지의 React는 Class형 Component로 된 내역을 공부해 보있습니다. 하지만 최근 React에서는 Class보다는 Hooks라는 작업으로 변하고 있다고 합니다. 대표적인 구축 사이트는 facebook 입니다. 따라서 Hooks가 과연 어떤것인지 이해를 하고 넘어가야 될 것 같습니다. ▒ Hooks 정의 Hooks는 Class형에서 전체 객체를 state로 정의하고 setState로 선언한 방식에서 함수형 Component를 따르면서 각각을 별도로 정의하여 진행하는 방식이라고 볼 수 있습니다. 문장으로는 잘 이해가 가지 않습니다만 지난 시간 구구딘 형식을 빌려 차이점을 확인하도록 하겠습니다. ▶ 함수형 Com..