전체 글(43)
-
메타코딩 -무작정 깃허브 찍먹하기 -3- (Git branch 기본개념 및 브랜치 포인터 개념)
우리가 커밋을 하게 되면 기본적으로 main branch가 하나 생기게 된다. 요런 식으로 그러면 시나리오를 하나 만들어 보자. 내가 만약 블로그를 만드는 중인데. 1.회원가입 2.로그인 순으로 커밋을 했다고 생각 해 보자. 위의 그림처럼 순차적으로 브랜치가 생성되고 헤더도 가장 최근 커밋을 바라보고 있을 것이다. 그런데.. 회원가입 로그인을 만들고 나니까. 꼭 해보고싶은 아이디어가 있다. 아이디 중복체크를 가지고 하자~ 또는 하지말자 ~ 라고 의견들이 나오는데.. 그러면 아이디어 branch라는 새로운 가지를 하나 만들고, 로그인의 끝점을 그대로 가져온다. 그렇게 되면 아이디어 branch는 회원가입과 로그인에 대한 모든 history를 다 들고 있는 branch이다. 엄밀히 따지자면 새로운 가지는 아..
2023.02.21 -
메타코딩 -무작정 깃허브 찍먹하기 -2- (Git Reset, Reflog or Git 최종 로그변경하기)
전 기록에 이어서 되돌리기 명령어를 사용해 보자. 위 처럼 c:drive에 만들었던 gitworkspace의 폴더에 ex03폴더를 생성 후 git bash CLI를 키고 git init후 test1, 2 파일을 다음과 같은 내용으로 만든 후 git add . 를 한 후 커밋을 해 준다. 그러고 깃 로그를 확인 해 보자. 이런식으로 헤드에 저장이 된 것을 확인 할 수가 있다. 그런데 2번째 커밋으로 들어 간것이 깃로그가 마음에 들지않는다. 오타가 생겨서 잘못 들어갔다. 그러면 이제 로그를 복구하고 싶을때가 이런식으로 생기는데... 이 것을 복구하는 명령어는 git reset이라는 것인데. 해당 명령어에는 옵션이 세 가지가 존재 한다. 알아보자~.. reset이라는 명령어의 옵션에는 soft, mixed, ..
2023.02.20 -
메타코딩 -무작정 깃허브 찍먹하기 -1- (git 설치, github Repository생성 및 삭제, git 명령어 기본기 실습)
태초에 깃이라는 것이 있었다. 우선 깃을 설치 해 보자. 구글에 git download 검색 첫번째 사이트 클릭 자기 컴퓨터 os 찾아서 클릭 난 windows 첫번째줄 Click here to download 클릭 하면 작업표시줄에 exe가 다운로드된다. 그러면 바로 설치하면 된다. 작업표시줄 exe 클릭. 클릭하면 앞에 잡다한 default 값 설정해주고 그런거 뜨는데 걍 next만 클릭하면 된다. 설치가 다 끝나면 View Release Notes 체크 해제 해주고 Finish 뭐 버전 정보 노트 그런거 같은데 내가본 영상에선 체크 해제해서 해제했음.. 필요없으니까 했겠지.. 다운로드 및 설치가 완료 되었으면 C:drive에 폴더하나 gitworkspase로 만들어 주고 그 안에 ex01폴더 하나 ..
2023.02.19 -
코딩애플 - 무작정 React 찍먹하기 -4- (글 상세페이지 UI만들기 or Component로 HTML 깔끔하게 줄이기)
이제 블로그 하단에 글 상세 페이지 형식으로 Modal창으로 띄우는 상세페이지를 만들어 보자!. 페이지가 넘어가거나 하는것도 있는데 그건 강의를 결제해서 봐야함.. 라우터를 설치하고 어쩌고 저쩌고 하던데.. 일단 그지니 무료강의만 기록하자;; Modal UI 디자인을 하자. js파일 line 39~43처럼 modal UI를 만들어주고, css파일 line 7~11과 같이 디자인을 만들자. 그런데 HTML을 만들때에 주의해야 할 것이. 지금 작성하는 곳이 return()의 안이라는 것을 명심하자. return( ) 이거 불가능.. 하고싶으면 세개의 div를 하나의 div로 또 감싸주는 방법 밖에 없다. 이걸 지키기 위해서 modal창을 위에 코드처럼 큰 div안에 만들었다. 그러면 이제 아래처럼 심플한 모..
2023.02.14 -
코딩애플 - 무작정 React 찍먹하기 -3- (버튼 이벤트 리스너 장착하는 법 or state를 마음대로 변경하는법)
이어서 아래는 나머지 글 리스트들도 작성하고 글 제목을 state로 바인딩한 것이다. 코드를 짜다가 보면 터미널 부분에 warning 이라는 노란색 글짜들이 뜨는데, 에러는 아니고 eslint가 잡아주는 문법 체크사항이다. 잘못된 코딩 관습을 바로 잡아주는 라이브러리인데, 해당 warning이 보기싫으면 App.js 안에 다음과 같이 작성하면 된다. /* eslint-disable */ 다음으로 할 것은 리스트 안에 좋아요 버튼을 만들고 좋아요를 누르면 카운트가 올라가도록 만들어 보자. line 17에 HTML UI를 만든 상황이고, 따봉충 이모티콘은 크롬 주소창 우클릭 그림 이모티콘을 복붙한거다. 리액트니 중괄호로 onClick 이벤트를 해준다 하지만 중괄호 안에는 수식이 들어갈 수 없고 무조건 함수여..
2023.02.07 -
코딩애플 - 무작정 React 찍먹하기 -2- (JSX 사용법 or state변수 사용)
여기서는 코딩애플의 2강, 3강을 묶은 내용을 작성한다. 우선 해당 프로젝트를 웹으로 실행 시키는 npm start를 터미널에 입력 해 주고 결과를 보자. 에러가 난다면 C:\Users\miwog\Videos\개발자\copy> 해당 명령어를 입력하는 폴더가 제대로 지정되었는지 확인 해야한다. 한번 상위폴더에서 실행 시켜서 에러가 떳었음 ;;.. errno -4058 실행 시키면 기본적으로 코딩되어있는 화면들이 나온다. 해당 화면이 그려져 있는 곳은 App.js 이다. App.js도 일종의 자바스크립트 파일이므로 Js의 문법에 맞춰서 작성해야 한다. 기본적으로 코딩되어있는 내용들을 지워 주도록 한다. 필요없는것을 위의 사진처럼 지워주고 이제 div태그 안에 코딩을 시작하면 된다...!(지우고 다시 실행해보..
2022.10.27