전체 글
-
[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); ③..
-
[React 기초] React 간단 예제 - 버튼 클릭하기 : Class형 Component컴퓨터 알아가기/React 2023. 12. 20. 19:30
지난 시간 버튼 클릭이벤트에 대한 자바스크립트 부분을 복습한 내용에 대해 React에서는 어떻게 표현되는지 확인해 보도록 하겠습니다. React의 기본내역은 제로초 TV의 React강좌를 보고 공부하고 있습니다. ▒ Class형 Component 구조 우선 Class Component의 기본구조를 다시 복습해 봅니다. 참고로 Component는 데이터영역과 화면영역을 같이 묶어놓은 것을 말합니다. 상기 구조에 버튼을 누르면 '환영합니다.'라는 메시지가 출력될 수 있도록 만들어 봅니다. Component명은 Welcome으로 사용하면 기본형은 다음과 같습니다. 마지막 Component를 받는 DOM에도 적용해 줍니다. 이제 기본틀은 완성했으니 코드를 고민해 보도록 하죠. 1. 데이타 영역 데이터 영역은 지..
-
[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를 건드렸다가 멈춘 관계로 다시한번 정리를 해 나가 보고..
-
[Git과 Github 정복] Github 사용 Manual 8 - Merging할 때 발생되는 충돌 처리컴퓨터 알아가기/Git & Github 2023. 6. 23. 19:30
지난 Manual 6~7편에서는 Github의 꽃이라고 할 수 있는 Branch의 개념과 그에 따른 실습을 간단하게 해 보았습니다. 사실 이 부분까지만 알면 혼자서 Github를 사용할 수 있는 이론은 갖추었다고 볼 수 있습니다. 지금부터는 실제 발생될 수 있는 상황들을 필요한 부분만 정리해 나가는 과정을 갖고자 합니다. 역시 본 내용은 나동빈의 Github강좌를 기본으로 공부하고 있습니다. ▒ Merging할 때 충돌현상 처리 Merging(병합)시 충돌된다는 개념은 무엇인지 생각해 봐야 합니다. 두개의 Branch가 존재하고 내용이 다를 경우 충돌(Conflict)이 일어난다고 보면 됩니다. 그리고 이러한 충돌이 발생한 경우 최종 결정권자가 내용을 결정하여 수정후 Main Branch로 올리면 됩니다..
-
[Git과 Github 정복] Github 사용 Manual 7 - 실습을 통한 Branch 사용 : 최종 Branch 병합 방법컴퓨터 알아가기/Git & Github 2023. 6. 22. 19:30
지난시간 Edit Branch에서 작업한 내역이 Github에 올라간 작업을 해 보았습니다. 그리고 이 파일이 이상이 없다고 판단 Main Branch로 합치는 과정 또한 설명하였고 이 과정을 먼저 진행해 보기 위해 답을 달지는 않았습니다. 다음과 같이 진행되면 Edit Branch에서 작업한 내역을 Main Branch로 합칠 수 있습니다. ① Main Branch로 이동 ② Edit Branch 내역 병합 ③ Git Log로 확인 상기 로그를 보면 Head가 가리키는 곳이 main과 edit 둘다 가리킵니다. 병합이 된 것입니다. 병합이 되었다는 것은 로컬저장소에서 병합이 되었다는 이야기이고 원격저장소인 Github에서도 같이 반영을 하기 위해서는 push를 해줍니다. ④ 원격저장소에 반영 ⑤ Git..