[CodeStates-Section1]U12.Coz’ Mini Hackathon

1.후기

 Advanced Challenge까지 완료했다. 제시간에 끝낸 것은 아니고 하루 더 걸렸다. 그래도 끝까지 해낸 게 너무 뿌듯하다. 처음 코드를 짤 때는 "구글에 올라온 다른 사람의 코드를 보고 적당히 바꿔주면 더 쉽지 않을까?"라는 생각을 했었다. 하지만 얼마 안 가 남의 코드를 이해하고 수정하는 것도 생각보다 어려운 일이라는 것을 깨달았다. 그래서 기능 구현을 위해 어떤 함수가 필요한지 생각해보고, 그것에 맞게 수도 코드를 작성한 후 전체 코드를 완성하였다. 못할 것이라고 생각했는데 포기하지 않고 하다 보니 성공했다. 하는 동안 힘들고 '나 바본가?'라는 생각도 여러 번 했지만 정말 재밌었다. 많이 성장한 것 같아 기분이 좋다!!

배포 링크: https://qwerty00ui88.github.io/fe-sprint-my-agora-states/
깃허브: https://github.com/qwerty00ui88/fe-sprint-my-agora-states

2.새롭게 알게 된 것

Section1-Unit12 - Coz’ Mini Hackathon
Chapter1. Git으로 협업하기
과제1. 나만의 아고라 스테이츠 만들기
과제2. 나만의 아고라 스테이츠 배포하기
과제3. 나만의 아고라 스테이츠 제출하기

<Chapter1.Git으로 협업하기>

1) repository
Git에서 코드를 저장하는 공간

2) git init, add, commit
git init: 코드를 저장할 디렉토리(working directory)를 만들고 해당 디렉토리에 로컬 Git repository를 생성.
git add: 코드를 작성하고 저장하는 공간, 작업 공간(work space)의 파일 및 디렉토리를 git의 관리하에 있는 상태로 올려줌. 이 영역을 staging area라고 함.
git commit: local Git repository에 내 코드 기록

3) 비유

김코딩은 이사를 하기 위해서 물건을 무빙 박스에 담아야 합니다. 무빙 박스에는 물건을 넣을 수도 있고 꺼낼 수도 있습니다. 주방, 거실, 침실의 물건들을 같은 상자에 섞으면 나중에 꺼내어 볼 때 불편하기 때문에 같은 용도의 물건들을 한 박스에 넣은 후 각각의 용도를 라벨링을 해두려고 합니다.

무빙 박스: staging area
git commit -m "라벨": 박스에 어떤 용도의 물건인지 간단한 코멘트를 적은 라벨링 하는 동작

4) git status,git rm

5) 새로운 애플리케이션을 제작하기 위해 원격 Git 리포지토리를 만들고 다루는 과정
-Github에서 원격 리포지토리를 생성
-로컬 리포지토리에 원격 리포지토리 git url을 등록(git remote add)
-로컬 Git repository에 기록한 내역을 원격 Git repository에 push(git push)

-예시
깃허브에서 New 버튼으로 원격 레포지토리 생성

로컬 레포리토리 터미널에서 git remote add, git push 실행

6) git reset
git reset HEAD^: 최신 커밋 취소 + 스테이지 취소
git reset HEAD^취소 수량: 취소 수량만큼 최신 커밋 취소

7) git push 옵션 '-u'
현재 브런치를 자동으로 원격저장소로 연결
-형식: git push -u 원격저장소 현재브런치명

-예시
원격저장소 이름: origin
현재 브런치명: main
git push -u origin main

main 브런치를 자동으로 origin이라는 원격저장소에 연결

이제 push pull 시, git push origin main, git pull origin main 대신 git push, git pull만 입력해도 됨

8) 내 커밋 로그 확인
git log

9) 해당 디렉토리에 git repository를 생성되었는지 확인하는 법
ls -al 명령어로 .git 폴더가 있는지 확인

10)

<과제>

1) 컴포넌트(component)
“하나의 역할을 하기 위해 모인 무언가의 집합”
프론트엔드에게는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음"

2) 자바스크립트 ---> html
돔 메서드를 사용해서 변환
데이터를 하나의 디스커션(li 요소)으로 만듦

3)
new Date(문자열): 날짜, 시간 형식으로 반환
toLocaleTimeString(): 날짜의 시간 부분을 언어별로 표현한 문자열을 반환

4)
localStorage: 데이터 만료되지 않음
sessionStorage: 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 데이터 사라짐

5) localStorage

localStorage.getItem('키')//키로 값 가져오기
localStorage.setItem('키', '값')//키와 값을 저장
localStorage.removeItem('키')//키와 값 삭제
localStorage.clear()//저장소 비움

6) querySelectorAll 안의 element에 클릭 이벤트를 주는 법
: for...of 구문 사용

const page = document.querySelectorAll('.pageNum');
for (const prop of page) {
  prop.addEventListener('click', () => {
    firstData = (Number(prop.textContent) - 1) * dataPerPage;
    lastData = firstData + dataPerPage - 1;
    console.log(prop, firstData, lastData);
  });
}