ReactJS 컴포넌트 만들기 1. movie_app 프로젝트 생성# create-react-app movie_app# cd movie_app# npm start 1: CRA를 이용해 movie_app 이라는 앱 프로젝트를 생성한다.2: npm start 명령어를 통해 생성한 App이 웹 브라우저에서 어떻게 보이는지 바로 확인할 수 있도록 내장서버를 실행시킨다. react-script 파일이 실행되는데 이 파일이 실질적으로 우리가 생성하고 작성한 리액트 앱을 실행시켜주는 것 같다. ※ CRA(create-react-app)로 생성한 React App의 디렉터리 구조movie_app├── README.md├── node_modules/├── package.json├── .gitignore├── public..

What is React?1. JavaScript 기반React(이하 '리액트')를 사용하기 위해 별도의 언어를 추가로 배울 필요가 없이 자바 스크립트만 잘 사용할 수 있으면 된다.Angular, Vue.js 와 같이 추가적으로 다른 언어를 배울 필요가 없다는 장점이 있다. 2. Composition리액트 구조는 요소별, 컴포넌트 별로 쪼개어 작업할 수 있다.단위로 나누어 작업을 하면 완성된 컴포넌트는 다른 곳에서도 가져다 쓸 수 있게 된다. JSXJavaScript eXension은 자바스크립트 언어의 확장이며, 개발자들이 친숙한 형태의 문법을 사용해 컴포넌트 렌더링을 구조화 하는 방법을 제공한다. 간단하게는 리액트로 HTML을 사용하는 방법. ＃출처 - 위키페디아 리액트 #(https://ko.wik..

JavaScript Clone Coding첫번째 클론 코딩 프로젝트본 프로젝트는 Nomad Coders(https://academy.nomadcoders.co/) 의 Nicolás Serrano Arévalo 님의 강의를 듣고 수행한 프로젝트입니다. 개발자로서 배울게 많은 프로그래머라고 생각하는 분 입니다. 무료 강의도 있고, 프로젝트 형태로 하나의 서비스를 클론 코딩하는 강의로 있으니 한 번 둘러보시길. 클론 코딩 대상 : Momentum Momentum 이라는 크롬 확장 프로그램(웹 애플리케이션)은 기존의 New tab 페이지 대신 별도의 개인적인 대쉬보드를 사용자에게 제공한다. Momentum(이하 ‘모멘텀’)의 기능 분석 1.UserName 입력 받기.모멘텀 앱에서 가장 처음 볼 수 있는 화면이 ..

DOM( Document Object Module )자바스크립트는 HTML의 모든 요소를 가져와 그것들을 Object로 만들 수 있다.const title = document.getElementById('title'); console.log(title); console.error("Holy.. ");document(문서) : 최상위 객체를 가리킨다. 현재 자바스크립트가 로드된 웹 문서. (ex) index.html >>> index.html 문서에서 id="title" 인 HTML 요소를 찾아 title 이라는 변수와 연결시켜주고 있다. 자바스크립트를 통해 HTML을 수정할 수 있고, class 를 추가하고, 애니메이션을 변경할 수도 있다. 새로운 이벤트 생성 / 이벤트에 대해 반응(react) / 요소..

화살표 함수 표현화살표 함수란 기존 자바스크립트의 함수 선언 방식인 function 키워드를 사용하지 않고 => 를 사용하여 간략하게 함수를 선언할 수 있도록 한 것이다.Expression:(param1, param2, param3, ....) => { statement };항상 '익명' 함수의 형태를 띄어야 한다.this(자신), super(부모), arguments(인자값) 바인딩을 하지 않는다.

NPM 공식 사이트에 따르면 npm은 '세계에서 가장 큰 소트프웨어 레지스트리(라이브러리)' 라고 정의하고 있다. 오픈 소스 개발자들은 npm을 사용해서 패키지를 공유하고 대여할 수 있으며, 많은 조직에서 개인 개발도 관리 할 수 있다고 한다.무료CLI 환경 지원 1. NPM 프로젝트 초기화# npm init> 기본 설정 파일 생성 (package.json)Key & Value 쌍으로 구성된 javascript object 파일이 생성됨. 2. NPM 모듈 설치# npm install [PACKAGE_NAME] --save : Dependency를 package.json 에 자동으로 추가 시켜줌. 다음에 패키지를 설치시 함께 설치되도록 하는 것-g : global 옵션으로. 내 PC의 어떤 디렉터리에서도..