까막눈코딩

1. 배경 지난번에 보완하기로 했던 내용들 중 일부를 보완했다. 2. 변수의 범위 제한 - 사용자가 입력할 수 있는 year, month, date의 범위를 실제 달력과 일치하게 제한해야 할 필요가 있다. 이 경우, 범위를 벗어나는 경우, 확인 버튼을 누르지 않아도 경고 메시지가 출력되도록 하고 싶다. - 변수의 범위를 제한할 때는 if문을 이용해 제한하는 수밖에 없다고 한다. 그러므로 애초부터 input type에 text가 아닌 date를 줘서 날짜를 받아오는 편이 좋아 보인다. 다만, 처음 구상했던 내용과는 다르기 때문에 조금 더 생각해 볼 필요가 있다. 3. 메시지 출력창 단일화 - 사용자가 값을 입력하는 만큼 결과 메시지가 출력되는 문제를 해결해야 한다. - 위 문제점은 innerHTML을 사용..

Experience/[Javascript] Age Calculator 2021. 4. 20. 16:31

1. 배경 마우스를 누른 상태로 움직이면 이를 따라 색칠이 되는 캔버스를 구현하고자 한다. 마우스가 이동됨에 따라 크기와 색깔이 변한다. 2. HTML, CSS 3. Javascript 먼저 querySelector를 이용해 HTML의 canvas 태그를 선택하고, canvas 변수에 할당한다. 또, 여기에 getContext 매소드를 사용해 드로잉 컨텍스트를 반환한다. 매개변수를 2d로 하여 2차원 렌더링 컨텍스트를 반환하고, 이를 변수 ctx에 할당한다. 여기부터는 초기 설정과 같다. 캔버스의 넓이를 window.innerWidth, window.innerHeight 를 통해 윈도우의 크기에 맞게 설정한다. strokeStyle로 도형의 윤곽선 색을 설정하고, linecap으로 선의 모양을 둥글게, ..

Experience/[Javascript] JS 30 2021. 4. 20. 00:42

branch가 나뉘기 전의 공통의 조상을 base라고 한다. 병합을 수행하려면, 병합을 진행하고 싶은 branch로 이동한 뒤, 'git merge branch' 명령을 통해 branch들을 병합할 수 있다. 에디터에 병합 사유를 입력하고 나면 병합이 완료되며, 위 로그는 master에서 branch1을 병합(git merge branch1)한 결과이다. branch와 master에서 각각 다른 파일을 수정한 경우, 수정한 파일의 이름이 각각 branch.txt와 master.txt라고 가정한다면, master에서도 branch.txt가 수정된 상태로 존재하게 될 것이다. 뿐만 아니라, branch와 master에서 각각 samefile.txt의 다른 부분을, 이를테면 a와 b를 각각 수정했다면, 이를 ..

Knowledge/Git 2021. 4. 18. 20:30

1. Array APIs 배열 API에 관한 연습 문제들이다. // ## Array Cardio Day 2 const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nic..

Experience/[Javascript] JS 30 2021. 4. 18. 11:20

1. 배경 이전에 만든 Age calculator를 몇 번 실행시켜본 결과, 다음과 같은 문제점이 발생했다. - 현재 날짜 기준으로 생일이 지난 경우, yyyy-year 값을 리턴해야 하는데 여전히 yyyy-year-1 값을 리턴했다. - 나이의 한도를 0~150세로 잡고 싶다. - innerHTML은 보안상의 이유로 쓰지 않는 것이 좋다고 한다. 2. Refactoring: parseInt(string, n) const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); const mm = String(today.getMonth() + 1).padStart(2, '0'); const yyyy = today.getFullYea..

Experience/[Javascript] Age Calculator 2021. 4. 18. 01:16

Branch는 원본(Master)을 기반으로 하여 조금씩 수정된 복사본을 의미한다. 'git log -p'로 바뀐 내용을 확인할 수 있고, 'git log --all'로 모든 branch를 확인할 수 있다. 또한 branch를 시각적으로 확인하기 위해서 '--graph' 명령어를, 한 줄로 표현하기 위해서 '--oneline'을 사용할 수 있다. branch 상황을 한 눈에 편하게 보기 위해서는 이들을 병용해서 'git log --all --graph --oneline'를 사용하면 좋다. 'git branch' 명령을 통해 branch의 목록을 확인할 수 있고, 현재 사용하고 있는 branch는 *로 표시되어 있다. 'git branch branch명' 명령을 통해 새로운 branch를 생성할 수 있다...

Knowledge/Git 2021. 4. 17. 19:54

1. 배경 검색어 자동완성 기능을 만들고자 한다. 미국의 주나 도시들 중, 입력하는 내용을 포함하는 주나 도시를 표시하도록 하고, 해당 글자에 색깔을 칠하며, 도시의 인구 수를 오른쪽에 입력할 것이다. 2. HTML Filter for a city or a state 3. CSS html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; } input { width: 100%; padding: 20px; } .search-form { max-width: 400px; marg..

Experience/[Javascript] JS 30 2021. 4. 17. 16:05

'git diff'를 통해 이전 버전과의 차이점을 확인할 수 있다. git log에서 (head) 표시가 되어 있는 것이 현재 작업하는 버전이다. 'git reset --hard 해당commit소스'는, 작업한 것들을 리셋하여 해당 버전으로 돌려준다. 이를테면, 작업 순서대로 1, 2, 3, 4의 버전이 있을 때, 'git reset --hard 2의commit소스'를 실행한다면, 3, 4 버전이 삭제되고 2를 가리킨다. log로 확인해 보면 1, 2만이 남는다. 한편, 'git revert 해당commit소스'는 해당 소스에서 이전 버전으로 되돌아간다. 이를테면, 작업 순서대로 1, 2, 3, 4 버전이 있을 때, 4를 리버트한다면('git revert 4의commit소스') 이전 버전인 3으로 되돌아..

Knowledge/Git 2021. 4. 16. 18:31