분류 전체보기 210

Github 사용법 3. 브랜치로 협업하기 (pull request)

신기능을 만들고 싶으면 main 브랜치에 코드짜다가 프로젝트 망치지말고다른 브랜치를 만들어서 거기에 개발하는 것도 안전하고 좋다고 했습니다.    원격 repository (저장소) 에도 브랜치를 만들 수 있습니다.브랜치 생성하려면 1. github.com에서 브랜치 직접 만들어도 되고 2. 아니면 로컬에서 만든 브랜치를 올려도 브랜치생성이 가능합니다.         1. github 사이트에서 직접 브랜치 생성가능    ▲ main 브랜치명 버튼 누르면 브랜치를 바꾸하거나 새로 만들 수 있습니다.심심하면 하나 만들어보거나 하면 됩니다.       2. 아니면 로컬 repository 에서도 브랜치생성가능 로컬저장소에서 브랜치생성해서 원격저장소로 git push 해도 됩니다. 예를 들면 지금 사이트를 하..

Git 2024.07.24

Github 사용법 2. 타인과 협업하기 (git clone, pull)

원격저장소의 장점은 남들과 협업할 수 있다는 겁니다. 어려운건 아니고 개발자 10명이서 각각 작업한 내용을 원격저장소에 올리면 그게 협업 아니겠습니까 협업해봅시다.      일이 너무 많아서 코딩노예 1명을 고용했습니다 물론 여러분은 친구가 없으니까 가상의 팀원을 하나 만들어봅시다. 코딩노예 팀원이 원격저장소에 있던 코드를 같이 짜고 싶다면 어떻게할까요.그 친구도 똑같이 코드짜서 git push 어쩌구 하면 그게 협업 끝입니다.         "기존 소스코드가 없는데 코드어떻게 짬?"    당연히 코딩노예는 기존 소스코드를 다운받아서 시작할 수 있습니다.  다운받는 법은 github.com 가서 다운받아도 되고  git clone 원격저장소주소새로운 작업폴더에서 이거 입력해도 됩니다. 그럼 원격저장소에 ..

Git 2024.07.24

git>Github 사용법 1. 내 코드 올릴 땐 git push

git push, pull 어쩌구 배우기 전에원격 repository 개념과 왜 사용하는지부터 알고 지나갑시다. 그래야 자신있게 git push 이런거 사용가능     repository가 뭐냐면  git이라는 친구가 파일버전을 저장해두는 장소를 repository라고 합니다.로컬 작업폴더엔 .git 폴더가 있는데 그게 repository 입니다. repository는 한국말로 저장소라고합니다.  실제로 개발할 땐 온라인 repository를 많이 사용합니다.내가 컴퓨터에 만들어 놓은 git repository를 온라인으로 저장해두는겁니다. 그렇다면 1. EDD-202 다운받다가 컴퓨터 랜섬웨어 걸려도 안심가능 2. 다른 사람과의 협업도 가능해집니다. 사람들 많이 쓰는 github.com 에서 온라인 r..

Git 2024.07.24

git> 코드짜다가 실수했다 되돌아가자 (git revert, reset, restore)

commit만 주구장창 하는 사람들이 있는데 git은 버전관리 프로그램이기 때문에 언제든지 이전 commit으로 되돌아가거나문제가 되는 commit 내역을 취소하거나 그럴 수 있습니다. git restore / git revert / git reset 명령어써서 파일 복구하는 법을 알아봅시다. 각각 파일하나 복구, commit 복구, 시간되돌리기가 가능합니다.  깔끔한 상태에서 시작하기 위해새로운 작업폴더 만들어서 다시 시작합시다.      일단 commit 몇 번 해보고  새로운 작업폴더에서 git init 하고 commit 몇 번 해봅시다. 저는 파일 3개 만들고 만들 때 마다 commit 해봤습니다. git log --oneline 입력해보면 여러분의 commit 내역을 한 줄로 이쁘게 보여줍니다...

Git 2024.07.24

git> 다양한 git merge 방법 (3-way, fast-forward, squash, rebase)

3-way merge   저번시간에 했던 것 처럼 브랜치에 각각 신규 commit이 1회 이상 있는 경우 merge 명령을 내리면 두 브랜치의 코드를 합쳐서 새로운 commit을 자동으로 생성해주는데    이걸 3-way merge 라고 부릅니다.이게 merge의 기본 동작방식입니다.        fast-forward merge 가끔은 새로운 브랜치에만 commit 이 있고기준이 되는 브랜치에는 신규 commit 이 없는 경우가 있습니다.    이 경우 merge 하게 되면 "fast-forward merge 되었습니다" 라고 알려줍니다.fast-forward merge가 뭐냐면 딱히 합칠게 없어서 그냥 신규브랜치 보고"지금부터 니 이름은 main 브랜치여" 하는 것입니다. 그래도 결과는 어짜피 같지 ..

Git 2024.07.24

git> branch

커밋하면서 계속 코드짜다보면 갑자기 새로운 기능을 추가하거나 그래야하는 경우가 있습니다.그럴 때는 원본파일에 코드를 추가하고 커밋해도 되겠지만혹시나 잘못해서 지금까지 짰던 프로그램이 망가지거나 그러면 어떻게하죠? 그럴 걱정 없이 안전하게 새로운 기능을 추가하고 싶으면프로젝트의 복사본을 만들어서 거기에 먼저 개발해보는것도 나쁘지않습니다.     git 안에선 branch 기능을 이용해서 복사본을 쉽게 만들 수 있습니다. branch가 뭐냐면 그냥 프로젝트 복사본임 예시와 함께 branch 하나 만들어봅시다.       쇼핑몰을 만들고 있는데 새로운 기능이 필요하다 예를 들어 지금 작업폴더에서 쇼핑몰 만드는 코드를 짜고 있다고 가정해봅시다.근데 갑자기 쿠폰기능을 추가하고 싶은겁니다. 근데 위험하고 복잡할 것..

Git 2024.07.24

git> add, commit으로 파일기록

코드 짜다가 실수해서 2일 전으로 돌아가고 싶으면 어쩌죠? 파일저장만 주구장창 했으면 다시 돌아갈 수는 없습니다.  해결 방법이 2개 있는데- 매일매일 손수 파일 복사본을 만들어두거나 - git 쓰거나 둘 중 선택하면 됩니다.      git의 commit 기능을 쓰면 쓰면 파일의 현재상태를 매일매일 기록해둘 수 있습니다.정확히 말하면 파일의 스냅샷을 저장해줍니다. 그럼 원할 때 쉽게 되돌아가거나 그럴 수 있음 오늘은 파일의 현재상태를 기록해줄 수 있는 git commit 명령어를 알아봅시다.       일단 작업폴더에서 git을 이용하고 싶으면 거기서 터미널을 열어서 git init 부터 입력하고 시작하면 됩니다. 이제 git이 여러분이 파일생성하는거, 코드작성하는걸 추적하기 시작합니다.  파일 하나를..

Git 2024.07.24

git> 설치

코드를 짜든 디자인을 하든 레포트를 쓰든파일 변경내역을 보존하고 관리하는 과정이 필요합니다. 그러고 싶을 때 프로그래머들은 git을 사용합니다.이거 쓰면 위 사진처럼 파일 복사본을 귀찮게 만들지 않고도 깔끔하게 버전관리가 가능합니다.  git은 리눅스 만든 아저씨가 2005년에 만든 간단한 프로그램인데그때랑 다르게 시대가 많이 바뀌어서- 예전처럼 git checkout 파생명령어 20개 외울 필요없이 신 문법 switch, restore 등을 사용해서 - 복잡한 Vim + Git bash 말고 깔끔한 VSCode 에디터로  쉽게 배워봅시다.      git & 코드에디터 설치   1. 구글에 visual studio code 검색해서 설치합시다.코드 짤 에디터같은거 준비하면 됩니다. 싫으면 그냥 윈도우 ..

Git 2024.07.24

리액트> Lifecycle과 useEffect 2

Detail 페이지 후 2초 후에 박스가 사라지게 해보라고 했습니다. 동적인 UI 같은거라 그런거 만들 땐 1. UI 상태를 저장할 state 만들고2. state에 따라서 UI가 어떻게 보일지 작성하라고 했으니 그거부터 해봅시다.  function Detail(){ let [alert, setAlert] = useState(true) return ( { alert == true ? 2초이내 구매시 할인 : null } )}그랬습니다.이제 alert라는 state를 true로 바꾸면 노란박스가 보이고false로 바꾸면 안보임  그럼 이제 Detail 페이지 접속 후 2초 후에 저걸 안보이게 처리하려면 useEffect와 setTimeout 이런거 쓰면 될..

리액트 2024.07.18

리액트> Lifecycle과 useEffect 1

오늘은 Lifecycle 어쩌구랑 useEffect라는 함수에 대해 알아봅시다. 어딜 들쳐봐도 다들 어렵게 가르치는 Lifecycle 이라는 개념이 있는데 실은 별거아닙니다.이걸 배우는 이유는 componentDidMount() 이런 유용한 Lifecycle 함수들을 쓰기 위해서 배우는겁니다.요즘 사람들은 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용하기 때문에 우리도 그걸 배워봅시다.     컴포넌트의 인생  여러분이 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다.컴포넌트도 인생이 있다는겁니다.   컴포넌트는1. 생성이 될 수도 있고 (전문용어로 mount)2. 재렌더링이 될 수도 있고 (전문용어로 update)3. 삭제가 될 수도 있습니다. (전문용어로 unm..

리액트 2024.07.18