# 학습 내용 정리/JSClock CloneCoding(JS) 검색 결과
6 개의 검색 결과가 있습니다.
# 학습 내용 정리/JSClock CloneCoding(JS)

[JSClock 클론코딩] 5. 마지막으로 날씨 API를 사용해보자! (完)

길고 길었던 JS 클론코딩의 마지막 시간입니다! 오늘은 API를 가져와서 날씨정보를 출력해보도록 하겠습니다! 목차 0. index.html 날씨를 알려주는 부분을 span을 통해 만들어줍니다. div로 해도 상관은 없습니다. 그리고 script를 추가합니다. 00:00 1. weather.js 먼저 현재 위치를 파악하기 위해서 askForCoords()를 사용합니다. navigator.geolocation.getCurrentPosition을 통해 사용자의 현재 위치를 요청할 수 있는데, 여기서 사용자가 원하지 않을 수 있기 때문에 잘 불러온 경우(handleGeoSucces)와 잘 불러오지 못한 경우(handleGeoErro)로 나눠서 함수를 작성합니다. 한 글자씩 빠져있는 이유는 니꼬쌤의 재치..가 아..

2021. 5. 14. 22:22
# 학습 내용 정리/JSClock CloneCoding(JS)

[JSClock 클론코딩] 4. 배경화면을 만들어보았다.

이번 포스팅은 약간 쉬어가는 시간이 될 수도 있는 배경화면 제작에 관한 내용입니다! 본 내용은 바닐라 JS로 크롬 앱 만들기의 #3.7 강의 내용을 바탕으로 포스팅되어있습니다! 목차 0. index.html 항상 그랬듯이 script만 추가되었다고 보시면 됩니다. 00:00 1. index.css 이번 css는 아무래도 배경화면에서 만질 부분들이 많다보니 많은 것들이 추가되었습니다. keyframes는 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임을 설정하여 애니메이션을 컨트롤할 수 있게 해줍니다. 보다 자세한 내용은 아래 MDN을 참고하세요! https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes @keyframes - CSS: Cascadin..

2021. 5. 14. 21:11
# 학습 내용 정리/JSClock CloneCoding(JS)

[JSClock 클론코딩] 3. ToDoList를 작성하자!

이번 포스팅에서는 우리가 만드는 애플리케이션의 가장 핵심적인 부분인 ToDoList입니다. 가장 어려운 부분이기도 하니 주석을 잘 참고하셔서 이해하시면 좋겠습니다!! 본 내용은 바닐라 JS로 크롬 앱 만들기의 3.4~3.6 부분 강의에 대한 내용정리입니다! 목차 0. index.html toDoList를 작성하는 부분과 출력하는 부분, 총 2가지가 추가되었습니다. 별도로 이모지 출력 문제때문에 mata charset="uft-8"을 추가한 부분이 눈에 띄네요. ul, form과 같은 html 관련 내용은 설명하지 않고 넘어갑니다! 00:00 1. todo.js if문을 사용한 조건문을 통해 할 일이 있다면 출력하고, 없으면 출력하지 않는 기능과 form을 통해 새로운 ToDoList를 작성할 수 있는 기..

2021. 5. 14. 20:16
# 학습 내용 정리/JSClock CloneCoding(JS)

[JSClock 클론코딩] 2. 데이터를 저장해보자!

다들 컴퓨터는 도대체 어떻게 내가 사용했던 정보를 기억하고 있을까 고민한 적이 있었지 않나요? 나만 그런건가.. 당연히 기억을 위해서는 저장공간이 필요합니다. 그 저장공간은 브라우저 내부에 형성되고, 그 저장공간에 있는 자료들을 불러오면서 기억을 해 내는 것이죠. 이것을 localStorage라는 함수를 통해 실제로 사용할 수 있습니다! localStorage.setItem()을 통해 설정해주고, getItem을 통해 string형태로 가져올 수 있는 것이죠. (localStorage는 URL을 기반으로 저장됩니다!!) 위의 사진을 통해 이것의 간단한 사용 예를 가져왔습니다. 이번 글에서는 이 localStorage라는 것을 통해서 이름을 저장하는 기능을 구현해보도록 하겠습니다. 목차 0. index.h..

2021. 5. 14. 18:42
# 학습 내용 정리/JSClock CloneCoding(JS)

[JSClock 클론코딩] 1. 시계를 만들어 보았습니다.

이번에는 시계를 만들어보도록 하겠습니다. 위와 같은 모양의 시계인데, 별거 아닌 것 같죠? 실제로도 쉽게 만들 수 있습니다. 목차 0. index.html 가장 먼저 만들어야 할 파일은 html입니다. 동적으로 만들어주고 싶더라도 내용물이 없을 순 없으니까요. (물론 JS로 넣어줄 순 있습니다만..) 00:00 별다른 내용이 없어 주석처리를 하지 않았습니다. 이번 클론 코딩의 목적은 JS 공부이므로, html에 나오는 내용들을 따로 정리하진 않겠습니다! 특이점이라고 하면 body의 맨 끝에 를 이용하여 js파일을 불러들입니다. 1. clock.js 이제 동적으로 만들기 위해서 js파일을 만들어줍시다. js파일의 가장 기초인 init()를 만들어줍니다. init() 안에는 시간을 불러오기 위한 함수인 ge..

2021. 5. 14. 17:53
# 학습 내용 정리/JSClock CloneCoding(JS)

[JSClock 클론코딩] 0. VanillaJS??

쿠챌린저스 프로젝트를 하기 위해서 JS에 대해 아무것도 모르는 저는 JS공부를 위해서 이것저것 찾아봐야 했습니다. 여러 사이트를 돌아다니고 유튜브를 전전하며 공부하고 있을 때쯤 각자 공부한 내용을 발표하는 시간에 친구가 Nomadcoders 사이트를 유용하게 사용중이라고 해서 들어갔다가 챌린지라는걸 정말 우연히 발견해서 참여하게 되었고, 그 과정에서 배우고 따라한 내용들을 블로깅하려고 이렇게 글을 남깁니다. 어떤 회의였나..는 아래 링크에 담겨있습니다!! https://ssocoit.tistory.com/56?category=929575 [쿠챌린저스] 5. 피그마.. 피그마!! 3/27 회의는 지금까지 회의 중에서 가장 빡세게 회의 및 실무를 진행한 날이 아닐까 생각해봅니다. 그동안 9시부터 12시까지 ..

2021. 5. 14. 05:38