본문 바로가기

전체 글

(163)
자바스크립트 Switch문 사용 switch문은 if문과 같은 기능을 가지고 있다. 하지만 조건값이 여러개일 경우 switch문을 사용하는게 가독성면에서 더 유리하다. switch문 연습. let fruit = 'banana'; fruit이라는 변수가 있다 그 안에 banana라는 데이터가 들어가있다. 이때 fruit변수에 과일이름이 데이터값으로 들어가면 그 데이터값 (과일이름)의 색상을 표시하고 싶다. switch(fruit){ case 'banana': console.log('yellow') break; case '참외': console.log('yellow') break; case 'apple': console.log('red') break; case 'kiwi': console.log('green') break; case 'wa..
자바스크립트 비구조할당문 배열에서 각각의 수 를 가지고 올때 원래 쓰던 방법 let arr = [1,2,3,4,5,6,7,8,9]; let a = arr[0]; let b = arr[1]; let c = arr[2]; 이런식으로 가지고 왔다. 콘솔로 각 a,b,c를 찍어보면 1,2,3이 나올 것 이다. 비구조할당문을 이용해서 배열 안에서 특정 값만 변수로 설정해주고 나머지는 last라는 변수에 담을 수 있다. 또한 속성값의 이름을 바꿀 수도 있다. 비구조 할당문을 통해 arr 배열안에 1,2,3만 변수로 설정해주고 나머지는 last안에 묶어 저장해보자 let arr = [1,2,3,4,5,6,7,8,9]; let [a,b,c, ...last] = arr; console.log(a); console.log(b); console.l..
PASSPORT 서버란? client >> server (request) server >> client (respond) 비동기 = 질문 여러개를 한꺼번에 처리 할 수 있다 http 통신? web 소켓 cookie session login >> SNS부터 : facebook google naver kakao local server facebook server ==> how to share session? local session facebook session ==> 'oAuth 2.0' oAuth 2.0 > 기술 X 개념 O 1. local server ask(req) to ==> facebook 2. facebook check local server 3. after check, facebook issues 'key'(..
회원가입 공백 유효성 GOAL : 회원가입을 할때 image를 제외한 나머지 input칸이 비어있는 상태에서 join버튼을 누를때 알림창을 띄워준다. * 이미 PASSWORD칸에서 확인되는 PASSWORD CHECK나 checked가 되어있는 GENDER도 조건에 포함하지 않아도 됨 HTML 더보기 JOIN PAGE ID PASSWORD 8~20자 이내의 특수기호,숫자를 포함한 비밀번호를 입력하세요 PASSWORD CHECK NAME GENDER MALE FEMALE IMAGE 1. 조건에 걸려야할 칸들을 모두 불러와서 변수에 담아준다. const mustFill = document.querySelectorAll('.must_fill'); 2. 각각의 개체들과 그 value값을 가지고 오기위해 for문을 작성한다. for(i..
회원가입 NAME/PW 조건걸기 회원가입 유효성 설정 GOAL : user name은 4~12자 안에서 영문 대소문자, 숫자만 가능. 비밀번호는 8~12자 안에서 특수기호와 숫자를 포함해야한다. 현재 HTML 더보기 JOIN PAGE ID PASSWORD 8~20자 이내의 특수기호,숫자를 포함한 비밀번호를 입력하세요 PASSWORD CHECK NAME GENDER MALE FEMALE IMAGE NAME 유효성 1. HTML에서 name input 박스와 알림을 줄 message 공간을 가지고 온다. const username = document.querySelector('#username'); const username_msg = document.querySelector('#username_msg'); 2. 정규표현식을 사용해서 mi..
로그인 ID check GOAL : 로그인할때 (로그인 버튼을 눌렀을때) database에 있는 id와 password만 로그인 할 수 있도록 하고 id나 password가 틀리면 경고창 띄우기 1. router에서 login_check (임의) URL설정해주기 login버튼을 눌렀을때 form의 action URL을 router에서 받아준다.. ID PASSWORD ROUTER에서 router.post('/login_check',controller.login_check); 2. 이어지는 controller설정을 해준다. 전체코드 더보기 let login_check = async (req,res)=>{ let userid = req.body.userid; let userpw = req.body.userpw; let result..
회원가입 ID확인 (AJAX) GOAL : 아이디를 입력하고 다음 커서로 넘어갔을때(focusout) 그 아이디가 이미 database에 있는 아이디인지 아닌지 구분하고 box아래 메세지를 표출하는 것. 1. 공간 만들기 ID 아이디 입력한 아래 메세지를 표출할 공간을 만든다. 메세지가 표출되기 전까지 보이지 않게 임시로 display:none으로 가려놨다. 2. js에 이용할 두 HTML 태그들을 선언해 준다. const userid = document.querySelector('#userid'); const userid_msg = document.querySelector('#userid_msg'); 3. userid를 확인하기 위한 함수를 생성한다. function userid_check(){ if(login_flag){ user..
회원가입 password 재확인 1. 변수 설정 HTML페이지 비밀번호 && 확인 칸에 각각 id를 주고 querySelector로 불러와준다. input type="submit"이었던 값을 button으로 바뀌주고 똑같이 id, form tag에도 id를 준다. const pwd1 = document.querySelector('#userpw'); const pwd2 = document.querySelector('#userpw_check'); const btn = document.querySelector('#login_submit'); const login_form = document.querySelector('#login_form'); 2. pwd1과 2의 value값을 비교하는 함수를 만들어준다. function password_c..