컴퓨터 알아가기
-
[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..
-
[Git과 Github 정복] Github 사용 Manual 7 - 실습을 통한 Branch 사용컴퓨터 알아가기/Git & Github 2023. 6. 21. 19:30
지난시간 Github의 화룡정점이라 할 수 있는 Branch에 대한 개념을 설명 드렸습니다. 굳이 별도의 시간을 빼서 Branch개념을 설명 드린 이유는 어떤 쓰임새이고 어떤 개념인지 알아야 Github에 대한 이해도가 아주 높아질수 있다는 취지에서 알려 드렸구요. 본격적으로 해당 실습을 통해 이론과 실기를 알아보고자 합니다. 역시 본 내역은 나동빈의 Github강좌를 기준으로 현시점에 맞게 업데이트합니다. ▒ Github Branch 실습 1. Branch 확인 내가 작업하고 있는 저장소에서 브랜치가 몇개 존재하는지 어떤 브랜치가 있는지 확인할 수 있습니다. 쭉 작업하고 있었던 폴더에서 해 보도록 하겠습니다. 명령프롬프트앱에서 확인해 봅니다. git branch라는 명령어를 실행해 봅니다. 지금까지는 ..
-
[Git과 Github] Github 사용 Manual 6 - Branch 사용하기 (Branch 정의)컴퓨터 알아가기/Git & Github 2023. 6. 20. 19:30
지난시간 Github Manual을 1편부터 5편까지 실습으로 따라해 본 사람은 이제 Git과 Github에 대한 전반적인 이해를 할 수 있습니다. 그렇다면 진정으로 Github를 이용하는 목적으로 브랜치(Branch)라는 개념을 추가로 이해한다면 Github 사용법은 다 되었다고 볼 수 있습니다. 좀 더 세밀한 Git 명령어라든지 하는 부분들은 그때 그때 추가로 공부를 하면 될 것으로 보여지네요. 역시 본 Manual을 만들기 위해 참고 강의는 나동빈의 Github 강좌를 기준으로 하고 있습니다. ▒ Github Branch 정의 1. GIthub의 Branch 개념 그럼 Github에서 Branch라는 개념을 정립할 필요가 있습니다. 정말 알기 쉽게 자신만의 것으로 개념을 만드는 작업을 할 필요가 있..