본문 바로가기

전체 글

 (166)
개발 서버 실행과 빌드 지난 편에는 parcel-bundle를 설치했습니다. 로컬환경에서 개발할 때 사용됩니다. 기존에 작업하다가 화면 확인은 마우스 오른쪽에 open with live server를 통해 확인했는데, 이제부터는 parcel를 통해 확인할 수 있습니다. parcel를 실행해보겠습니다. parcel index.html 명령어 입력해서 열어보려고 했는데 에러가 뜹니다. 이때, package.json파일에 scripts부분을 수정해보겠습니다. parcel-bundle를 설치했지만 프로젝트 내부에서만 실행됩니다. scripts를 수정한 후, parcel index.html은 내부에서 실행하지만 dev로 지칭합니다. 수정하고 npm run dev 명령어를 실행해보겠습니다. 서버가 https://localhost:1234..
NVM 사용법 및 개요 NVM 사용법 VSCode Terminal에서 nvm install 버전을 입력해서 해당 버전인 Node.js를 설치할 수 있습니다. nvm uninstall 버전을 입력해서 해당 버전인 Node.js를 삭제할 수 있습니다. 그리고 nvm ls 명령어를 통해 현재 설치된 버전들의 list를 확인할 수 있습니다. nvm use 버전 명령어를 통해 어떤 버전을 사용할 것인지 명시해야 됩니다. 이때 다시 nvm ls 명령어를 입력하면 사용하는 버전까지 알려줍니다. 여기까지 다라오시면 node.js를 사용할 수 있습니다. node.js 사용하기 전에 다른 nvm 명령어를 알고 싶으면 nvm --help 를 통해 알 수 있습니다. node --ver 명령어를 통해 현재 버전을 확인함과 동시에 node명령 정상작동..
Node.js 개요 및 설치 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 런타임은 프로그래밍 언어가 동작하는 환경이죠. JS가 동작할 수 있는 환경이 크게 2가지가 있습니다. 첫번째는 Node.js 설치된 특정한 컴퓨터 환경이고, 두번째는 웹 브라우저입니다. 프론트개발자는 웹 브라우저에서 작동한 JS 이해는 필수고, 웹페이지를 만들어진 js파일도 이해해야 됩니다. JavaScript 언어를 배우면 다 이해할 수 있습니다. Node.js 배우다는 것은 컴퓨터를 제어하는 것을 배우는 겁니다. 프론트엔드 개발은 컴퓨터 제어하는 일이 많지 않습니다. 다만 Node.js를 빌려서 웹페이지 작동된 이벤트들을 이해하는 겁니다. 이전 스타벅스 예제를 만들 때도 그렇고 외부 라이브러리등 많..
Markdown github에 올라온 코드들 중 소개를 하는 파일이 있습니다. 보통 README.md 로 되어 있습니다. .md로 끝나는 파일이 markdown로 만든 파일로 생각하시면 됩니다. Markdown 장점 문법이 쉽고 간결하다. 관리가 쉽다. 지원 가능한 플랫폼과 프로그램이 다양하다. Markdown 단점 표준이 없다. 모든 HTML 마크업을 대신하지 못한다. 파일 만들기 및 미리보기 github에서 README.md를 자동으로 찾는 경향이 있어서 파일 이름도 똑같이 만들어봅니다. 오른쪽 분활독보기 버튼 클릭하고 미리보기를 할 수 있습니다. 제목, 문장, 줄바꿈 제목 앞에 # (샵+빈칸)하고 입력하면 h1태그가 나옵니다. #의 개수만큼 h1~h6태그가 나옵니다. #뒤에 띄어쓰기가 없으면 일부 환경에서 제대로 ..
충돌(Conflict), 로컬병합(Merge) 충돌(Conflict) A와 B가 동시에 작업한다고 생각해보세요. 기존에 원격에 push된 내용이 XYZ라고하면, A는 이 내용을 0으로 수정했고, B는 이 내용을 abcd로 수정했다고 가정해보세요. 같은 branch에서 A와 B가 각각 commit하고 github에 push하고 싶어요. 그럼 내용이 각자 다르게 나타나며 충돌(conflict)가 생깁니다. 이럴때 해결책은 2개 있습니다. 첫째, 각자 branch를 새로 만들어서 push하고 github에서 pull requet합니다. 그 다음은 로컬병합(Merge)입니다. git pull origin master 를 통해 원격에 있는 master branch내용을 가져옵니다. conflict 문구 보이면 충돌이 일어났다는 겁니다. 코드 부분도 확인해보겠..
다른 환경에서 프로젝트 수정 새로운 환경에서 프로젝트 작업하고 다시 commit, push를 하고 싶을 때 아래와 같이 하시면 됩니다. github에서 가져온 branch로 갈아타고 싶으면 git checkout -t 이름 입력하고 enter 누르면 됩니다. branch를 삭제하고 싶으면 git branch -d 이름 입력하고 enter 누르면 됩니다. 주의해야할 점: 현재 branch에서 해당 branch를 삭제할 수 없습니다. 즉, master branch로 간 후, 기타 branch를 삭제할 수 있습니다. branch를 새로 생성하고 싶으면 git branch 이름 입력하고 enter 누르면 됩니다. git branch 입력하고 enter 누르면 모든 branch를 확인할 수 있으며, 지금 위치해 있는 branch는 초록색으로..
버전 되돌리기(Reset) 작업하다보면 commit 여러번하고 맘에 안 뜬 버전도 생기죠. 이럴때 몇 단계 전에 commit한 버전으로 돌아가고 싶을 때 reset을 할 수 있습니다. 다만, 이 기능은 push하기 전에만 가능합니다! git reset -- hard HEAD~1 --> 1단계 전으로 되돌리기 git reset -- hard ORIG_HEAD --> 방금전의 되돌리기 명령을 취소한다 즉, 우선 1단계 전으로 되돌렸는데, 실수든 어쨌든 다시 최종 버전으로 돌아오고 싶다면 ORIG_HEAD로 원상 복구하는 겁니다. HEAD~숫자는 몇단계 전으로 되돌리고 싶으면 몇을 입력하면 됩니다.
프로젝트 복제(Clone) 작업하다보면 다른 컴퓨터에서 작업을 이어갈 수 있습니다. 이 때 github에 올라온 코드를 clone해서 이어서 작업하면 됩니다. 우선 github에 로그인하고, clone하고 싶은 프로젝트의 repository로 접근합니다. code클릭하고 주소를 복사합니다. 경로를 먼저 확인하는 게 좋습니다. Windows : dir MacOS: ls 를 입력하고 enter하시면 현재 경로에 들어 있는 폴더들이 다 나옵니다. cd desk를 입력하고 tab키를 누르면 desktop이 자동 완성됩니다. 보시면 밑에 경로는 위와 다릅니다. 만약에 현재 경로에서 빠져나가고 싶으면 cd ..을 입력하면 현재 경로의 상위경로로 빠져나갑니다. git clone 주소 를 입력하고 프로젝트를 복제합니다. 복제된 폴더를 직접 열어..
브랜치 병합(pull request) 프로젝트 일부 기능 개발 완료 후 master branch로 병합을 해야 됩니다. 프로젝트 대시보드를 열고 pull request를 클릭합니다. New Pull Request를 클릭합니다. 빨간 박스 그리는 부분을 잘 살펴야 됩니다. 왼쪽 base는 줄기고, 오른쪽 compare는 변경사항이 있는 branch입니다. 오른쪽 branch가 왼쪽으로 병합하는 겁니다. 꼭 확인하셔야 됩니다! 병합방향을 잘못되면 기존 코드가 날라갈 수 있습니다. 문제없는 것을 확인 후 Create pull request를 합니다. 병합하는데 코멘트를 남길 수 있습니다. 팀워크에서는 다른 사람이 헷갈릴 수 있어서 적지만 여기서는 생략하겠습니다. Create pull request를 클릭합니다. Pull Requests 옆에 숫자..
스타벅스 클론(16) - 로그인 페이지 로그인 페이지를 만들어보겠습니다. 로그인 페이지는 기존 메인페이지와 유사한 부분이 많습니다. 공통적으로 사용할 수 있는 부분을 따로 관리하겠습니다. 로그인 페이지는 메인페이지의 header나 footer 부분과 같아서 메인페이지 해당부분 복사해서 signin의 index.html에 붙이겠습니다. 붙이고 나서 약간의 수정이 필요합니다. 예를 들어 head부분에 라이브러리나 youtube api를 제거합니다. 또는 이미지나 main.js의 경로를 수정해야 합니다. master branch시, html의 경로는 모두 정대경로라 ./만 앞에 붙이면 되지만, signin는 폴더 하나 더 있어서 ../로 수정해야 합니다. Windows: Ctrl + H MacOS: Cmd + Option + F 위 단축키를 사용해..

티스토리툴바