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..

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의 어떤 디렉터리에서도..

본 게시글은 생활코딩 egoing 강사님의 'Javascript' 강의를 듣고 정리한 내용입니다. 번외편에서 다룬 정규표현식은 자바스크립트에서 어떻게 동작하는지 정도만 간단한게 학습해봅니다. 더 자세한 정규표현식에 대한 공부를 위해서 아래 링크를 참고하시길 바랍니다. 정규표현식 Regular Expression어떤 문자열에서 특정한 패턴에 해당하는 문자를 찾아내는 도구이다. 정규표현식으로 무얼 할 수 있나?정규표현식으로 문자열의 검색 / 추출 / 치환 을 할 수 있다. 1. 정규표현식 사용하기정규표현식을 사용하기 위해서 두 가지 단계를 거쳐야 한다. ① Compile검색하고자 하는 문자열 패턴을 만드는 행위 , 컴파일 방식엔 두 가지 방법이 존재. ⅰ) 정규표현식 리터럴 1var re = /a/;cs ⅱ..