프론트엔드

HTML(Hyper Text Markup Language)페이지의 제목 , 문단, 표, 이밎 ,동영상 등의 웹의 구조를 담당Css(Casecading Style Sheets)실제화면에 표시되는 방법(색상,크기,폰트 ,레이아웃 등)을 지정해 콘텐츠를 꾸며주는시각적인 표현

선택자\-모든요소를 선택모든요소에 빨강색을 지정.태그이름이 ABC인 요소를 선택해 빨강색지정클래스 속성의값이 orange인 요소를 선택

border-width, border-style,border-colormedium:중간 두께단위:px ,em %등 단위로 지정border-width:top,right,bottom,left 순으로 돌아간다.border-style:border-style:top,right,

SKewX :기울임 >skewX(-45)deg skewY(45deg) perspective <<원근법 backface-visibility -뒷면 숨김여부 margin:auto; 가로사

gsap 추가 https&#x3A;//cdnjs.com/libraries/gsap gsap 라이브러리 추가하면자바스크립트에 애니메이션 효과를 추가할수 있다.

간단하ㄷ게 작성!

\>DOM은 document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부릅니다.DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식입니다.Document Object Model , 이하 DOM.innerText 속성을 변경이 속성은 e

시간관련getHours() - Date 객체의 시간을 가져옵니다. (0~23)getMinutes() - Date 객체의 분 정보를 가져옵니다. (0~59)getSeconds() - Date 객체의 초 정보를 가져옵니다. (0~59)getMilliseconds() - D

html1) Todo-list 를 만들기를 원하니 html 에 form 태그로 구조를 만들어 준다. 나중에 JavaScript에서 만지기 쉽게 id는 todo-form으로 설정2) form 자체는 submit이라는 기본 기능을 내장하는 하나의 묶음 밖에 되지 않는다.

1) 붓 소환 : canvas.getContext("2d");2) 필드 세팅 :canvas.width = 800;canvas.height = 800;3) 사각형 그리기 : ctx.fillRect(0,0,200,400);

배경색상 바꾸기 바뀌는걸 볼수있다.

브라우저는 WEb API를 호출하여브라우저로 전달하는방식

반복과 재사용 가능한레시피.객체 지향적 프로그래밍프로토타입(자바스크립트)객체지향적생성자함수,클래스 super키워드

전개파라미터...args &lt;&lt; 라고 지정해준다.arguments를 줄여준것.(대체)...은 몇개가올지 모른다는것 !a와 b는 필수값이고 그뒤는 가변인자로 지정 !CALL 과APPLY 로 함수도 호출이가능하다.첫번째ㅣ 인자로 CONTEXT객체를 받음.call은

//this//일반(Normal) 함수는 호출위치에서 따라 this 정의//화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this정의! //setTimeout(함수,시간)/\*\* 프로토타입속성에 getFullName을 할당몇개의 객체를 만들던간에 하나만생성

background-image = linear-gradient(color1, color2);배경색에 2가지 색을 그라데이션 효과로 넣을 수 있는 방법을 새로 알게되었다.첫번째로 방향설정body\[background-image:linear-gradient(45deg,bl

위도를 딴다!사이트를 이용!https&#x3A;//home.openweathermap.org/\~~텍스트\~~여기로들어와서 복붙12번째기재하고 3번째!치고들어가면 날씨에관한 내용이나온다!

키프레임은 변화가 가능한 기준애니메이션은 만들기전에 키프레임을 만들고 시작해야함 !%를이용해 시작위치 설정가능!infinite-무한대alternate-반대방향 역재생

창을 구성해준다 폼에 숫자창을 구성해주고 input value를 받을수있게 const value를 설정해주고함수로 인자를 전달해준다 그리고 함수를이용해 숫자가 제대로된 숫자인지 4글자가 맞는지를 검사한다 데이터칸을 만들어준다 !length를 통해 4글자가 맞는지 확인해

element랑 index구분fill(0)으로 하게되면 0으로 꽉채워지게된다.9개의 배열이 0으로 꽉채워지게된다.1부터 45까지 채워지게된다

타이머사용하기\_로또추 첨기동기가 아니다. 코딩한 순서와 다르게 동작하는 코드를 비동기 코드 지금까지 사용한 이벤트리스너가 대표적인 비동기 코드

flat()=> 2차원 배열을 1차원배열로 변환시켜줌.every()=하나라도 실패하면 실패

논리적 연산자 - 요약다음은 다시 복습, 혹은 출력을 위한 참고자료로 JavaScript에서 논리 연산자와 비교 연산자가 어떻게 작동하는지에 대한 간단한 요약입니다.const userName = 'Max';const altName = '';console.log(user

논리적 연산자 - 요약다음은 다시 복습, 혹은 출력을 위한 참고자료로 JavaScript에서 논리 연산자와 비교 연산자가 어떻게 작동하는지에 대한 간단한 요약입니다.const userName = 'Max';const altName = '';console.log(user

매개변수 vs 인자이 강의에서 "매개변수"와 "인수"라는 단어를 같은 의미로 사용하는 것을 듣게 될 겁니다.엄밀히 말하자면 이 둘은 차이가 있습니다.매개변수는 함수를 정의할 때 괄호 안에 지정하는 변수입니다.function sayHi(name) { ... } 이 예시에

Javascript 는 호스트된 환경 브라우저가 javascript엔진을 이해하고 분석하고 실행할수 있게하는것 브라우저와 상호작용 할 수 있게 해줍니다.

요약: 삽입, 대체, 제거DOM 요소를 생성, 삽입, 교체, 제거하는 방법에는 여러 가지가 있습니다. 다음은 사용 가능한 방법에 대한 요약입니다.브라우저 지원에 대해서는 제공된 링크와 강의 후반부에 있는 "브라우저 지원" 모듈을 확인하십시오.생성 & 삽입크게 두 가지

NPMnpm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다.자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.https&#x3A;//www.npmjs.com/node -v: node 버전 확인npm - v: npm 버전 확인

JavaScript에서 메서드 체인 형성하기지금까지 배운 모든 유용한 배열 메서드를 결합하는 방법을 이해하는 것이 중요합니다. map()과 reduce() 를 예로 들어 보겠습니다.const originalArray = {price: 10.99}, {price: 5.9

// \[].reverse() 배열객체 뒤집기// object.assign() 메소드는 열거할수 있는 하나이상의 출처 객체로부터 대상객체로부터 //속성을 복사할떄 사용 // const userAge={// //key :value // name:"Heropy",/

정규식, Regular Expression문자 검색(search)문자 대체(replace)문자 추출(extract)https&#x3A;//regexr.com/

SymbolECMAScript 2015의 Symbol 입니다.new Symbol로 사용하루 수없습니다.Symbol을 함수로 사용해서 Symbol타입을 만들어 낼 수 있습니다.// 프리미티브 타입의 값을 담아서 사용합니다.// 고유하고 수정불가능한 값으로 만들어줍니다./

SymbolECMAScript 2015의 Symbol 입니다.new Symbol로 사용하루 수없습니다.Symbol을 함수로 사용해서 Symbol타입을 만들어 낼 수 있습니다.// 프리미티브 타입의 값을 담아서 사용합니다.// 고유하고 수정불가능한 값으로 만들어줍니다./

npm init -y로 패키지를 만들어줌.콘솔창에npm i -D parcel-bundler 러를 작성해준다 그럼 폴더창에 가 생성됨.package.json파일을 수정해준다.

map메서드는 배열.map(요소,인덱스,배열)=>{return요소} 로 구분된다.반복문을 돌며 배열안의 요소들을 짝지어주는 것 !알아둘점은 map을 실행하는 배열은 결과로나오는 배열과 다른객체라는 점 !반복문으로 요소를 순회 각요소를 어떻게 짝지어줄지 알려줌.이번에는

조건문 기억해야될 구문 😡😀 if(false) if(null) (undefined) if(0) if(NaN) ('') 👄if문에서 false로 변환되므로 if구문이 실행되지않는다 !

ctrl+c ctrl+v원본에 영향을 주지않음원본 배열에 영향을 줌.push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.shift() 메서드는 배열에서

\*\*onKeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때onKeyup(KeyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때\*\*onKeyPress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때 \*\* 테스트를 해보면 onk

1 형상 관리 도구(Configuration Management Tool)중 하나.Git은 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개소프트웨어.SVN보다 여러 장점이 있어 SVN을 쓰던 개발 조직들은 하나둘씩 Gi

김코딩이는 fork한 codestates 깃헙 리파지토리를 본인의 local에서 작업하려고 합니다. 복사한 깃헙 리파지토리 주소는 https&#x3A;//github.com/kimcoding/test.git 입니다.git clone https&#x3A;//github.

노드몬이 자꾸오류나서구글링했더니 이블로그를 참조하니 도움됐다!!!출처: https&#x3A;//velog.io/@lilclown/Error-nodemon-%EC%98%A4%EB%A5%98-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%9

동기(Synchronous)는 순서가 존재한다.그리고 하나의 작업이 끝나기 전까진 다른 작업을 진행할 수 없다.실생활에서 카페에서의 주문을 예로 들어보면,우리가 카페에 가서 커피를 주문을 한다고 가정해보면,점원에게 커피 주문점원은 주문 접수커피제작고객에게 완성된 커피

모던 웹의 패러다임이다. SPA는 단일 페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다는 장점이 있다.SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신

요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.리액트는 SPA(Single Page Application 방식)기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다.새로운 페이지를 로드

컴포넌트의 속성(property)을 의미합니다.이전 State & Props Intro에서 잘 설명되었듯, props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다.부모 컴포넌트(상위 컴포넌트)로

Given an array of integers nums, calculate the pivot index of this array.The pivot index is the index where the sum of all the numbers strictly to the