전체 글
-
5. Conclusions - 웹 서비스 만들기 | 노마드코더Front-end/React.js 2020. 3. 16. 20:06
[출처 : https://academy.nomadcoders.co] 0. Deploying to Github Pages 1. > npm i gh-pages gh-pages 설치 *gh-pages : 웹사이트를 github page 도메인에 나타나게해준다. 2. github에서 project 이름을 가져오고 * > git remote -v 를 통해 project 이름을 확인할 수 있다. 3. user name을 가져온다 *ex) agal2.github.io/nomadcoders-react1 4. pakage.json에서 4-1. 중첩되지 않고 "hompage" : "위에서 얻은 주소" 추가 *ex) "homepage": "agal2.github.io/nomadcoders-react1 " 4-2. "scri..
-
4. Making the Movie App - 웹 서비스 만들기 | 노마드코더Front-end/React.js 2020. 3. 14. 17:29
[출처 : https://academy.nomadcoders.co] 0. Fetching Movies from API > npm i axios axios 설치 *aixos : node.js와 브라우저를 위한 http통신 javascript 라이브러리 *javascript에서 data를 fetch 하는 방법 중 하나인 fetch() 달리 크로스 브라우징에 최적화 ※ JSONView (크롬 확장 프로그램) getMovies = async () => { // axios.get(url[, config]) : url[, config]로 부터 데이터(값)을 가져온다(불러온다) const moives = await axios.get("https://yts-proxy.now.sh/list_movies.json") co..
-
데이터 타입 - Javascript 핵심 개념 | 정재남Javascript/ECMAScript 2009 (ES5) 2020. 3. 13. 19:39
[출처 : https://www.inflearn.com] 강의 Intro [Section1] 데이터 타입 : 데이터가 메모리에 저장되는 방식을 확인함으로써 기본형과 참조형의 데이터가 발생하는 이유 [Section2] 함수 : 호이스팅, 선언방식별 차이점, 함수스코프와 실행컨텍스트의 정의 및 자바스크립트 엔진이 해석하는 순서, 메소드와 함수의 구별하는 법과 콜백함수의 정의 및 특징 [Section3] this : 상황별로 달라지는 this와 명시적인 this 바인딩 방법(call, apply, bind 메소드) [Section4] closure : 클로저의 의미, 클로저로 private 변수 생성 방법 [Section5] prototype : 다이얼그램을 활용해서 자바스크립트 전반을 아우르는 동작 원리 [..
-
프로미스 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 13. 17:29
[출처 : https://poiemaweb.com] 1. 프로미스란? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 가독성이 나쁘고 비동기 처리 중 발생한 에러의 예외 처리가 곤란하며 여러 개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입하였다. Promise는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현한다. 2. 콜백 패턴의 단점 2-1. 콜백 헬 # 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 ..
-
Node.js에서 Firebase 사용하기 | KOSMOFront-end/개발환경 2020. 3. 11. 22:02
1.명령어 툴 설치 > npm i -g firebase-tools > firebase --version 2.파이어베이스 프로젝트 폴더 초기화 > firebase login > firebase init hosting 3. 파이어베이스 functions 폴더 설치 > firebase init functions (처음 firebase init 할때 functions 체크 했다면 생략) > cd functions > npm install firebase-admin --save > npm i express --save > npm install consolidate --save > npm install ejs --save > cd .. 4. 코드 편집기를 열어서 확인 해 보면 public 폴더와 func..
-
프로젝트 생성 -NPM | 김정환Front-end/개발환경 2020. 3. 10. 18:34
몇 년 전부터 프론트엔드 개발자 채용 공고에 Node.js 기술이 우대 사항 항목으로로 추가 되었다. Node.js는 백엔드를 구현하는 기술이라고 생각했다면 이 채용 항목이 의문이었을지 모르겠다. 웹 어플리케이션 개발에 직접적으로 사용하는 것은 아니지만 개발 환경을 이해하고 구성하는데 Node.js를 모르면 언젠가는 한계에 부딪히게 될 것이다. 1. 프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다. 자바스크립트 스펙의 빠른 발전에 비해 브라우져의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프..
-
모듈 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 9. 18:53
[출처 : https://poiemaweb.com] 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다. 즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다. 모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 다른 언어에 비해..
-
3. State - 웹 서비스 만들기 | 노마드코더Front-end/React.js 2020. 3. 8. 17:25
[출처 : https://academy.nomadcoders.co] 0. Class Components and State # state : 동적 데이터와 함께 작업할 때 만들어지는 변하는 데이터. *Dynamic data - state는 object이다. component의 data를 넣을 공간이 있으며, 바꾸고 싶은 date를 넣는다. # state를 사용하려면 function component가 아닌 class componet를 이용한다. // class App은 React.Component에서 확장되어서 class React의 특성을 사용할 수 있게 된다. class App extends React.Component{ // return이 아닌 render 메소드를 사용한다. render(){ } }..