WEB (37) 썸네일형 리스트형 [Javascript] 객체(Object) 객체에는 key와 value로 구성된 프로퍼티가 들어간다. 프로퍼티는 쉼표로 구분한다.마지막 쉼표는 없어도 되지만 있는 것이 수정, 삭제, 이동할 때 용이하다.const superman = { name : 'clark', age : 33,} 접근superman.name // 'clark'superman['age'] // 33추가superman.gender = 'male';superman['hairColor'] = 'black';삭제delete superman.hairColor;단축 프로퍼티const name = 'clark';const age = 33;const superman = { name : name, age : age, gender : 'male',}객체의 nam.. [Javascript] 함수 표현식, 화살표 함수(arrow function) 함수 선언문 vs 함수 표현식 함수 선언문 : 어디서든 호출 가능 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓는 호이스팅(hoisting) 때문이다. sayHello(); function sayHello(){ console.log('Hello'); } 함수 표현식 : 코드에 도달하면 생성 let sayHello = function(){ console.log('Hello'); } sayHello(); 화살표 함수(arrow function) 화살표 함수로 함수를 보다 간결하게 작성할 수 있다. let add = function(num1, num2) { return num1 + num2; } 위 함수를 화살표 함수로 바꾸면 let add = (num1, num2) => { return.. [Javascript] var, let, const의 차이 - 호이스팅, TDZ, scope var과 let의 차이점 var은 한 번 선언된 변수를 다시 선언할 수 있다. var name = 'Mike'; console.log(name); // Mike var name = 'Jane'; console.log(name); // Jane let은 한 번 선언된 변수를 다시 선언할 수 없다. let name = 'Mike'; console.log(name); // Mike let name = 'Jane'; // error! console.log(name); var는 선언하기 전에 사용할 수 있다. var로 선언된 모든 변수들은 코드가 최상위로 끌어올려진 것처럼 동작하기 때문이다. 이를 호이스팅(hoisting)이라고 한다. 선언은 호이스팅되지만 할당은 호이스팅 되지 않기 때문에 undefined가 출.. [React] 컴포넌트, JSX 리액트로 만든 페이지는 컴포넌트들로 구성되어 있다. 페이지 단위로 html을 작성하는 것이 아니라, 각 부분을 컴포넌트로 만들어 조립해서 사용한다. 따라서 비슷한 부분들은 코드를 재사용 할 수 있고, 유지보수도 쉬워진다. 예를 들면 다음과 같이 컴포넌트를 나눌 수 있다. 광고 컴포넌트는 비슷하게 동작할 것이기 때문에 같은 컴포넌트를 스타일만 다르게 해서 재활용할 수 있다. 언론사 컴포넌트의 경우 더 작게 나눠 각 언론사 컴포넌트로 쪼개서 재활용 할 수 있다. 현재는 App이라는 컴포넌트 하나만 있는 상태이다. App 컴포넌트는 함수로 만들어져 있다. 이렇게 함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다. 모든 컴포넌트는 대문자로 시작해야 한다. 이 함수가 리턴하는 것은 JSX(Javascript X.. [React] 설치(create-react-app) 및 구성 파일 알아보기 리액트 프로젝트를 만들기 위해서는 Node.js와 npm을 반드시 먼저 설치해야 한다.Node.js가 설치되어 있지 않다면 아래 링크에 들어가서 설치해준다.https://nodejs.org/ko/download/ 먼저 create-react-app을 설치하기 위해서 cmd를 실행하고 아래 명령어를 입력한다.npm install -g create-react-app설치가 되면 첫 react 프로젝트를 설치해보자.아래 명령어로 프로젝트를 생성한다.npx create-react-app [프로젝트명]npx란?npm에 속해 있는 패키지 실행 도구이다.실행시킬 패키지가 로컬에 저장되어 있는지 확인하고, 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행시킨다.현재 디렉터리 아래에 [프로젝트명] 폴더가 생기고 .. [CSS] flexbox flexbox란? 박스 내 요소 공간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다. flexbox를 flex 컨테이너라고도 한다.(요소들을 포함하기 때문) flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 한다. flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있다. flex-direction 속성 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다. - row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일 - row-reverse : 주축은 행이고 방향.. [CSS] 배치 - display, position, float 박스의 유형 제어 1) display : block - 블록 박스 항상 새 라인에서 시작 / 블록 박스 내에만 배치 / 옆에 다른 요소 배치 불가능 / width와 height로 크기 조절 / padding, border, margin 조절 가능 2) display : inline - 인라인 박스 새 라인에서 시작 못함. 라인 안(inline)에 있음. / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가능 / width와 height로 크기 조절 불가능 / margin-top, margin-bottom 조절 불가능 3) display : inline-block - 인라인 블록 박스 (inline 속성) 새 라인에서 시작 못함. 라인 안에 있음 / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가.. [HTML] 엔터티 코드 (Entity Code) HTML 문서에서 문자들은 UTF-8 코드체계로 작성되는 것이 표준이므로 다양한 문자들을 표현할 수 있다. 하지만 HTML 언어에서 예약어로 사용하고 있는 문자나 키보드로 입력할 수 없는 기호, 심볼, 글자들은 다음 두 방법으로 입력할 수 있다. &엔터티; 혹은 &#코드값; * 브라우저는 HTML 페이지에 있는 연속된 여러 개의 빈칸을 한 개의 빈칸으로 처리하므로, 빈칸을 강제로 삽입하고자 하면 엔터티를 삽입하면 된다. 엔터티 코드를 찾을 수 있는 사이트 HTML 4 Entities HTML 4 Entity Names Complete HTML 4 Entity Reference All entities in the table below, will display correctly in all browsers,.. 이전 1 2 3 4 5 다음
