Category: Front-end

2019
0
Front-endReact

React 3일차

요소(element) 렌더링요소는 React 앱에서 가장 작은 단위의 재료입니다. 요소는 화면에 표시하고자 하는 내용을 서술합니다. React는 element를 받아서 화면에 그려주는 기능을 하는 라이브러리 브라우저 DOM 요소와 달리, React 요소는 순수한 객체이며 생성 비용이 저렴합니다. 생성 비용? ex) video태그, img태그 등은 비용이

0
Front-endReact

React 2일차

JSX 소개 JSX로 만든 엘리먼트는 변수에 담을 수 있고, 함수의 매개변수로도 사용할 수 있다. 왜 JSX인가?JSX에 표현식 포함하기 JSX 안에 자바스크립트 표현식 을 중괄호로 묶어서 포함시킬 수 있다. 예를 들어, 2 + 2, user.firstName, formatName(user) 를유효한 표현식으로 표현하면 아래와 같이 표현한다. 12345

0
Front-endJavaScript

문자열 심화 & 객체의 기본과 속성

본 포스팅은<ZeroCho님의 인프런 - 웹 게임 개발 자바스크립트 >강의를 들으면서 정리한 내용임을 알려드립니다. 문자열 심화 - index와 length123456"함수야놀자"[2];// "야""함수야놀자"[0];//"함""함수야놀자"[3];//"놀" 123함수야 놀자1 2 3 4 5 <-- 사람0 1 2 3 4 <-- 컴퓨

0
Front-endJavaScript

끝말잇기 구현

본 포스팅은<ZeroCho님의 인프런 - 웹 게임 개발 자바스크립트 >강의를 들으면서 정리한 내용임을 알려드립니다. 끝말잇기 구현 코딩 자체보다는 순서도(알고리즘)가 더 중요하다. 순서도 논리적 사고를 하는 게 중요하다. 손이나 그림판으로 직접 그리면서 연습을 많이 해보자. while문으로 구현12345678910111213141516

0
Front-endReact

React 1일차

React공부 방법에 대한 tip 한글 번역판보다는 영문판이 최신 버전이므로영문판으로 공부하면 가장 최신 버전의 React를 접할 수 있다. 개요React가 무엇인가요? React는 선언적이고, 효율적이며, 유연한 JavaScript 라이브러리이다. 명령형 프로그래밍 ex) Dom API처럼 일일히 속성을 지정해서 값을 넣으라고 명령하는 것 코드를 실행

0
Front-endJavaScript

반복문(while, for)

본 포스팅은<ZeroCho님의 인프런 - 웹 게임 개발 자바스크립트 >강의를 들으면서 정리한 내용임을 알려드립니다. 반복문while문먼저, while문의 형태를 보자. 12345처음;while (조건) { 실행; 끝;} 1234let 변수 = "딸기";while ("딸기" === 변수) { console.lo

0
Front-endJavaScript

자바스크립트 기초

본 포스팅은<ZeroCho님의 인프런 - 웹 게임 개발 자바스크립트 >강의를 들으면서 정리한 내용임을 알려드립니다. "REPL": READ EVALUATE PRINT LOOP 연산자 우선순위 대입연산자인 =이 제일 마지막에 실행된다. 소괄호()를 쓰면 연산자 우선순위를 바꿀 수 있다.(수학처럼) 함수1y = f(x)

0
Front-endCSS

CSS 레이아웃 핵심속성 position

position 속성position 속성 중에 relative, absolute가 거의 90%의 비율로 사용된다. position: relative; position: relative;는현재 이미지를 기준으로 변화를 주겠다는 의미이다. relative는 주위 환경에 영향을 끼치지 않으면서위치를 조정한다. position: absolute; 부모에 rela

0
Front-endCSS

CSS 레이아웃 핵심속성 float

1교시float로 가로배치 하기가로배치는 소박한 꿈이다.그러나 공식적으로 지원되는 게 없다.float도 가로 배치를 위한 속성이 아니다. 공식적인 방법이 아닌 방식으로 가로배치를 하려고 하기 때문에문제가 발생한다. 박스가 위로 떠있어야만이 그 박스 주위로 Dummy Text들이 그 주위로 흐른다.(같은 선상에 있지 않아야 한다.) float의 목적은 이미지

0
Front-endJavaScript

자바스크립트 19일차

모듈 역사 DOM Tree 라이브러리require.js 모듈 번들러Browserify CommonJS-require()함수를 이용해서 모듈을 이용 Node.js 모듈 UMD define()함수를 이용해서 모듈을 이용 많은 모듈 시스템이 있었다.기존의 자바스크립트 함수를 사용하는 모듈 시스템들이 사용되었다. 예전 모듈 시스템은 자바스크립트 함수를 사