📚 코딩애플의 '매우 쉽게 알려주는 git & github'을 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 내 코드를 github에 올리기 repository git이 파일 버전을 저장해두는 장소를 repository라고 한다. 로컬 작업 폴더엔 숨겨진 .git 폴더가 있는데 그것이 repository이다. 실제로 개발할 땐 온라인 repository를 많이 사용한다. (내 컴퓨터에서 만들어둔 저장소를 백업!) push : 로컬 저장소에서 원격 저장소로 옮기기 git push -u 원격저장소주소 main # 원격저장소에 특정 브랜치 푸시하기 git switch 푸시할브랜치명 git push origin 푸시할브랜치명 #origin 안될경우 원격레포주소.git 로컬저장소의 main 브랜치..
📚 코딩애플의 '매우 쉽게 알려주는 git & github'을 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 실수했을 때 되돌아가는 3가지 방법 commit 고유 id 확인하기 git log --online git restore # 파일 하나를 최근 commit된 상태로 되돌리기 git restore 파일명 # 입력한 파일을 특정 커밋아이디 시점으로 복구하기 git restore --source 커밋아이디 파일명 # 그냥 참고!, 특정 파일 staging 취소하기 git restore --staged 파일명 파일 하나가 잘못되었을 경우 ctrl + z를 여러 번 눌러도 되지만 수정 사항이 너무 많다면 위의 명령어 하나로 처리할 수 있다. id 입력 없이 일반적인 방법으로 restore를 ..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 바닐라JS로 기능 실습해보기 🤔 코딩테스트 문제 매일 1-2개씩 풀기 😎 공부한 것들은 꼭 기록하기 😎 '오늘 이것만큼은 꼭 해낼 것' 정하고 노력하기 ✅ 바닐라JS로 기능 실습해 보기 지난주부터 수강 중인 강의에 jQuery가 나오는 부분은 모두 JavaScript로 바꿔보면서 공부를 진행했다. 제이쿼리가 간편하긴 하지만 자바스크립트를 사용했을 때 직접 요소를 골라서 어떻게 처리할지 더 자세히 작성하는 느낌이라, 그만큼 코드가 길어지긴 하지만 재밌었다. 이번 주는 바닐라JS 강의 중에서 자주 추천받았던 노마드코더의 크롬 앱 클론코딩 강의를 수강했다. 해당 강의는 이벤트를 걸 때 왜 EventListener인지, JS가 해당 코드를 어떻게 접근..
📚 코딩애플의 '매우 쉽게 알려주는 git & github'을 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. git에서 branch 만들기 branch 만들기 하나뿐인 원본 파일에 끊임없이 코드를 추가하다가 파일이 망가진다면 어떻게 해야 할까? 이런 걱정 없이 새로운 기능을 추가하고 싶다면, 프로젝트의 복사본을 만들어서 그곳에 먼저 개발해 보는 것도 좋은 방법이다. git에서는 위와 같은 기능을 branch를 이용해 복사본을 손쉽게 만들 수 있다. # 프로젝트 사본 만들기 git branch 브랜치이름 # 브랜치로 이동하기 git switch 브랜치이름 # 메인 브랜치로 돌아가기 git switch main # 설정에 따라 main이 아니라 master일 수도 있음 # 어떤 브랜치에 있는..
📚 코딩애플의 '매우 쉽게 알려주는 git & github'을 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. git 2일 전 코드로 되돌아가려면? 예기치 못한 오류로 인해 2일 전에 작성했던 내용이 필요하다면 어떻게 복구할 수 있을까? 매일매일 파일의 복사본을 만들거나, 버전 관리 소프트웨어를 사용해야 할 것이다. 버전 관리 시스템이란 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 위의 스크린샷처럼 게임은 파일 별로 세이브데이터를 저장해 뒀다가, 이후에 내가 원하는 버전으로 다시 플레이하거나 삭제하며 관리할 수 있다. 이처럼 코드는 git을 이용해 작성한 내용을 버전 별로 관리할 수 있다. 작업한 코드를 기록하고 보관할 수 있고, 이전 버..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. To do Set up input에 to do를 입력하고 버튼 또는 엔터를 눌렀을 때 해당 to do 데이터를 변수에 보관하고, 사용자가 input에 입력한 값은 지워 화면에서 보이지 않도록 설정한다. // HTML Log In 00:00:00 // JavaScript const toDoForm = document.querySelector('#todo-form'); const toDoInput = toDoForm.querySelector('#todo-form input'); const toDoList = document.querySelector('#todo-list'); function ha..
온라인 학습 플랫폼인 프리 코드 캠프(free code camp)에서는 초보자를 위한 40가지의 자바스크립트 프로젝트를 안내하고 있다. 항해99 온보딩주차 팀원분들이 자바스크립트 연습을 위해 해당 프로젝트를 만들어보는 스터디를 제안해 주셔서 기쁘게 참여했다. 오늘의 구현 프로젝트는 Color Flipper! 기능 분석 해당 프로젝트는 다음과 같은 기능을 가지고 있다. CLICK ME 버튼은 클릭할 수 있다.버튼 클릭 시 랜덤한 색상값을 가져와 HTML의 배경에 해당 색상값을 적용시킨다.랜덤한 색상값은 헥스 코드(HEX CODE)를 이용해 표현한다. 헥스 코드란 특정한 색을 표현하기 위한 색상 표현법으로, HEX라는 이름처럼 색상을 6자리의 16진수로 표현한다. 16진수는 0, 1, 2, 3, 4, 5..
웹훅을 만들게 된 이유✅ 항해99의 공부시간 기록 시스템은 공부를 시작할 때 '체크인', 공부를 끝마칠 때 '체크아웃' 버튼을 눌러 해당 시간을 누적하는 방식으로 공부 시간을 측정한다.✅ 공부시간 기록 시스템은 익일 오전 5시에 초기화되고, 5시 이전 마지막으로 기록된 체크아웃 시간을 기준으로 공부시간이 기록된다.✅ 만약 5시까지 연이어 공부 중이었고 시기를 놓쳐 5시 직전에 체크아웃을 미리 눌러두지 못했다면, 해당 시간이 기록되지 않는 마음 아픈 현상이 발생했다. (아까운 내 기록🥲)✅ 따라서 디스코드 알림 웹훅을 만들어 리셋 시간 5분 전인 오전 4시 55분, 체크아웃을 해야 한다는 알림 메세지를 받도록 하고자 한다. 왜 디스코드를 이용했나? 핸드폰 알림으로 다섯시를 맞추면 되지 않느냐고 묻는다면..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Clock Interval interval이란, '매번' 일어나야 하는 무언가를 말한다. (ex. 매 2초) 서버를 주기적으로 확인한다거나, 매 시간마다 주식시장 API를 확인한다거나 해야 할 때 주로 사용한다. 이러한 기능을 제공하는 것이 setInterval()이다. ✨ setInterval(code | func[, delay]) - 첫번째 매개변수: 내가 실행하고자 하는 code 또는 function (단, code는 보안 상의 이유로 사용을 권장하지 않음) - 두번째 매개변수: 호출되는 code 또는 function의 간격을 몇 ms로 할 것인지 설정 Timeout timeout은 '..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Input Values 이름을 입력받을 input과 버튼을 만든 후, 버튼 클릭을 감지해서 input의 입력값을 console.log에 찍어본다. // HTML Log In // JavaScript /* const loginForm = document.querySelector('#login-form'); const loginInput = loginForm.querySelector('input'); const loginButton = loginForm.querySelector('button'); */ // * 위의 코드를 더 짧게 바꿔보기 // 이와 같이 document 또는 하나의 eleme..
