전체 글
-
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일 ✔︎ 로그인..
-
프로그래머스 JS I 1단계 : K번째 수문제풀이 2023. 1. 11. 18:58
프로그래머스 1단계 문제 K번째 수 array 라는 배열에 담긴 숫자(요소)들. 이 숫자들을 commands에 들어있는 배열 안 요소를 사용하여 연산하기. 💭 어떻게 풀까? 1. commands는 다중 배열이므로 각각 사용할 수 있도록 해야한다. (-> forEach를 사용하여 한 요소씩 확인-사용) 2. array에 담긴 배열을 commands안의 요소 [i, j, k] 배열을 사용하여 잘라야 한다. (-> slice 사용 - 여기서 이름 헷갈려서 splice 써놓고 왜 안되냐고 고민함... 민망) 2-2. slice 의 조건은 i-1(index는 0부터 시작해야 하므로) 부터 j까지(end 조건인 j는 포함되지 않으므로 -1 해주지 않아도 된다) 로 설정한다. 3. 빈 배열인 answer에 push ..
-
프로그래머스 JS I 1단계 : 이상한 문자 만들기, 시저 암호문제풀이 2023. 1. 9. 18:33
프로그래머스 1단계 진입~ 한 지는 꽤 됐는데 부끄럽게도 일이 많아서 미루고 미뤄버렸다....하핫. 오늘부터 하루에 한 문제라도 꼭! 꼬박꼬박 풀겠다는 마음가짐을 다시 한 번 (ㅎ)되새기며 기록을 남긴다. 저번에는 신박한 풀이가 보이면 남겨놓는 식으로 포스팅 했었는데, 물론 그것도 좋지만 내가 어떻게 틀렸는지 (ㅎㅎ...) 그리고 어떻게! 고쳤는 지를 남기는 게 더 좋을 것 같아서 방향을 바꿔보기로 했다. 프로그래머스 1단계 문제 이상한 문자 만들기 s 라고 하는 공백이 포함된 문자열이 있다. 각 단어의 짝수번째 알파벳 > 대문자 각 단어의 홀수번째 알파벳 > 소문자 로 바꾼 문자열을 return 하는 함수를 작성해야 하는 문제. 첫 풀이(당연히 실패) 👇 return s.split("").map((a,..
-
ദ്ദി ˘ ͜ʖ ˘) JavaScript I 배열 요소를 정렬하고 싶을 때 .sort()Javascript 2022. 12. 30. 15:16
👇 MDN 모던자바스크립트 deepDive sort 메서드는 정~말 많이 사용하는 메서드다. 정~말 많이 사용하는 것 치고는 간단한 오름차순, 내림차순 정도의 정렬만 이해 없이 암기한 상태. 이해가 있어야 응용도 할 수 있는 법! 이해를 위해 정리하고 넘어가고자 한다. Array.prototype.sort arr.sort([compareFunction]) compareFunction 은 정렬 순서를 정하는 함수를 의미한다. 만약에 함수 부분이 비어 있으면(사용유무 선택가능) 각 요소를 문자열로 변환한다. 그다음 변환된 문자열의 유니코드 코드 포인트의 순서를 따라 정렬한다. sort는 기본적으로 배열의 요소를 정렬하는 메서드이다. 주의할 점은 원본 배열을 직접 변경하며 변경(정렬)한 배열을 반환한다는 것이..
-
프로그래머스 JS I 0단계 : 문자열 밀기문제풀이 2022. 12. 18. 15:25
신박하다 느껴지는 풀이를 발견하면 남겨둬야 하는 법 (ㅎ). 다행스럽게도 (?) 나만 신박하다 느끼는 건 아닌 듯 하다. A 문자열에서 마지막 글자를 오른쪽으로 한 칸씩 민다고 할 때 (마지막 글자는 문자열 가장 처음 위치로 간다) 몇 번 밀어야 B 문자열과 같아질까? (result) 라는 문제다. 나는 반복문을 사용해 해결했다. 나의 풀이 ~생각의 흐름~ 0. A === B 인지 가장 먼저 확인한다. true일경우 return count (output : 0). 1. A를 배열화 한다. 2. array A의 마지막 글자를 pop() 메서드를 사용해 얻고 삭제한 후, 이를 unshift() 메서드를 사용해 맨 앞자리에 추가해야 한다. 2-2. 이 행위(?)가 반복 되었을 경우 count++를 한다. 3...
-
프로그래머스 JS | 0단계 : 369게임문제풀이 2022. 12. 14. 15:54
오늘도 어김없이 코딩 테스트 공부를 하던 와중... 한 문제의 '다른 사람 풀이'를 보고 지금 잡아놔야 한다는 생각에 글로 남긴다. 0단계에 369게임이라는 문제. order에 할당된 숫자를 보고 3 or 6 or 9일 경우 박수를 치고, "총 몇 번 박수를 쳤는가"를 return 하라는 문제이다. 나의 풀이 ~생각의 흐름~ 1. order 숫자를 하나하나 각각 따로 확인할 수 있어야 한다. (=> 배열로 바꿔야 한다!) 2. 배열로 바꾸기 위해서는 string type 으로 바꿔야 한다. 3. "29423" 이렇게 바뀐 상태이므로 split()을 사용해서 각각 떨어뜨려 준다. 4. 완성된 배열에 map()을 사용해서 string을 정수로 바꿔준다. 5. 반복문을 사용해 3 혹은 6 혹은 9일 경우 an..