TechLabs

precamp의 내용을 바탕으로 더 추가하여 나만의 싸이월드를 생성하였다. 나만의 싸이월드 제작하기 1. 싸이월드 전체 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기. 3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기. 4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기. 5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기. 6. 버튼 생성하고, 기능 추가하기. 1. 싸이월드 전체 구조화하기 나만의 싸이월드 만들기 전에 html로 웹페이지 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기 - 구조화한 것을 바탕으로 id 값 지정하기. - background-color 이용하여 원하는 자리에 잘 넣어보기. - flex를 이용하는 경우에 부모 박스를 이용하여 자식 박스를 정렬함을 잊지 말기. 그래서..

1. 이벤트 감지하기 [예시] 회원가입 시 입력 변경 시에 이벤트가 발생하는 것을 알 수 있다. 2. onchange vs oninput onchange 값이 포커스가 벗어날 때마다 반영하는 함수이다. oninput 실시간으로 변경되는 값을 모두 반영하는 함수이다. 결이 비슷하지만, 차이가 나는 함수이기에 적절하게 이용하자. 3. 0 vs "0" - 조건문을 이용할 때에 조건을 달아줘도 되지만, Boolean을 달아주는 경우도 많다. input에서 value를 가져오면 문자열로 반환된다. 숫자 0 false를 반환한다. 문자열 0 true를 반환한다. 4. 모든 값 입력 시 버튼 활성화하기 버튼을 비활성화 상태로 만들어놓기. 입력창의 모든 태그의 값을 가져오기. 그 값들이 모두 비어있지 않은 경우에 버튼..

1. 회원가입 폼 오류 확인하기 처음에는 발견하지 못했는데, 강의를 수강하다가 알게 되었다. - 인증번호 받기를 여러 번 클릭하면 여러 번 시간 반복 함수가 실행되어 서로 화면 갱신하기 위하여 충돌이 발생한다. - setInterval 함수가 종료되지 않아서 계속 else 구문을 반복한다. 2가지 문제점이 발생하였고, 문제점을 해결해보자. 2. 회원가입 폼 오류 수정하기 2-1. 인증번호 받기 버튼 제어하기 인증번호 받기 버튼을 제어하기 위하여 버튼의 상태를 Boolean을 통하여 설정한다. 상태를 제어하는데에 Boolean이 많이 사용되므로, 자주 이용하기. 주의할 점은 시간은 함수 내에 지정해야 하고, 버튼 상태는 함수 밖에 지정해야 한다. 그래야 시간은 계속하여 갱신되어 나중에 버튼을 눌러도 실행되..

1. 함수 - 우리가 직접 만드는 기능을 의미한다. - 기능 제작 function 함수명(매개변수){ 함수를 호출했을 때 실행할 명령문 } // 매개변수와 데이터 반환은 옵션이다. 매개변수 데이터를 외부에서 받아와서 함수 안에서 이용하는 것이다. 필요 시 받아서 이용하는 것이기 때문에 옵션이다. 예를 들면 내장 함수에서 데이터를 받아야 되는 경우가 있을 수 있지만, 아닌 경우도 있을 수 있다. 데이터 반환 return 을 이용하여 결과 데이터를 반환하는 것을 의미한다. 필요 시 반환하는 것이기 때문에 옵션이다. // 함수 실습 function sayHello() { console.log("안녕하세요."); } // undefined sayHello(); // 안녕하세요. // undefined funct..

회원가입 인증 번호 시간 타이머 제작하기 1. 회원가입 인증 번호 시간 타이머 제작하기. 2, 회원가입 특정 시간 도달 시 인증 버튼 없애기. 3. 회원가입 특정 시간이 0초인 경우 인증 완료 버튼 비활성화 및 색상 변경하기. - setInterval 내장 함수를 이용하여 타이머를 제작하기. - 초에서 남은 분과 남은 초를 모두 계산하여, 화면에 보여줘야 한다. - 특정 시간이 되면 버튼을 비활성화하기. 1. 제작 방식 회원가입 인증 번호 시간 타이머를 제작하기 위해서는 dom을 조작하여 화면에 있는 숫자를 변경해야 한다. 180초 // 3분 179초 // 2분 59초 178초 // 2분 58초 . . . 인증번호 받는 버튼을 누르는 동시에 3분 부터 카운트 시작하기. 남은 시간을 분, 초로 환산하여 변..

1. Dom - Document Object Model - 동적인 프로그램으로 만들기 위하여 사용한다. 2. Dom 사용하는 방법 html 파일에서 id를 통하여 해당되는 태그를 가져오기. 해당 태그를 제작한 기능으로 제어하기. 2-1. html 코드 Hello 에서 World로 변경하는 버튼 만들기 Hello Change 2-2. javascript 코드 // 1. html에서 해당 태그를 가져오기 const targetWord = document.getElementById("target__word"); // console.log(targetWord); // 2. 해당 태그를 제어하기 const changeWord = function () { targetWord.innerText = "World"; }..

1. 수학 객체 자바스크립트의 수학 기능을 사용하는 명령어이다. Math.max() 최대값 Math.round() 반올림 Math.min() 최소값 Math.floor() 버림 Math.random() 0 ~ 1 랜덤한 숫자 Math.ceil() 올림 예전에는 컴퓨터가 전자 계산기 역할을 수행했기 때문에, 수학 객체가 탄생한 것이다. 2. 인증 번호 만드는 방법 수학 객체를 이용하여 인증 번호를 만들 수 있다. // Math.random, Math.floor, String, padStart를 이용한 인증 번호 만들기 Math.random() * 1000000; // 301924.7597895887 Math.floor(Math.random() * 1000000); // 705252 String(Math.f..

1. 반복문 - 같은 행위를 반복하는 것을 의미한다. 초기식 : 시작점을 의미한다. 여기서 변수를 지정하고 할당할 때 const를 사용하면 증감문에서 변화를 줄 수 없기 때문에 반드시 let을 사용하기. 시작점 의미한다. 조건식 : 검증 과정을 의미한다. 언제 반복문을 종료할 것인지 정할 수 있다. 끝 점을 의미한다. 증감문 : 1회 반복할 때마다 카운트를 어떻게 할 것인지 지정할 수 있다. - 몇 번을 반복할 것인지가 핵심이다. for(초기식; 조건식; 증감문){ 반복하여 실행할 내용 } 증감문에서 일반적으로 많이 사용하는 코드이다. i++ // i += 1, 하나씩 증가를 의미한다. i-- // i -= 1, 하나씩 감소를 의미한다. 2. Template Literals 템플릿 리터럴 - 템플릿 리터..

1. 조건문 - 특정 조건을 만족하면 실행한다. - 핵심은 시작점과 끝점이 존재한다는 것이다. - true 인 경우에는 시작점을 실행하고, false인 경우에는 끝 점을 실행한다. 조건의 개수는 신경쓰지 않아도 된다. - 각각 다른 명령이 실행될 수 있도록 만들어주면 된다. if(조건문){ console.log(A) // 조건문이 참인 경우 // A 실행하기 }else{ console.log(B) // 조건문이 거짓인 경우 // B 실행하기 } 2. 거짓같은 값 false 라고 평가되는 값을 의미한다. 0 마이너스 0 빈 문자열 null undefined NaN 이외의 값들은 true 라고 평가되는 값이다. 주의할 점은 빈 문자열인 경우 문자가 없어도 띄어쓰기가 있는 경우 에는 true 라고 평가된다. ..

1. 데이터 타입 String object 배열은 객체의 한 종류이다. Number null Boolean undefined - null : 아무것도 없음을 알려준다. 우리가 의도한 빈칸이다. - undefined : 값이 없음을 알려준다. 우리가 의도치 않게 값을 넣지 않은 것이다. 위의 2개의 데이터 타입을 우리가 의도한 것인지 아닌지를 구분해야 한다. ∴ null ≠ undefined 2. 연산자 산술 연산자 비교 연산자 논리 연산자 2-1. 산술 연산자 - 더하기는 주의해서 사용해야 한다. 1 - "1"; // 0 1 + "1"; // '11' 1 + "1000"; // '11000' 1 - "1000"; // -999 더하기 문자열과 숫자 조합에서 연결이 발생한다. 더하기 제외한 나머지 연산자 ..