으쌰으쌰
-
🌪 OpenWeather API 사용하기으쌰으쌰 2023. 6. 2. 19:16
말그대로 OpenWeather API를 사용해봤다. 나중에 까먹었을 때 바로 찾을 수 있도록 기록해둔다. 1. 회원가입 > 로그인 2. myAPIkey 로 가서 API 복붙 해두기. 3. Curren Weather Data 그밖에도 여러가지 API가 존재하지만 1. 현재 위치정보를 받아온다. 2. 지역명, 온도, 날씨(맑음, 흐림, 비..등등) 을 사용하고 싶었기 때문에 Current Weather Data 를 사용했다. 4. API call 아주 친절하게 API를 부를 url을 알려주고 있다. 여기서 알아야 할 세 가지의 정보를 알 수 있다. 1. lat (latitude :위도) 2. lon (lolongitude :경도) 3. API key 이다. 3번 API key는 위에서 복붙해놨던 걸 사용한다..
-
바닐라JS 로 만드는 북마크 웹앱 📓 (2) 게시물 편으쌰으쌰 2023. 2. 4. 19:40
바닐라 JS로 만드는 북마크 웹앱 📓 2편 ~ 게시물 편 ~ 게시물이라고 하기에는 애매하지만 설명의 편의를 위해 게시물 편이라고 이름 지었다. 정확히는 인상 깊은 구절, 발췌 내용 등을 기록한다는 느낌이 강하다는 걸 먼저 밝힌다. 참 고민도 많고 시간도 많이 걸린 게시물 편을 기록한다. 🤸🏻 구현한 기능은 게시물 저장 / 확인 / 수정 / 삭제로 총 네 가지 기능이다. 천 리 길도 한 걸음부터, (0) 계획 편 (1) 회원가입/로그인 편 보러 가기 👏 📌 계획편 📌 회원가입/로그인 편 ✔︎ 게시물 저장 0. 로그인을 성공하면 게시물 작성을 위한 form이 보인다. 1-1. 발췌내용을 저장하는 textarea. 1-2. 출처명을 적는 (책 제목, 화자 이름 ... 등) input(type=text). 1-..
-
바닐라JS 로 만드는 북마크 웹앱 📓 (1) 회원가입, 로그인 편으쌰으쌰 2023. 1. 25. 16:16
바닐라 JS로 만드는 북마크 웹앱 📓 1편 ~ 회원가입, 로그인 편 ~ 로컬스토리지를 사용해서 회원가입, 로그인 기능을 구현하는 건 저번에 해 본 경험이 있다. 덕분에 (처음보다) 쉽게 구현할 수 있었다. 최선을 다했지만 그때보다 더 적당한 코드를 사용했는지, 무엇을 수정하면 좋았을지.. 등등 혼자 판단하기 어려웠다는 점이 아쉽다. 하지만 이것만은 확실하게 깨닫고 있다. 기록은 언제 어디서든 도움이 될 수 있다는 사실! 간단하게 회원가입, 로그인 기능을 구현한 코드 등을 남겨둔다. 🤸🏻 천 리 길도 한 걸음부터, 로그인 회원가입 기능 구현 게시물 보러 가기 👏 (1) 회원가입 편 (2) 로그인 편 (3) 총정리 편 ✔︎ 회원가입 1. ID 중복 검사 (입력받을 때마다 체크) 2. 비밀번호 확인 검사 (같..
-
바닐라JS 로 만드는 북마크 웹앱 📓 (0) 계획 편으쌰으쌰 2023. 1. 24. 18:37
이번에 만들어 볼 웹앱은 바로바로~~ 📓 북마크 웹앱 📓 저번과 다르게 계획서부터 (?) 차근차근 하기 위해서 이번엔 0편! 계획 편! 0. 북마크 웹앱 ? 처음에는 To-Do 리스트를 구현해볼까 했지만, 이왕 하는 거 비슷하지만 관심있는 걸 만들고 싶었다. 투두리스트 같은 경우에는 매일 들어가서 사용해야하지만, 이상하게 컴퓨터나 핸드폰으로 하면 매일 하기 힘들어서 ^👅^;; 가끔 들어와서 와다다다 기록하는 나만의 장소 ... 가 갖고 싶었다. 책 읽으면서 필사를 자주 하는 편인데 그것들을 좀 더 보기 편하게 정리할 수 있겠다! 싶어서 바로 구현 도전. 1. 어떤 기능을 구현할까? 만들고 싶은 기능 아무렇게나 적어두는 것 보다는 주기능 / 부가기능으로 나누기로 했다. 주기능 ✔︎ 로그인 ✔︎ 회원가입 ✔..
-
localStorage 를 이용해서 로그인 / 회원가입 구현하기! (3) 수정, 추가 마지막 정리 편으쌰으쌰 2023. 1. 21. 18:42
GIT🧑💻 gif 촬영이 조금 이상하게 됐지만 ... 원하던 기능을 구현하는 데에 성공! 했다. js 코드 수정을 꽤 했는데 그래도 나름 이해했다고(?) 원하는대로 변경돼서 다행이었다. 완성한 걸 보니 허접하지만서도 뿌듯함을 감출 수가 없군 ~~ 다음에 만들 것도 열심히 만들어봐야겠다!! 완성한 코드 👇 로그인 로그인 회원가입 index.html (login) 회원가입 아이디 비밀번호 비밀번호 확인 닉네임 생일(선택) 가입 signup.html .hidden { display: none; } html, body { height: 100%; margin: 0; } .main { height: 100%; display: flex; flex-direction: column; align-items: cente..
-
localStorage 를 이용해서 로그인 / 회원가입 구현하기! (2) 로그인 편으쌰으쌰 2023. 1. 20. 20:38
로그인 기능 구현을 기록한 게시물이다. 회원가입에 비해 로그인은 해봤던 걸 다시 아주 간단히 반복 하는 것이라 (비교해서) 아주 쉽게 구현할 수 있었다. GIT🧑💻 ✔︎ 로그인 기능 1. 아이디 - 비밀번호가 맞으면 로그인이 성공. 2. 아이디가 localStorage에 저장되어 있지 않다면 "아이디가 없다"는 출력 3. 아이디는 localStorage에 있지만, 비밀번호가 틀릴 경우 "비밀번호 확인 요청" 출력 4. 로그인이 성공하면 form은 사라지고 (class hidden) h1태그 안 내용 변경 4-2. h1 > 로그인 대신 닉네임 님 반갑습니다! 출력 👇 HTML 로그인 로그인 회원가입 👇 CSS .hidden { display: none; } 👇 JS const loginForm = doc..
-
localStorage 를 이용해서 로그인 / 회원가입 구현하기! (1) 회원가입 편으쌰으쌰 2023. 1. 20. 20:19
localStorage를 이용해서 간단한 로그인, 회원가입을 구현할 것이다. 나의 작은 도전 ~ 뭐든 남겨두면 나중에 꼭 까먹고 도움이 되어주기에 ... 최대한 세세하게 남겨본다!!! GIT🧑💻 만들려는 것 로그인, 회원가입 기능 구현 HTML -> JS -> CSS -> 갈무리 수정 및 추가 순서로 진행해볼까 한다. 왜? 어떤 웹페이지에 있어서 로그인, 회원가입 기능은 기본 같은 것이라고 생각했다. !! 다음에 만들고 싶은 웹페이지를 위한 준비운동(?) 겸! localStorage를 직접 써볼 기회를 만들고, 이해도를 높이기 위하여. 바닐라JS 숙련도를 올리기 위해! 사용한 언어 HTML, CSS, javascript 만든 기간 총 3일. 2023년 1월 19일 ~ 2023년 1월 21일 ✔︎ 로그인..