전체 글

[React] 프로젝트를 Github Pages에 배포하는법

이번 시간에는 그 동안 다루지 못한 Github Pages를 React에서 배포하는 방법을 알아보도록 하겠습니다. 제가 지금 현재 Windows버전으로 진행중인데 방식은 동일하니 참고하시면 되겠습니다. 우선 먼저 배포할 프로젝트를 준비해주세요. 1. Github 저장소 만들기 먼저 자신의 Github 저장소를 하나 생성해줍시다. 저장소 이름, 설명을 작성후 Create repository 클릭 첫번째 comman line 부분을 오른쪽상단 아이콘을 클릭해 복사 or 아래 명령어대로 차례대로 입력 git init git add * git commit -m "first commit" git remote add origin https://github.com/Koras02/react-github-pages.gi..

oh-my-zsh 설치하기 - Zsh + Oh-my-zsh 로 설정하기 VS Code Linux 명령어 사용하기

저번 시간에는 WSL을 설치해서 ubuntu 환경으로 테스트해 보았다. 이번에는 Zsh를 설치해서 윈도우에서 동작시켜본다. Zsh설치 WSL(Ubuntu) bash를 실행한후 zsh를 설치해준다. sudo apt-get install zsh 그 다음 nano를 사용해 .bashrc 파일을 연다. nano ~/.bashrc .bashrc 파일 맨 아래에 아래와 같이 라인을 입력해준다. if [ -t 1 ]; then exec zsh fi 그 다음 변경된 bashrc 파일을 적용해준다. source ~/.bashrc on-my-zsh 설치 zsh를 편리하게 사용하도록 도와주는 oh-my-zsh를 설치해준다. curl 을 사용하기 위해 git 이 있어야 하므로 없으면 git을 설치해준다. Git 설치 >>> ..

oh-my-zsh 설치하기 - windows 버전 Terminal

VsCode terminal 에서 linux 명령어를 사용하고 싶다면 powershell 을 이용한 방법을 사용할 수 있다. 여러 방법을 찾아 보았는데 그 중에 cmd.exe를 이용하는 것이 아닌 Zsh와 Oh-my-zsh를 찾아서 설치할 수 있었다. Zsh를 사용하는 이유 Zsh를 사용하면 터미넬을 좀더 편하게 사용할 수 있는 기능이 많고 무엇 보다 깔끔하게 사용할 수 있다. 명령어는 리눅스와 동일하다 WSL 설치 먼저 Zsh 설치전 윈도우 환경에 리눅스를 사용할 WSL을 설치해야 한다. 재부팅 후 시작 - "Microsoft Store" 에 접속합니다. 검색창에 Ubuntu 검색후 첫번째 항목에 Ubuntu를 설치해줍니다. 설치가 완료되면 시작 - 검색창에 - "Ubuntu" 검색 - 실행 설치 완료..

윈도우 개발 세팅 (2) - node 설치 or React , Vue , Angular 설치

이번에는 Windows 버전에서 node를 설치해보겠습니다. 일단 node.js를 설치해서 개발 환경 세팅을 하려면 nodejs 버전을 정하고 툴도 찾아보고 소스 버전 관리용 github에 연동 해야합니다. 1. node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 사이트에 들어가셔서 node를 설치해 줍니다. 최신 버전을 받으셔도 되고 저같은 경우 안전성 있는 버전을 택하고 싶기 때문에 안전성 버전을 다운 받았습니다. node -v 다운 로드가 끝나면 node-v 로 버전이 잘 설치 되었는지 확인 해주세요. Node.js 실행후 간단하게 코드를 날려보겠습니다. 이상 없..

윈도우 개발 세팅 (1) - git 설치법

안녕하세요. 이번시간에는 윈도우 용 버전에서 깃허브를 설치하는 법을 알아보겠습니다. 윈도우에서 깃허브를 설치하는 방법은 정말 간단합니다. 1. Git 설치 및 파일 다운로드 Git git-scm.com 먼저 git 공식 홈페이지에서 Github Windows 버전을 설치해줍니다. 1-1.처음 설치 화면입니다. 다음으로 넘어가주세요. 1-2.Git 설치할 구성요소 선택 - Default 로 설정된 상태로 Netxt 클릭 ※ 참고 1.Additional icons > On the Desktop - 바탕화면에 아이콘 추가 2.Windows Exporer integration - Git Bash Here : Git Bash 연결기능 (폴더에서 Git을 바로 연결할 수 있는 기능) - Git GUI Here : ..

React 포트폴리오 참고 분석 (2) - Netflix-Web-App-Clone(Prem3997) - 영화 Modal 창 참고

GitHub - Prem3997/Netflix-Web-App-Clone: A Netflix Clone App with TMDB movies and series. User can able to register and sign in A Netflix Clone App with TMDB movies and series. User can able to register and sign in in to application. User can able to view the overview, rating, vote average and category and play the Trailer ... github.com - 이글은 Netflix Modal창을 참고했던 프로젝트를 분석한 글입니다. . ├── public └─..

React 포트폴리오 참고 분석 (1) - Netflix (Karl Hadwen)

GitHub - karlhadwen/netflix: Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React - GitHub - karlhadwen/netflix: Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Buildi... github.com - 이글은 Karl hadwen React Netflix 를 분석한 글입니다. . ├── LICENSE.txt ├─..

[GIT] Git 바로잡기! 듀토리얼 (5). 깃허브가 push 되지않을때

이번 시간에는 깃허브 강의 첫번째 과정 마지막 시간인 GITHUB 가 PUSH되지 않을때입니다. 현재 저의 상황은 이렇습니다. github 가 push 되지않습니다. 이것의 원인은 간단한데 원인 GitHub 원격 저장소와 로컬 저장소 간 공통분모가 없는 상태에서 병합하려는 시도를 한것이 문제, 기본적으로 관련 없는 두 저장소를 병합하는 것은 불가능하게 되어있습니다. 해결방법 git pull origin master --allow-unrelated-histories -allow-unrelated-histories 옵션을 추가하면 관련없는 두 저장소를 병합시켜줍니다. 두번째 상황은 README.md를 추적하지 않는 파일을 덮어써서 오류가 발생합니다. 이것은 병합시 이전 커밋의 README와 충돌때문이라 RE..

[GIT] Git 바로잡기! 듀토리얼(4).Merge이해하기

이번 시간에는 GIT의 기능인 Merge의 기능을 알아보겠습니다. 다른 사람과 협업을 한다면 git을 이용한 형상관리를 함에 있어 branch간에 merge또는 rebase의 차이점을 알고있는 것이 매우 도움이 됩니다. 아래 예시를 참고하면서 차이점을 확인해보면 됩니다. $ git branch my-branch $ git checkout my-branch 위처럼 my-branch 에서 작업을 다 끝내고 mster 브랜치에 merge를 하려고 했는데, 내가 merge하기 전 누군가 mster 브랜치에 다른 작업을 한 후 commit push 하려고 했는데. 그렇다면 이런 모양이 될 것입니다. 이 경우 my-branch를 main에 병합하는 방법은 다음과 같습니다. Merge 하나의 브랜치와 다른 브랜치의 ..

[GIT] Git 바로잡기! 듀토리얼(3).github log 관리 하기

이번 시간에는 github log관리법을 알아보겠습니다. 시작 전 잠깐 사진처럼 여러분들이 push 할 때 node_moduls까지 딸려 오는 경우가 있습니다. 이경우. gitnore에서 제외시키지 않은 문제인데 gitignore.io Create useful .gitignore files for your project www.toptal.com 이 사이트에는 내가 개발하는 언어에 어떤 것을 제외하고 넣어야할지 .gitnore 파일내용을 정리해주는 사이트입니다. 기본적으로 저장소에 그냥넣는 거보다 어떤 것을 제외할지 정리하고 넣는 것을 추천합니다. git log git log 를 했을 때 화면입니다. 저는 최근 3번 push를 했는데 이렇게 push 할 때마다 log가 남게 됩니다. git log -p ..

[GIT] Git 바로잡기! 듀토리얼 (2) - Git 시작하기 레포지토리 생성

GitHub 두번째 시간을 시작하겠습니다. 이번에는 github에 저장소를 생성하고 코드를 붙여넣는 법을 알아보겠습니다. 우선 github에 가입하지 않으셨다면 사이트에서 가입해주세요 GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 저번시간에 github 설정까지 마치고 이제 무엇을 하냐 저장소를 생성해주어야..

[GIT] Git 바로잡기! 듀토리얼 (1) - Git 설치 및 세팅 법

이번 시간에는 제가 준비해본 GitHub 바로잡기 튜토리얼에 대해 알아보겠습니다. 저도 github를 쓰면서 시간이 지나니 코드관리면에서 익숙해졌는데요. 하지만 GIT의 기능을 그다지 많이 사용하지는 않습니다. 주로 작업 상태를 알려주는 pull request나 push branch log 기능들 만을 사용하는데요. 이런 기능들은 포트폴리오 개발시에 간단하게 이용하는 코드들입니다. 하지만 나중에 실무로 간다면 이것보다 더 많은 코드를 사용하시게 될 것입니다. 팀 프로젝트 시 request도 남겨야 하고 mearge로 합치기도 해야 하며 수많은 코드를 입력햐셔야합니다. 하지만 이런 코드들은 그냥 외운다기보다 익숙해진다는 마인드로 접근하시는 것이 좋습니다. 이것을 외우는 것도 중요하지만 이런 것들을 빨리 익..