본문 바로가기

○ WEB157

Untracked files 에러 발생 및 해결방법 Untracked files에러 발생시 대처법 git clean -f untracked 파일을 모두 지울 수 있다 git clean -fd 디렉터리까지 지우려면 -d 옵션을 추가 git clean -fd --dry-run 지워질 파일을 미리 확인하여 커밋하지 않은 파일을 지우는 실수를 피함 2019. 7. 3.

3. CRA / npm / yarn / create-react-app 사이트의 설치 내용을 그대로 따라 하면 된다. 그러나 사이트와 달리 npm이 아닌 yarn으로 설치를 진행 (우선, 설치는 yarn을 통해 완료되기에 이전에 yarn이 설치되어있어야한다.) npx create-react-app movie_app cd movie_app yarn start (npx comes with npm 5.2+ and higher, see instructions for older npm versions) 입력을 하면 다음처럼 진행된다. 하나하나 차례대로 설명해보면 1. npx create-react-app movie_app 을 입력하면 다음처럼 4개의 scripts(start,build,test,eject)가 생성된다. 2. cd movie_app yarn start 을 입력했을시엔 .. 2019. 7. 2.

2. 리액트 / 웹팩 / 페이스북 / create react app 이전에 npm node.js Yarn 설치할 것 리액트 코드를 JS로 바꿔주는 툴이 필요 이를 트랜스파일러 / 트랜스포머 라고 부름 웹팩 우린 웹팩이란 트랜스파일러를 사용할것임. 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해줌 모듈번들러라고 부름 JS 최신버전 es6, ecmascript6 이 버전은 유용하고 편리한 기능이 많지만 모든 브라우저가 이해하진못함. 웹팩은 es6를 브라우저가 이해할 수 있게 변경해줌 그러나 시간이 부족한 경우 페이스북에서 초보자들을 위해 제공해주는 create react app 툴을 이용하여 설정 작업 없이 한번에 리액트 앱 구현 가능 웹팩은 추후 풀스택학습에서 다루기로 하고 여기선 미리 설치된 개발서버(pre-built-development server)로 학습한다. 2019. 7. 1.

1. React란? / 핫한 이유? React가 핫한 이유 1. JS기반이라 JS만 잘하면 됨 (angular,vue js처럼 다른 언어 배우지 않아도 됨) 2. 구조가 깔끔하다. 요소별(컴포넌트별)로 나눠서 작업가능하기에 요소를 다른 곳에도 사용가능 +. JSX란 리액트로 html을 사용하는 방법 3. 단방향 데이터 플로우(Data -> UI)를 가지기에 데이터는 항상 일정 장소에 있고 그 장소에서만 변경가능. 상태가 변했을 시 데이터는 그대로 있고 UI만 업뎃된다. 즉, 데이터가 UI를 변경시키는 것. (Angular의 경우, 데이터는 view나 model로 변한다.) 4. 방대한 커뮤니티, 오픈소스 5. 프레임워크가 아닌 UI 라이브러리이므로 파이썬,루비,nodejs 랑 섞어서 쓸 수 있다. model, view, controller.. 2019. 7. 1.

0. ubuntu bash shell 설정하기 / node.js / npm 설치 ubuntu bash shell 설정 1. 최소 성능 확인 설정 > 시스템 > 정보 2. 개발자모드로 변경 (혹은 MS에서 Ubuntu 앱을 다운받아서 사용하면 된다.) 설정 > 업데이트 및 보안 > '개발자용' 태그 > '개발자 모드' 선택 3. 윈도우용 리눅스 프로그램 설치 (혹은 MS에서 Ubuntu 앱을 다운받아서 사용하면 된다.) 제어판 > 프로그램 > 프로그램 및 기능 > windows 기능 켜기 끄기 > 'Linux용 windows 하위시스템' 체크 > 재부팅하기 4. lxrun 설치 cmd 관리자 권한으로 실행 lxrun /install 입력하기 (윈도우 로그인을 이메일 계정으로 한다. 로컬계정은 PC이름을 영문으로해야한다.) Unix 사용자 생성 후 설치완료 이제 bash 사용가능 우분투.. 2019. 7. 1.

3. Template Engine이란 / Jade,pug 사용법 / 쿼리객체 / Semantic Web/ POST / GET 템플릿엔진이란? 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(또는 소프트웨어 컴포넌트)를 말한다. 그 중 웹 템플릿 엔진(web template engine)이란 웹 문서가 출력되는 템플릿 엔진을 말한다. 즉, 웹 템플릿 엔진은 웹 템플릿들(web templates)과 웹 컨텐츠 정보(content information)를 처리하기 위해 설계된 소프트웨어이다. 동적, 정적 파일을 섞은 것을 템플릿엔진이라고 한다. 템플릿 엔진을 이용하면 다음과 같이 간단하게 만들 수 있다. 오른쪽이 템플릿 엔진. 규모있는 사이트를 만들 때 템플릿 엔진을 쓰면 이점이 많다. 템플릿 엔진 'jade' 설치 Express사이트에선 Jade가 아닌 pug가 쓰여져 있으나 우선,.. 2019. 6. 28.

2. Express란? install / Connection / 정적파일서비스 / 웹페이지 표현하는 법 Node.js FrameWork Express Express는 node.js 의 framework 입니다. framework 라는 것은 어떠한 작업을 쉽게 완성하기 위한 라이브러리의 집합이라고할 수 있습니다. 작업을 시작부터 끝까지 라이브러리로 지원한다는 점이 단순한 라이브러리와 차이가 나는 부분입니다. 예를 들면JQuery는 javascript 라이브러리로 다양한 용도를 가지고 있지만, jquery 자체가 무엇 하나를 이루기 위한 목적을 가지고 있지는않습니다. express는 node.js를 이용하여 웹 어플리케이션을 만들기위한 틀(frame)을 제공하는 라이브러리의 집합입니다. Express express 사이트에서 설치절차를 따른다. (node, npm init(현재 프로젝트를 npm프로젝트로 만듦.. 2019. 6. 28.

1. Node.js란? / 설치 / 웹 구조, 포트 / 모듈 / NPM, uglify install / npm module, underscore, dependency / Callback, 익명함수 / 동기와 비동기 Node.js란? Node.js의 경쟁자 Node.js와 같은 런타임 기술인 Python, Ruby, PHP, JAVA는 서버쪽에서 동작하면서 DB에 접속, 웹 페이지를 프로그래밍적으로 생산 Node.js의 장점 V8엔진 event-diven-programming non-blocking IO 웹 브라우저(클라이언트쪽)과 웹 서버(서버쪽)에서 JS를 사용하여 하나의 언어로 완결된 앱 제작 가능 JS로 웹 브라우저 및 Node.js 제어하려면 웹 브라우저 및 Node.js의 고유 기능들에 대해 알고 있어야 한다. Node.js 설치 다운로드 사이트(운영체제에 맞는 버전으로 다운) 정상적으로 설치됐는지를 확인하기 위해 node -v npm -v 를 입력하여 설치된 버전을 확인할 수 있다. 웹 구조 Domain.. 2019. 6. 28.

16. firebase 배포 1. ___ 키워드는 요소 자기 자신을 가리킴. 2. CSS ___ 키워드를 통해 애니메이션 동작 제작 가능 1. this 2. @keyframes firebase를 사용하기 위해 다음 4단계를 거치도록 하자 cmd창에 입력할 것 1. npm install -g firebase-tools +) 그렇다면 여기서 npm이란 무엇일까? Node Package Manager의 약자 JS에서 파생된 라이브러리 서버사이드 코드작성을 도와줌 Node JS 모듈을 패키지형태로 제공, 관리해줌 +) 클라이언트측의 앵귤러JS 2. firebase login 구글 아이디를 선택해서 로그인한다. 3. firebase init firebase 초기화하기 firebase를 사용할 폴더로 이동한 뒤 입력한다. 위 과정을 거치면 다.. 2019. 6. 21.

14. 키보드 이벤트 / onkeydown / onkeyup / 1. ___ 과 ___ 방식은 이벤트 중복 등록이 불가 2. 이벤트를 중복 등록하기 위해 ___ 를 사용 1. DOM 탐색 / 속성 등록 2. addEventListent() "onkeydown" 이벤트 지정한 요소에 키보드가 눌릴 떄 발생 "onkeyup" 이벤트 지정한 요소에 키가 눌렸다 땔 때 발생 이제 코드로 배워보자 우선 index.html main.js 실행결과 입력한 값들에 대한 정보들이 나오는 것을 알 수 있다. 2019. 6. 18.

12. Event / 이벤트 / 자바스크립트 1. ___ 는 코드의 논리적인 흐름을 하나로 묶는 역할을 한다. 2. ___ 키워드로 함수를 선언한다. 3. ___ 키워드는 반환값을 나타내며 반환값이 없을 수도 있다. 4. 변수에 함수를 할당하여 사용하는 것을 ___ 라고 한다. 1. 함수 2. function 3. return 4. 익명함수 JS란? 사용자 동작(이벤트)에 반응(핸들링)하기 위한 언어이다. 클라이언트측 특성화된 언어 이벤트? 웹 페이지에서 발생하는 모든 사용자의 액션 이벤트 사용하기위해 이벤트 핸들러를 등록함. 이벤트 핸들러(반응)는 이벤트 이름 앞에 "on"이 붙음 이벤트 핸들러 등록 방법 1. 속성으로 등록 2. HTML DOM : DOM 객체 탐색으로 등록 3. addEventListener() 메서드 : 메서드를 통해 이벤트.. 2019. 6. 17.

10. BOM객체 / window객체 / confirm / setInterval / open / close / alert 1. ___ 는 웹 페이지를 객체로 인식하는 방법이다. 2. DOM객체는 ___ 와 ___ 로 구성된다. 3. ___ 프로퍼티로 HTML 엘리먼트를 동적으로 조작할 수 있다. 1. DOM객체 2. Method property 3. innerHTML BOM객체란? Browser Object Model 객체 웹 브라우저 자체를 객체로 인식 index.html BOM객체에선 script태그가 body태그 내부에 있어야 한다. 하단은 각 메서드의 기능을 실행하기 위해 main.js에 입력한 코드이다. open, close 메서드를 통해 브라우저를 실행(새탭)시키거나 창을 닫을 수 있다. 현재는 window.document.getElementById()라고 입력했으나 window객체를 생략하여 사용해도 된다. 조.. 2019. 6. 15.

9. JS / DOM객체 / innerHTML / getElementById / getElementsByClassName / querySelectorAll 1. ___ 은 날짜 정보를 제공하는 내장 객체 2. 날짜 객체는 ___ 단위를 기준으로 시간을 표현 3. ___ 은 JS에서 하나의 객체이므로 프로퍼티와 메서드를 가진다. 1. Date() 2. 밀리세컨즈 3. 문자열 객체 DOM객체? Document Object Model객체 웹페이지(Document) 자체를 객체로 인식하기에 웹페이지의 여러 엘리먼트들을 조작할 수 있음 DOM객체이므로 메서드와 프로퍼티를 가질 수 있다. DOM메서드 : HTML 엘리먼트 인식 DOM프로퍼티 : HTML 엘리먼트 조작 getElement... innerHTML... 형태로 메서드와 프로퍼티가 구성됨 DOM객체로 웹페이지를 통제하기 위해선 특정 객체를 찾는 탐색과정이 필요함 총 5가지 탐색방법으로 이뤄짐 document.. 2019. 6. 15.

8. JS 내장객체 / new 연산자 / Date 객체 / 문자열 객체 / Number 객체 1. 객체 2. 속성 메서드 3. 내장객체 내장 객체? JS가 기본적으로 제공하는 객체 new 연산자 객체를 선언할 때 var 객체명 = {키:값} 처럼 중괄호로 객체를 선언하는 방법을 리터럴 형식이라고 한다. JS에선 객체를 리터럴 형식으로 선언하는 방식 뿐만 아니라 new 키워드를 이용한 객체 선언 방식도 지원함 (그러나 new 연산자를 이용한 객체 선언보단 리터럴 자료형 선언 방식을 권장) 선언 방법은 var 객체명 = new object(); new 연산자 선언 예시와 리터럴 방식 선언 예시 // new 연산자 선언 var obj = new Obejct(); // 객체 var str = new String(); // 문자열 객체 var arr = new Array(); // 배열 객체 var nu.. 2019. 6. 15.

6. JS 제어문 / 반복문 / for / while 1. ___ 은 코드의 논리적 구조를 처리하기 위해 사용 2. ___ 은 조건이 참일 경우 중괄호 안의 코드를 실행한다. 3. ___ 은 값의 조건에 따라 실행한다. 1. 조건문 2. if~else 구문 3. switch ~ case 구문 반복문? 특정 코드를 반복 처리 컴퓨터의 빠른 연산 속도를 이용해 다양한 처리 배열? 여러 자료형을 하나로 묶는 자료형 (객체) 하나의 변수에 담고 싶을 때 사용. 배열 값 할당방법 var arr = [값, 값, 값, ...] var arr = [1,2,3,4,5]; console.log(arr); 실행결과 다음처럼 나타난다. 인덱스 0 1 2 3 4 배열값 1 2 3 4 5 길이는 5 for 반복문 var arr = [1,2,3,4,5]; var len = arr.l.. 2019. 6. 14.

5. JS 제어문 1 / 조건문 / if / switch 1. 연산자 2. 산술연산자 3. 비교연산자 4. 삼항연산자 조건문? 프로그램 코드의 논리적 구조를 처리 if 조건문_1 if 조건문_2 if 조건문_3 조건문에선 모든 조건문이 충족되더라도 최상단의 충족 조건문 하나만 실행된다. Switch문 각 실행문마다 break; 를 입력해야 조건에 해당되지 않는 실행문이 실행되지 않는다. // swith문은 타입까지 일치해야 한다. var y = "10"; // string타입의 10 switch(y) { case 10 : console.log("10"); // number타입의 10 break; default : console.log("nothing"); break; } // 실행결과 "nothing" 출력 2019. 6. 14.

4. JS 연산자 1. 변할 수 있는 값 2. 값 3. console.log() 4. typeof 연산자란? 변수의 수학적 연산 및 처리를 하기 위한 기호 증감이란? var x = 10; 후위연산 x++ 출력되고 나서 값이 추가 전위연산 ++x 먼저 값이 추가되고 출력 후위연산 예시. 신기하게 x에 영향미침 // 후위연산예시 var x = 10; var y; y = x++; console.log(y); // 10출력 console.log(x); // 11출력 // 전위연산예시 var x = 10; var y; y = ++x; console.log(y); // 11출력 console.log(x); // 11출력 var x = 10, y = "10"; console.log(x = y); // true로 나옴. type신경쓰지.. 2019. 6. 14.

3. JS 변수 / 변수 선언 / 변수 초기화 / undefined, null 차이점 / typeof 1. HTML은 ____형태이다 2. JS코드 작성시 ___에 유의 해야 한다. 1. DOM(Document Object Model) 구조 2. 작성 순서 +) 왜냐면 인터프리터언어이므로 변수? 변할 수 있는 수 수학적 연산 및 처리가 필요한 경우 변수 사용하는 방법 / 변수 선언 키워드 var 변수명; 변수에 값 할당 (초기화) var 변수명 = 값; 변수를 작성하면 저장 공간(메모리)에 하나씩 변수들이 쌓인다 변수를 사용한 만큼 메모리를 사용하게 된다. JS코드를 해석할 때는 메모리를 운영체제에게 빌려서 만든 변수들을 쌓아서 사용한다. 변수를 선언하기 전에 자료형에 대해 알아보자 변수가 갖는 자료형태를 의미한다. 자료형태 5종류 문자(String) / 숫자(Number) / 논리(Boolean) / .. 2019. 6. 14.

이전 1 ··· 5 6 7 8 9 다음

티스토리툴바