TIL(Today I Learned..)

자바스크립트 처리과정 웹 엔진이 가지고 있는 HTML 문서를 파싱하여 DOM Tree 생성 후 javascript 위치 자바스크립트는 DOM객체를 이용해서 컴포넌트들을 조작하는데 상단위치시HTML 파서가 파싱을 멈추고 스크립트 파일을 읽기 때문 위에서 스크립트파일

Reset의 개념 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 처음부터 초기화 즉, 재설정 예로, margin, padding을 적용할때 브라우저 마다 보이는 방식이 다름 따라서 css 작성시 위와 같이 0으로 초기화하는 작업이 필요 한번에 초기화

position position 속성은 HTML 문서 상에서 요소가 배치되는 방식 결정 > ### 속성값 static : 기준없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준 fixed : 뷰포트 (브라우저) 기준 sticky

Flex 보통 요소표시 방법으로 위와 같은 방식으로 사용하지만, block 이나 inline이 아닌 flex로 정의. 로 사용 가능 Flex는 container, Item으로 나눌 수 있음 Container : Item을 감싸는 부모요소 Item : contai

자바스크립트 개발환경 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행 가능합니다. node.js npm nvm parcel loash git bash

var : 중복 선언 가능 let : 중복 선언 불가능, 재할당 가능const : 중복 선언, 재할당 불가능스코프란 유효한 참조 범위를 말합니다.예로, 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능합니다.자바스크립트는 변수의 선언 방식마다 스코프가 다릅니다

화살표 함수는 function 키워드 대신하여 (=>)를 사용하여 간략하게 선언할 수 있습니다. 화살표 함수는 ES6가 도입되면서 등장했습니다.화살표 함수는 위와 같이 선언이 가능합니다.보다 더 자세하게 선언방법에 대해 알아보겠습니다.

브랜치란?

Git flow를 활용하여 협업 프로젝트를 진행했습니다.팀의 프로젝트 git 주소를 fork 하여 자신의 repository 에서 작업을 진행합니다.fork 된 주소를 자신의 로컬 저장소에 clone 한뒤 진행합니다.Git flow는 프로젝트 설정을 변경하기 위해 초기

생성자 함수란 new 키워드와 함께 쓰이는 함수입니다. 객체를 생성하기 위해서는 직접 객체를 반환해도 되지만, new 키워드를 사용하여 함수를 호출하게되면 return 문이 없어도 새로운 객체를 반환할 수 있습니다.그리고 함수 에서 this를 사용하여 반환되는 객체의

clss를 선언하기 위해서 클래스 이름과 class 키워드를 사용해야 합니다.클래스는 위와 같이 선언할 수 있습니다.constructor 메소드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드 입니다. constructor 메소드는 클래스 안에 한개

반복문을 활용한 별찍기는 알고리즘 기초 문제로 자주 등장하는 실습 예제중 하나입니다. 아래 예제를 통해 반복문으로 별을 찍어보도록 하겠습니다.위와 같이 별을 찍어봅시당!위와 같이 출력하기 위해서는 공백을 출력하는 for문이 하나 더 필요합니다.

고차함수와 콜백함수의 개념을 배우기전 알아야할 개념이 있습니다.바로 '일급객체'입니다.자바스크립트에서 객체는 일급객체입니다. 함수 또한 객체로 표현하기 때문에 일급함수도 만족합니다. 일급객체란 다른 객체들에 일반적으로 적용가능한 연산을 모두 지원하는 객체를 가리킵니다.

상속을 통해 자식클래스에서 부모 클래스의 값을 가져다 사용할 수 있습니다. 부모 클래스에게 상속받아 자식클래스를 만들었는데 자식클래스에서 속성 또는 메소드를 추가하려고 할때 constructor 재정의가 필요로 합니다.이러한 과정에서 중복되는 코드가 발생해 error

객체 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것은 객체라고 할 수 있습니다. 원시형 값을 제외한 함수, 배열, 정규 표현식 등은 모두 객체입니다. 원시형은 단 한나의 값만을 나타내지만 객체(참조형)은 다양한 값을 하나의 단위

구조분해할당 =>destructoring value를 변수로 만들때 유용 여러개의 value를 한번에 변수로 만들때 특히 유용 간단하게 한번에 선언가능

기본내장객체 자바스크립트에서 기본적으로 제공하는 객체. 내장 객체의 종류에는 많은 객체들이 존재하는데, 그 중 문자(String), 날짜(Date), 수학(Math), 정규 표현 객체(RegExp) 객체들에 대해 간단히 알아보도록 하겠습니다. String 문자열을

DOM 동일한 문서를 표현하고 저장하고 조작하는 방법을 제공합니다. DOM은 원본 HTML 문서의 객체 기반 표현 방식입니다. DOM의 개체 구조는 트리로 표현됩니다. 루트 요소인 에 태그로 나뉘게 되고 각각의 자식요소를 갖게 됩니다. DOM은 HTML 문서에

변수 선언이 스코프의 선두로 끌어 올려진 것 처럼 동작하는 자바스크립트의 공유의 특징입니다.변수 호이스팅에서 알수 있듯이 변수 선언은 선언문이 어디있든 상관없이 가장 먼저 실행합니다.전역 변수 선언은 코드가 한줄씩 순차적으로 실행되는 시점인 런타임에 실행되는 거이 아니

React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다.React는 페이스북에서 제공해주는 프론트엔드 라이브러리싱글페이지 애플리케이션, 모바일 애플리케이션 개발시 토대로 사용JSX 문법JSX 는 자바스크립트 안에서 HTML문법을 사용하

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 setTimeout() setInterval() 메소드를 제공합니다.또한 위의 설정된 함수 호출을 취소할 수 있도록 clearTimeout() clearInterval() 메소드를 제공합니다.setT

리액트 프로젝트를 만들기 위해 작업 환경 설정 방법에 대해 알아봅시다!1\. Node.js / npm, yarn 설치하기2\. 코드 에디터 설치3\. git 설치4\. npm init react-app 으로 프로젝트 만들기우선, 리액트 프로젝트를 만들 때는 Node.j

정리 API 연동 프로젝트를 진행하면서 여러가지 개념들에 대해 더 정확히 알아보고 싶어 글을 쓰게 됩니다. input event 값 input 창에 사용자로부터 입력을 받고, 받은 입력에 대한 이벤트를 발행하는 구문을 구현하다가 change 이벤트와 input 이벤트

각 반복문 for in, for of, forEach, map 비교를 해보겠습니다.for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다.모든 객체에서 사용이 가능합니다.for in 구문은 key 값에는 접근이 가능하지만 value 값에는 접근이 불가