FE

[스코프] scope > 범위를 나타내는 말, 변수 접근 범위 > 변수에는 접근할 수 있는 범위가 존재 밖에서 선언한 스코프 ➡️ 안에서 사용 가능 안에서 선언한 스코프 ➡️ 밖에서 사용 불가능 = 안쪽 스코프에서 바깥쪽 스코프는 접근이 가능하나 반대는 불가능하다 > 스코프는 중첩이 가능 가장 바깥쪽 스코프 ➡️ 전역 스코프(Global scope) 그 외 ➡️ 지역 스코프(Local scope) 전역변수 vs 지역변수 > 지역변수는 전역변수보다 우선순위를 가짐 let age = 20; function showAge(){ let age = 40; console.log(age); // 2번으로 나옴 } console.log(age); // 1번으로 나옴 showAge(); // ->2번으로 나옴 conso..

javascript [원시자료형(primitive data type)] 1. number 2. string 3. boolean 4. undefined 5. null 6. bignit 7. symbol > bignit : Number 값이 안정적으로 나타낼 수 있는 최대치인 2^53-1 보다 큰 정수를 표현할 수 있는 내장객체 (출처 : mdn) > symbol : ES6에서 새롭게 추가된 타입, 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용, 유일한 식별자(unique identifier)를 만들고 싶을 때 사용(출처 : javascript.info) [참조자료형(reference data type)] 1. 배열(array) 2. 객체(object) 3. 함수(function)

이번에는 배운 html과 css 로 계산기 목업을 만들고, js로 코드를 짜?(빈칸넣기) 계산기 구현을 하는 시간이었다. 이번 시간은 눈으로 확인할 수 있고, 무에서 유를 창조하는 느낌 + 서로 찾아보고 생각했던대로 진행이 잘돼서 유독 재밌었던 과제였다ㅋㅋㅋㅋ 1. 계산기 목업 (mock up) 목업이 영어인줄 몰랐다 나무목인줄,,,이렇게 알아갑니다. html코드를 짜기 전 프로토타이핑 과정을 해보고자 피그마로 페어분 만나기 전 살짝 연습해보기도ㅋㅋ했는데(피그마 처음 접해봤다!! 수업 들으면서 좋은 웹 많이 알아갈 수 있어서 좋다), 페어분께서 피그마로 제안해 주신 디자인이 너무 예뻐서!! 바로 그걸로 진행했다. 일단 어떤 요소를 사용해야 하는지 나눠보고 css flexbox속성을 이용해 정렬을 하고, ..

늦게나마 작성하는 css 복습 겸 작성 CSS - Cascading Style Sheets css는 웹 구성하는 것 중에서 꾸미는 역할을 한다 보면 된다! 개인적으로 가장 좋아하는 부분ㅋㅋㅋ 커스텀도 가능하고 자주가는 웹사이트 구성보면서 어떤 스타일을 적용했는지 확인하는게 나름 재밌다.(그리고 적용된 스타일 가져와보는것도 재밌다) css는 끝이 없는 분야라고 하셨는데 정말 그런것 같다 구글에서 찾아보면 별 신기한(이게 된다고?) 속성이 많더라고!! 내가 구현하고자 하는 기능은 거의 찾으면 있으니까 구글링 잘하는 것도 아주 중요한 능력이다. 각설하고 css를 만들어진 html에 적용하려면 3가지 방법이 있다 1. 링크 사용해서 css파일 가져오기 - 강추 (External Style Sheet) 2. 직접..

HTML기초 태그를 배웠다 일단 유명한 기본 태그들 , 속성 , type = "checkbox" type = "password" 1 버튼안에 들어갈 내용 HTML 시맨틱 요소 즉 의미가 있는 요소 HTML5에서 시맨틱 웹이 중시되면서 새롭게 만들어짐 옛날에 코딩누나 스포티파이 웹페이지 HTML,CSS로 만들면서 정리 해둔건데 Semantic Tag 부분 그림으로 확인하면 더 이해가 잘 갈 것 같다 [id와 class] id는 고유한 값에 이름을 붙일 때 사용하고 class는 반복되는 유형을 분류하기 위해 붙인 이름이다 id와 class의 차이는 고유한 영역이면 id 반복,중복되는 영역이면 class 사용한다 나중에 css를 넣을때 특별한 요소가 있는 부분이라면 id로, 중복된 스타일 적용(주의할 점이 나..

[문자열] string str.indexOf('a') // 발견한 첫번째 a의 위치를 반환 str.lastIndexOf('a') //뒤에서 부터 a 조사 후 위치 반환 str.includes('a') // a가 포함되면 true 반환 str.slice(num1,num2) // num1에서 num2까지 잘라서 나타내줌 num2가 없을경우 마지막까지, num1이 -일경우 뒤에서부터 str[] // 배열안의 값과 일치한 위치의 문자열로 반환 str.split() // split 안의 값을 기준으로 문자열을 나누고 배열로 나타냄 Array_prompt.join() // 배열을 문자열로 변환 .length // 속성으로 문자열 길이를 확일할 때 사용 str.substring(start,end) // start 부..

[조건문] 반드시 비교연산자 필요 비교의 결과는 Boolean으로 나옴 if(조건1){ 조건1 true시 실행될 코드 }else if(조건2){ 조건1 false && 조건2 true시 실행될 코드 }else{ 조건1과 조건2 모두 false 시 실행될 코드 } 함수에 적용하면 이렇게도 가능하다 function 변수이름(매개변수){ if(조건1){ 조건1 true일 시 실행 } return 리턴할 값 } // 조건1이 false일때는 return 값으로 나오게 할 수 있다. [비교연산자] === //같다 !== //다르다 > // 초과 = // 이상 false, !false > true NOT연산자 사용시 !NaN // true 이때 undefined는 falsy한 값 !'HI' // f..

함수에 대해 배웠다. 함수 === 작은 기능 단위 한번 원의 넓이를 알아보자^^!! 선언식함수 정석 그 자체 function 변수이름 (파라미터) { let 변수이름2 = 식; return 변수이름2 } function getCircleArea (radius){ let circleArea = radius * radius * 3.14; return circleArea } 표현식함수 익명으로 함수 사용 가능 let 변수이름 = function(파라미터){ let 변수이름2 = 식; return 변수이름2 } let getCircleArea = function(radius){ let circleArea = radius * radius * 3.14; return circleArea } 화살표함수 function..