웹 개발 공부

DB로 하는 것이 옳습니다. 그러나 DB를 배우기 전에 사이트에 틀이라도 회원가입을 구현하고싶어서 localStorage를 사용해봤습니다. 실전에서는 회원가입은 localStorage로 진행하면 절대 안됩니다. 민감한 정보들을 다루기 때문입니다. 또한 localStorage는 개발자도구에서 저장한 데이터를 볼 수 있습니다. #HTML 추가로 name하고 싶다면 type, id, plascholder 값만 다르게 지정하시면 됩니다. name의 type은 "text"로 하시면 됩니다. # JS const singUpForm = document.querySelector('.singUp-form'); const email = document.getElementById('email'); const password..

음.. 실시간으로 처리되는 것처럼 해야 할 부분이 있어서 setTimeout을 사용했습니다.. 깜빡임 없이 하려면 PHP를 사용해야 한다던데 음.. 이 부분은 아직 모르겠습니다만.. 추후 하고 알아보다 보면 이보다 더 나은 방법으로 하지 않을까싶습니다. #HTML function autoNumber(){ location.reload(); // 새로고침. }; setTimeout('autoNumber()', 1000); // setTimeout('함수이름()', 시간(ms)); 저는 따로 js 파일만들어서 하지 않고 HTML 파일에 script 태그 안에 넣어서 진행했습니다. 이렇게 하면 페이지 자체가 1초마다(밀리세컨즈(milliseconds), 1000분의 1초) 새로고침 합니다. millisecond..

회원가입 구현 부분도 로그인과 같이 업데이트할 예정입니다. # HTML 이렇게 form과 input를 만들었습니다.(* 참고로 서버에 전송하지 않고 js 파일에서 불러와 비교하고 브라우저에 실행하는 방식이기에.. method, action를 사용하지 않았습니다.) 정말로 이 password로 할 것인지 한번 더 입력을 받았습니다. 그럼으로써 오타 같은 실수를 방지시켜줄 수 있습니다. (제가 password 한 칸이 더 있고 없고의 차이를 느꼈었기에 압니다..) # JS 그리고 필요한 태그들을 JS 파일에 불러옵니다. const signUpForm = document.querySelector(".signUp-form"); const upName = document.getElementById("signUp-..

이전의 게시글에 언급한 대로 로그인 구현에 대해서 다뤄보려고 합니다. localStorage로 정보 저장하고 불러와서 비교하는 식으로 진행하였었는데, localStorage에 정보가 저장되면 로그인/회원가입 버튼이 사라지게 했던지라 회원가입만 해도 사라지더군요. 그래서 localStorage에 대한 건 따로 개인적으로 해보고 회원가입은 Cookie로 적용하고나서 다룰 예정입니다. 생활코딩 web 강의를 듣지 않았다면 꼭 들어보시는 걸 추천드립니다. 처음에 접할 때(-전혀 1도 모를 때 -) 수업량에 겁에 질려서 다른 강의를 알아보고 수강했었습니다... 결국에는(?) 자바스크립트에대한 구체적이고 세세한 지식이 필요해서 생활코딩 강의를 들었는데.. 신세계입니다. 음. 그러니까 음. 좋다는 뜻입니다. 이제 시..

블로그 활동이 뜸해지기 시작했어요.. 정확히 알고 있는 지식으로 해보자 하여 로그인 구현을 하면서.. 음. 로그인 구현이 오래 걸린 건 아닙니다. 다만.. 호기심에 promise 적응할 겸 적용하다가 늦어졌는데, 아직 이해가 부족하다는 사실을 절실히 느끼고 블로그로 돌아왔습니다. 로그인 구현에서 쿠키를 안 배워서 localStorage 로 저장을 했었는데 나름 이해하거나 적응하는 쪽으로 도움이 될 수 있을 것 같아서 오늘 올리려다가 이전에 현재 시간 구하는 법을 알아보자라고 한 글을 발견하고 올립니다. # HTML 일단 html 파일에 시간을 출력할 태그를 만들었습니다. # JS 이어서 자바스크립트 파일에 document를 이용해서 해당 태그를 불러옵니다. const clockText = document..

비동기 처리로, json의 데이터를 html 태그에 전달하려고 fetch API를 쓰는데 Fetch API cannot load 에러가 발생해서 구글링 해보았더니 Fetch API가 제대로 작동하려면 index.html을 로컬로 제공하거나 사이트를 라이브 서버에 호스팅 해야 한다고 합니다. 해결 방법은 npm 또는 live server을 설치하고 작동하는 모든 서버에 실행하면 됩니다. 아래에는 해당 사이트 링크입니다. https://www.python2.net/questions-231387.htm javascript - 이 코드의 "URL 스킴은"http "또는"https "여야합니다"오류를 해결하는 방법 console 에 아래 메시지가 표시됩니다 . sandbox.js:1 Fetch API cannot..

전에 다룬 D-day 게시글을 이어서 디데이까지 남은 시간을 구해봅니다.. 우선 이 전에 inenerText 할 요소를 const로 선언도했었고, function도 생성했었습니다. 그대로 이어서 진행하겠습니다. 일단 같은 function 안에 시(House), 분(Minutes), 초(Seconds)를 아래와 같이 지정해줍니다. const house = Math.floor((timeTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeTime % (1000 * 60))/1000); ..

html에 time을 출력할 태그를 가져와서(document.querySelector("")) 상수(const)에 넣습니다. const timeText = document.querySelector('#main-time'); 이어서 function을 만듭니다. function dDayTime(){ } 이제 Date를 상수에 넣어야 하는데, 일단 function 안에 D-day에 필요한 상수를 2개 만듭니다. (D-day 날짜를 지정하는 함수와 오늘 날짜 상수) const dDay = new Date("October 01, 2021 00:00:00"); const toDay = new Date(); 그리고 오늘 부터해서 지정한 10월 1일까지의 일수를 구하기 위해, dDay에서 toDay를 뺀 값을 넣을 상..

노마드 코더의 카카오 클론에다가 기능을 적용해보았습니다. 위는 클릭하기 전 상태입니다. 하트 버튼 클릭 시 숫자는 올라가고 하트 아이콘 색이 변하도록 적용했습니다. # HTML 126 하트 아이콘은 fontawesome에서 가져왔습니다. fontawesome 아이콘을 쓰려면 링크를 가져와야 하는데, 위 를 사용하시면 됩니다. 그리고 는 제일 맨 아래에 두셔야 합니다. #CSS .heart-Button{ width: 100px; height: 100px; border: none; border-radius: 50%;// 원 }; .fa-heart{ width: 50px; }; 버튼의 라인를 없애기위해서 border:none을 사용했습니다. # JS 이어서 js 코드부터 올리고 왜 이렇게 했는지 설명을 덧붙이..

- 글을 쓰기 앞서 이 블로그는 공부 내용들을 정리 & 노출함으로서 공유하기 위해 쓰는 용도라 존댓말을 쓰지 않음을 알립니다. 쿨한 척은 결단코 아닙니다. 단지 이 말투가 편하네요. - 유용한 정보를 공유한다는 건 참 좋은 일인 것같습니다. (늘 감사합니다.) 유저의 좌표를 알기위해 일단은 navigator.geolocation()을 사용합니다. navigator.geolocation()이 무엇인 mdn에 검색해보니, - Navigator.geolocation() 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 Geolocation 객체를 반환합니다. - 라고 합니다. ※ 보안 상의 문제로, 웹 페이지가 위치 정보에 접근을 시도하면 사용자에게 알림을 보내고 권한을 허용할지 묻는다고 합니..