본문 바로가기

✨ Front-end67

[JavaScript] var, let, const의 변수 선언 방식과 각각의 차이 변수 사용시 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const를 사용한다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var ( 함수 레벨 ) [ 중복 선언 가능, 재할당 가능 ] let (블록 레벨) [ 중복 선언 불가능, 재할당 가능, 변하는 값을 저장할 때 사용한다. ] 블록 스코프는 { }를 통해서 영역을 구분하는 것이다. 블록 { } 안과 밖의 변수 이름이 같더라도 스코프가 다르므로 변수가 선언되고 각 변수에 할당된 값이 대체되지 않고 유지된다. this Var를 통해 전역에서 변수를 선언하게 되면 this를 통해 접근이 가능했었다. 하지만. let을 통해 접근하게 되면 this를 통한 전역변수의 .. 2023. 3. 3.
[React] 리액트 JSX문법, State 알아보기 JSX란? JavaScript에 XML을 추가한 문법이다. 그러나, JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 사용법 - JSX(JavaScript XML)은 일반적인 HTML처럼 사용하면 된다. 단, JSX에서 특별히 허용되는 문법과 지켜야 할 문법이 존재하며 이 문법만 숙지하면 기존의 HTML 코드 안에 JavaScript 코드를 넣어 사용하는게 가능하다. JSX 에서 지켜야 할 문법 1. 하나의 부모 엘리먼트가 반드시 감싸야 한다. 만약 어떤 요소로 감싸기 애매할 경우 Fragment를 사용하기도 하는데, 처럼도 사용할 수 있다. 다만, Fragment는 일반 태그보다 처리속도가 느리므로 사용을 지양하는것이 좋다. 2.자바 스크립트 표현식 3. if, f.. 2023. 2. 26.
[React] 리액트 설치 방법과 개발 환경 세팅하기 1. node.js 를 깔아준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Visual Studio Code를 깔아준다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and availa.. 2023. 2. 25.
[JavaScript] 배열(Array)과 객체(Object) 차이, innerHTML 사용법 배열(Array)과 객체(Object) 차이, innerHTML 사용법 만약 상품을 만들었다면, 저장할 공간이 필요하다. 이때 Array 혹은 Object를 사용할 수 있다. 배열(Array) 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index) 라고한다. 객체(Object) 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. key : value형태로 저장가능 Array와 Object의 차이점 중 한가지는 "순서" 이다. Array는 자료간 순서가 존재하지만, Object는 순서개념이 없다. HTML에 를 이용해 javascript의 기능을 추가해보았다. HTML에서 콘솔 창을 열어 각각 배열과 객.. 2023. 2. 25.