front-end 13

[확장프로그램] front-end 개발자에게 도움이 되는 VScode 확장프로그램

[확장프로그램]빨간색 테두리 친 영역을 "액티비티 바" 라고 부른다.가장 아래 네모 블럭을 클릭하면 여러가지 확장 프로그램을 다운로드 받을 수 있다.  1. korean 말 그대로 vscode를 한국어로 사용할 수 있다.   2. indent-rainbow코딩하다가 for문 while문 등등 탭을 구별하기 쉽게 해주는 확장프로그램    3. Auto Rename Taghtml 사용할 때 같은 태그를 많이 이용하는데, 이때 앞 태그를 로 바꿔주면 뒷태그도 로 알아서 바꿔주는 확장프로그램 입니다.    4. CSS Peekhtml의 class를 " ctrl + 클릭 "  하면 알아서 css 부분으로 넘어가준다 이제 더이상 class 이름을 보면서 드래그로 내리며 안 찾아도 됨    5. HTML CSS S..

front-end 2024.12.24

[JS_중급] 12. 변수(var, hoisting)

1. var (1-1) var는 let과 다르게 같은 변수명을 중복해서 사용할 수 있습니다. var name = "zeroJJUN"; console.log(name); var name = "Tstory"; console.log(name); -같은 변수명 name을 사용했지만 오류없이 출력이 잘 되는 것을 확인할 수 있습니다. 2. hoisting (2-1) 코드는 기본적으로 위에서부터 아래로 한 줄 한 줄 실행되는 특징을 가지고 있습니다. 따라서 변수를 선언하기 전에 출력을 요구하면 에러가 발생합니다. console.log(name); let name = "zeroJJUN"; //코드 실행 순서에 의한 error발생 - 문법에 오류도 없고 중복 변수도 없지만, 코드 작성 순서에 의해 에러가 발생합니다. ..

front-end/js 2023.11.23

[JS] 11. 배열(Array)

1. 배열 (1-1) 배열의 선언은 const 배열이름 = ['index1', 'index2', 'index3', 'index4', 'index5', ---- 'indexN', ]; 입니다. 대괄호임에 주의해야합니다. (1-2) 배열의 호출은 배열이름[index값] 입니다. index는 0부터 시작합니다. (1-3) 배열은 문자 뿐만아니라, 숫자, 객체, 함수 등도 포함할 수 있습니다. (1-4) 배열의 길이측정 = 배열이름.length 입니다. (1-5) 배열의 추가방법 = 배열이름.push("추가할 값"); 배열의 가장 끝에 추가됩니다. (1-6) 배열의 삭제 방법 = 배열이름.pop(); 배열의 가장 끝이 삭제됩니다. (1-7) 배열과 반복문의 응용

front-end/js 2023.11.15

[JS] 9. 객체(Object)

1. 객체 (1-1) 객체의 선언방법은 const 객체명 = { 키 : 값, 키 : 값}입니다. (1-2) 객체의 접근방법은 두가지입니다. 객체명.키값 or 객체명["키값"] 입니다. (1-3) 객체의 추가방법도 두가지입니다. 객체명.키 = "값"; or 객체명["키"] = "값"; (1-4) 객체의 삭제 방법은 앞에 delete를 붙이는 것입니다. (1-5) 객체내의 프로퍼티 존재여부 확인법은 '확인해볼 값' in 객체명입니다. boolean값으로, true or false 값을 반환합니다. (1-6) 함수와 객체 실습

front-end/js 2023.11.15

[JS] 7. 반복문 (for, while, do while)

1. for (1-1)for문은 내가 정한 횟수만큼 반복해주는 반복문입니다. const year = 2023; for(let i = 1; i < 6; i++){ console.log(`올해는 ${year}년 이므로, ${i}년 후에는 ${year+i}년 입니다.`); } (1-2) for문의 형식은 for(초기값; 반복횟수조건; 증감값) {반복시킬 문장} 입니다. - 위 코드에서 제가 설정한 변수 i의 초기값은 1입니다. - 위 코드에서 반복횟수조건은 i가 6보다 작을 때 입니다. -위 코드에서 증감값은 i++입니다, 여기서 ++란, 반복이 끝날 때마다 1씩 증가시키겠다는 의미입니다. 따라서, i는 반복할 떄마다 1,2,3,4,5까지 증가할 것이며 6이 되는 순간 조건이 false가 되면서 반복을 멈출 ..

front-end/js 2023.11.10

[JS] 6. 논리연산자(&&, ||, !)

1. && (1-1) 모든 조건이 참이여야 다음 명령을 수행합니다. const age = prompt("나이를 입력해주세요.", "ex) 30"); const gender = prompt("성별을 입력해주세요", "ex) femail"); if((age >= 20) && (gender === "mail")){ console.log("가"); } else if(age >= 20 && gender ==="femail"){ console.log("나"); } else{ console.log("다"); } 나이가 20살 이상이고, 성별이 남성이여야만 "가" 를 출력하고, 나이가 20살 이상이고, 성별이 여성이여야만 "나" 를 출력합니다. 둘 중 하나라도 만족하지 못하면 바로 "다"를 출력합니다. 나이 조건이 2..

front-end/js 2023.11.10

[JS] 5. 조건문(if, else if, else, switch)

1. if (1-1) if문은 어떤 조건이 충족되었을 때 특정 동작을 할 수 있도록 돕는 조건연산자입니다. const age = prompt("나이를 입력해주세요", "ex) 20"); if(age > 20){ console.log(`회원님은 ${age}살이므로 맥주를 구입하실 수 있습니다.`); } 위 이미지처럼 나이를 입력했을 때, 20보다 크다면 안내메세지가 나옵니다. 2. elseif (2-1) 만약 조건이 여러개라면 elseif를 통해 조건을 추가할 수 있습니다. const age = prompt("나이를 입력해주세요", "ex) 20"); const gender = pormpt("성별을 입력해주세요", "ex) male or female"); if(age >= 20){ //part1 if(ge..

front-end/js 2023.11.10