codeStates front-end
-
[JS] chapter12. 유효성 검사/ <실습> 회원가입 구현 / classList errorcodeStates front-end/Java Script 2023. 1. 6. 11:46
유효성 검사 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등) 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다. 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다. 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다. 이러한 것들을 유효성 검사라고 한다. ---------------------------------------------------------------------------------------------------------------------------------------------------------------- 유효성 검사를 통한 회원가입 구현 해보기 추가적으로 비밀번호 입력 UI를 HTML을..
-
[JS] chapter11. DOM/DOM 다루기(CRUD)codeStates front-end/Java Script 2023. 1. 5. 16:11
DOM (Document Object Model) HTML 요소를 object 처럼 조작할 수 있는 모델 즉, DOM으로 HTML을 조작 가능하다. HTML안의 JS 파일을 적용하기 위해 -----------------------------------------------------------------------------------> script 요소를 만나면 html 코드보다 먼저 실행된다. myScriptFile.js console.log('welcome JavaScript'); let msgElement = document.querySelector('#msg'); console.log(msgElement); -> 두 방식 모두 첫 번째 콘솔은 출력되만 두 번째 콘솔은 출력이 안되는 예시가 있다...
-
[JS] chapter10. JavaScript KoanscodeStates front-end/Java Script 2023. 1. 5. 14:46
이 프로젝트는 코드스테이츠에서 진행하였습니다. 공부가 필요했던 부분 집어보기 scope 호이스팅 https://hanamon.kr/javascript-호이스팅이란-hoisting/ [JavaScript] 호이스팅(Hoisting)이란? - 하나몬 ❗️호이스팅이란? 호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프 hanamon.kr 에서 참고하였다. lexical scope https://medium.com/sjk5766/lexical-scope-closure-정리-41f5d1c928e Lexical Scope, Closure 정리 공부한 내용을 블로그에 쓰는 이유는 머리로 정리하는 것 보다 ..
-
[JS] chapter9. spread/rest 문법codeStates front-end/Java Script 2023. 1. 5. 14:45
spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용 function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) sum(1,2,3,4)
-
[JS] Chapter 8. 클로저codeStates front-end/Java Script 2023. 1. 5. 14:44
클로저 함수를 리턴하는 함수 // 클로저 함수의 기본 형태 const adder = function (x) { return function(y) { // 리턴값이 함수의 형태 return x+y; } } 외부 함수와 내부 함수 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분됨 const adder = function (x) { return function(y) { return x+y; // 함수 안의 함수가 내부 함수 } // 전체가 외부 함수 } 실습) 외부 함수는 y에 접근 가능한가? 내부 함수는 x에 접근 가능한가? 바깥 스코프에서는 안쪽 스코프 접근 불가 정답 : x 바깥 스코프에서 선언한 변수 접근 가능 정답 : o 클로저의 활용 ☑️ 데이터를 보존하는 함수 외부 함수의 실행이 끝나더라도..
-
[JS] Chapter 7. 스코프codeStates front-end/Java Script 2023. 1. 5. 14:43
스코프 실습) 개념 학습 전 개발자 도구로 실행해보기 let username = 'kimcoding'; if (username) { let message = `Hello, ${username}!`; console.log(message); // Hello, kimcoding! } console.log(message); // undefined 첫 번째 콘솔 출력 결과 → Hello, kimcoding! 두 번째 콘솔 출력 결과 → undefined why? 함수 안에 선언된 변수 message가 바깥쪽에 접근 할 수 없기 때문! 스코프 변수에 접근할 수 있는 범위가 존재하는데 이를 스코프라고 함 스코프의 정의와 규칙 기억해두자! 바깥쪽 스코프에서 선언된 변수는 안쪽 스코프에서 사용 가능 안쪽에 선언한 변수는..
-
[JS] Chapter 6. 원시 자료형과 참조 자료형의 특징과 종류codeStates front-end/Java Script 2023. 1. 4. 10:25
primitive vs reference 원시 자료형(primitive type)의 특징 고정된 저장 공간을 차지하는 데이터 고정된 크기의 보관함에 사용된다. 원시 자료형 데이터를 복사할 때, 복사본을 수정해도 원본데이터에는 영향을 주지 않는다. 원시 자료형(primitive type)의 종류 → 객체가 아니면서 method를 가지지 않는 6가지 타입 string, number, bigint, boolean, undefined, symbol, (null) // 하나의 변수의 하나의 데이터만을 담음 const num = 123; const arr = [1,2,3,4,5]; let word = "hello world!" 원시형 변수 타입 종류 문자열, 정수형, 부동소수점, 논리형 문자열 변수 타입 문자열..
-
[JS] Chapter 5. 객체codeStates front-end/Java Script 2023. 1. 4. 10:22
객채(Object) 객체의 값을 사용하는 방법 let user = { firstName : 'Steve' , lastName : ':Martin' , email : 'steve@gmail.com' , city : 'NY' }; user.firstName; // 1. Dot notation user.city; // 1. Dot notation user['firstName']; // 2. Bracket notation user['city']; // 2. Bracket notation /* [] 안 '', "", 백티 로 반드시 감싸줘야 한다*/ 정리 let tweet = { writer : 'Steeve Martin' createdAt : '2022-02-03' content : 'so funny!' } t..