2. Front-end

JS - [위치 정보 받아오기(getCurrentPosition) / Weather 기능]

1. 위치 정보 받아오기 날씨 기능을 추가해보자! 우선 사용자의 위치 정보를 얻어와야 한다. navigator.geolocation.getCurrentPosition( ) 함수를 사용하면 user의 위치(geolocation)을 얻을 수 있다. 브라우저가 알아서 WiFi, 위치, GPS 정보 등등을 제공해준다!! getCurrentPosition( ) 함수는 2개의 argument가 필요하다. 하나는 모든 게 잘 됐을 때 실행 될 함수, 다른 하나는 에러가 발생했을 때 실행 될 함수이다. 다음과 같이 함수를 작성했다. 유저의 위치 정보를 받아오면 onGeoOk 함수를, 위치를 받아올 수 없으면 onGeoError 함수를 실행할 것이다. 브라우저에서 실행하면 권한을 요청하는 창이 뜬다!!!!! 허용하고 c..

JS - [To Do리스트 만들기(JSON.stringify / JSON.parse / filter)]

Adding To Dos Todo list를 만들어보자. 우선 사용자가 Todo를 입력할 form과, Todo를 나열할 list가 필요하다. 아래와 같이 form과 list를 만들었다. 해당 요소들을 JS에 가져오고 submit event를 작성해보자. 우선 브라우저의 기본동작을 막고(submit이므로 새로고침), input의 value를 받아온다. 지금은 값을 넣고 Enter를 누르면 입력값이 그대로 남아있다. 이는 value에 빈 값("")을 넣으면 간단히 해결된다. 그리고 그 전에 입력값을 저장해주도록 한다. 새로운 함수를 만들어서, 입력값을 리스트 요소로 추가해주도록 하자. 이 때 li안에 span 자식을 만들고, span 태그 안에 입력값을 넣어주자. 그럼..

JS - [random하게 출력 / JS에서 html요소 추가]

1. random하게 출력 random 5가지의 명언과 작가들 중 하나를 랜덤하게 출력해보는 방법을 알아보자. quote 아이디를 가진 div태그 안에 두 개의 span 태그를 만들었다. 첫 번째 요소에 명언, 두 번째 태그에 작가를 출력할 것이다. 명언과 작가는 배열안에 객체로 생성했다. Math module안에 random() 함수를 사용하면 0부터 1사이의 랜덤한 숫자를 가져올 수 있다. 우리는 0부터 5사이의 숫자가 필요하다. 그러니 random()*5로 사용하면 된다! 그리고 출력해보면 뒤에 소수점이 출력되는 걸 확인할 수 있다. 우리는 소수점이 필요 없다. 소수점을 없애는 function으로 3가지가 있다. 참고로 3가지 모두 Math 모듈 안에 있다. round() : 반올림 ceil() :..

JS - [clock 기능 - intervals / timeout / Date object / padStart]

1. intervals 참고로 기능에 따라 js파일은 분할해서 만드는게 보기 좋다. 시계를 만들 것이므로 따로 clock.js파일을 생성해서 작업했다. interval은 매번 일어나야 하는 무언가를 의미한다. 예를 들어 매 2초마다 무슨 일이 일어나게 하고 싶을 때 쓴다. JS에서 이런 기능을 제공하는 tool이 setInterval() 이다. setInterval()은 두개의 인자를 받는데 첫번째 argument는 실행하고자 하는 function이고, 두번째 argument는 호출되는 function 간격을 몇 ms로 할지 쓰면 된다. 예를 들어 setInterval(sayHello, 5000); 과 같이 작성하면 sayHello 함수를 5초마다 실행한다는 의미이다. 2. timeout setTimeo..

JS - [Login 기능 - localStorage(입력값 저장, 불러오기)]

이제 유저가 이름을 제출하면 FORM이 없어지도록 해보자. 1) html 요소 자체를 없내는 방법 2) CSS를 이용해 숨기는 방법이 있다. 2) 방법을 알아보자! CSS에 숨기는 속성을 가진 hidden 클래스를 만들고 숨길 요소에 이 hidden classname을 주면 된다. 아래와 같이 form을 제출했을 때 기본 동작은 막아주고, 유저 이름은 username에 저장하고, classname을 추가하고, 확인 차 username을 출력하는 코드를 작성했다. 그러면 입력창에 이름을 입력 후 Log In 버튼을 누르면 form은 사라지고 입력값은 console에 기록된다. 그리고 아래와 같이 body 태그에 hidden 클래스를 가진 h1 태그를 추가했다. 이제 f..

JS - [Login 기능 - Input / form / event object(preventDefault) ]

1. input HTML에 다음과 같이 코드 작성 후 JS에서 다음과 같이 login-form id 아래의 input과 button 요소을 가져왔다. value는 input에 입력한 텍스트 값을 의미한다. 따라서 [ HTML element.value ]와 같이 input 태그에 사용자가 입력한 값을 받아올 수 있다. 이번엔 username(사용자가 입력한 값)의 유효성을 검사해보자. username이 비어있어도, 너무 길어도 안 된다. 아래와 같이 username이 공백이거나 15자를 초과하면 알림창을 띄우도록 설정했다. 이러한 방법을 사용해도 되지만, 브라우저 자체의 기능을 이용할 수도 있다. input 태그 안에 required 값을 넣으면 필수 입력항목이 되고, maxlength=" " 값을 넣으면..