profile
Prof.Google을 통해 필요한 정보를 이 곳에 insert 🐸
post-thumbnail

React - Component & props

프론트엔드 개발에서 Component(컴포넌트)라는 단어를 많이 사용합니다.🐸 Component = 재사용이 가능한 UI단위컴포넌트는 독립적으로, 재사용가능한 코드로 관리할 수 있습니다. 하나의 컴포넌트에 필요한 html, css, js(validation check

11분 전
·
0개의 댓글
post-thumbnail

React - JSX

JSX(syntax extension for JavaScript) = Javascript의 확장버전입니다.HTML과 비슷하게 생겼고 Javascript 파일 내에서 작성할 수 있습니다.JSX는 원래의 Javascript 문법이 아니기 때문에, js 파일 내에 JSX 문

약 1시간 전
·
0개의 댓글
post-thumbnail

버블링 & 캡처링

아래 예시를 보자!em 태그를 클릭해도 div에 할당한 핸들러가 동작한다!🛁버블링의 원리한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다!가장 최상단의 조상요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할

어제
·
0개의 댓글
post-thumbnail

DevTools

프론트엔드를 잘하기 위한 필수 마스터과정 Devtool(개발자도구)를 알아보자 ㄹ

5일 전
·
0개의 댓글
post-thumbnail

반복문 (while, for);

개발을 하다보면 여러 동작을 반복해야되는 경우가 많다..항상 반복을 줄이는는 방향을 생각하며 코드를 작성하자.그렇기에 우리는 반복문을 가지고 놀아야 한다.while 반복문의 문법은 다음과 같다!condition(조건)이 truthy이면 반복문 본문의 코드가 실행된다!아

2020년 7월 24일
·
0개의 댓글
post-thumbnail

조건부 연산자(if);

if(조건문){}문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드블록(중괄호)가 실행됩니다.위 예시에선 조건(year == 2015)이 간단한 경우만 다뤘는데, 조건문은 더 복잡할 수도 있습니다.⚡️조건이 true일 때 복수의 문을 실행하고 싶다

2020년 7월 24일
·
0개의 댓글
post-thumbnail

객체(object)의 키(key)를 변수로 가져오기

getExamResult 함수를 구현해보자조건인자(arg) scores는 다음과 같은 객체입니다.객체 요소의 갯수 및 키의 이름은 달라질 수 있다.객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.('A+', 'A', 'B+', 'B', 'C+', 'C',

2020년 7월 23일
·
0개의 댓글
post-thumbnail

객체(object);

JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 {Key: Value} Pair를 저장할 수 있는 구조이다.위의 그림을 보자면,pl

2020년 7월 22일
·
0개의 댓글
post-thumbnail

Math.radom();

0 ~ 1사이의 난수를 무작위로 생성합니다.난수의 범위 지정은 곱하기 \* 기호와 더하기 + 기호로 최대값과 최소값을 지정할 수 있습니다.소숫점을 절삭하고 정수로 난수를 추출하는 방법은 Math.floor() 객체를 같이 사용하면 됩니다.초기 범위인 0 ~ 1이 아닌

2020년 7월 22일
·
0개의 댓글
post-thumbnail

new Date();

new Date() 함수는 함수가 실행되는 시점에 날짜 및 시간 데이터를 갖고 오는 함수입니다. 출력하게 되면 요일, 월, 일, 연, 시, 분, 초 GMT기준시간을 표시합니다.아래와 같이 출력된다. etFullYear / getMonth / getDate

2020년 7월 22일
·
0개의 댓글
post-thumbnail

배열(array)

배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 데이터는 순차적으로 저장되며 중복이 가능합니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다."서울", "대전"과 같은 배열의 값, 하나하나를 Element(요소)라고 부릅니다.요소와 요소

2020년 7월 21일
·
0개의 댓글
post-thumbnail

function(multi arguments) - 여러인자

두둥..함수에 인수가 한 개가 아닌 여러 개 전달할 수도 있다!아래의 예시를 보자이를 이용해서 아래와 같은 문제를 해결할 수 있다.3개의 인자를 받습니다.1번째 인자는 년도에 해당하는 숫자입니다.2번째 인자는 월에 해당하는 숫자입니다.3번째 인자는 일에 해당하는 숫자입

2020년 7월 21일
·
0개의 댓글
post-thumbnail

매개변수(parameter)와 인자(argument)

함수를 정의하면서, 함수 선언식의 괄호'()'안에 어떤 변수명을 쓰면,우리는 그것을 매개변수(parameter)라고 합니다. 즉, 외부로부터 들어오는 값을 담아 함수 안쪽에서 변수와 같은 역할을 합니다.함수가 호출될 때, 값을 전달받게 되면, 매개변수에 값이 정의됩니다

2020년 7월 21일
·
0개의 댓글
post-thumbnail

semantic TAG

인터넷을 돌아다니면서 보이는 페이지들의 소스를 살펴보면 서로 다른 듯 보이면서 그 구조는 크게 다르지 않다.사이트의 제목과 로고, 검색 창 등이 있는 header, 여러 내용이 있는 content 부분, 본문 외의 내용을 나타내는 side, 그리고 저작권 정보와 제작자

2020년 7월 21일
·
0개의 댓글
post-thumbnail

CSS layout-float

css 기초공사 float에 대해 check! 가자! float 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성(예: 이미지가 컨테이너의 텍스트 왼쪽에 떠 다니도록) 값 left: 요소가 컨테이너의 왼쪽에 뜬다 > right: 요소가 컨테이너의 오른쪽에

2020년 7월 20일
·
0개의 댓글
post-thumbnail

inline, block, inline-blcok

css 기초공사 display 속성 값 inline, block, inline-blcok애 대해 check! 가자!display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸도록

2020년 7월 20일
·
0개의 댓글
post-thumbnail

img vs background-image

내 웹사이트에 이미지를 넣는 방법1\. img src"" 2\. background-image두 방식 모두 이미지를 불러올 수 있지만,차이점이 하나 존재한다.바로 이미지태그에는 src 이외에 attribute가 존재한다는 것!이것이 img TAG 로드 실패시 경우이 부

2020년 7월 20일
·
0개의 댓글
post-thumbnail

알아두면 쓰게되는 CSS-2

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성!defaultcontent-box상속:No애니메이션:No문법box-sizing: content-box | border-box | initial | inheritcontent-box: 콘텐트 영

2020년 7월 17일
·
0개의 댓글
post-thumbnail

알아두면 쓰게되는 CSS

오늘은 알아두면 쓰게되는 CSS 속성에 대해서 알아본다! rem의 활용 rem = root em 최상인 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이개념! 즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산됩니다.

2020년 7월 12일
·
0개의 댓글
post-thumbnail

git 을 사용하자

새로운 저장소 만들기 폴더를 하나 생성하고, 그 안에서 아래 명령을 실행하자! >git init 그러면 새로운 git 저장소가 만들어집니다. 저장소 받아오기 로컬 저장소를 복제(Clone)하려면 아래 명령을 실행하자! >git clone /로컬/저장소/경로 원격

2020년 7월 9일
·
0개의 댓글