프로그래밍 언어(22)
-
[ReactJS] Create Component with JSX
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..
2019.03.15 -
[ReactJS] React 소개
What is React?1. JavaScript 기반React(이하 '리액트')를 사용하기 위해 별도의 언어를 추가로 배울 필요가 없이 자바 스크립트만 잘 사용할 수 있으면 된다.Angular, Vue.js 와 같이 추가적으로 다른 언어를 배울 필요가 없다는 장점이 있다. 2. Composition리액트 구조는 요소별, 컴포넌트 별로 쪼개어 작업할 수 있다.단위로 나누어 작업을 하면 완성된 컴포넌트는 다른 곳에서도 가져다 쓸 수 있게 된다. JSXJavaScript eXension은 자바스크립트 언어의 확장이며, 개발자들이 친숙한 형태의 문법을 사용해 컴포넌트 렌더링을 구조화 하는 방법을 제공한다. 간단하게는 리액트로 HTML을 사용하는 방법. #출처 - 위키페디아 리액트 #(https://ko.wik..
2019.03.12 -
[JavaScript] DOM Methods
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) / 요소..
2019.03.05 -
[Javascript] Arrow Functions
화살표 함수 표현화살표 함수란 기존 자바스크립트의 함수 선언 방식인 function 키워드를 사용하지 않고 => 를 사용하여 간략하게 함수를 선언할 수 있도록 한 것이다.Expression:(param1, param2, param3, ....) => { statement };항상 '익명' 함수의 형태를 띄어야 한다.this(자신), super(부모), arguments(인자값) 바인딩을 하지 않는다.
2019.03.03 -
[Node.js] NPM 프로젝트
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의 어떤 디렉터리에서도..
2019.03.03 -
[HTML] HTML Tags (3) 동영상, Form, 레이아웃 태그
폼 태그와 레이아웃 태그는 중요한 태그이므로 확실하게 익힐 수 있도록 한다. 1. 비디오 태그 미디어 요소, 여러 미디어 리소스를 지정하는 데 사용됩니다 , . 2. Form 태그사용자로 부터 어떤 정보를 입력받아 서버로 전송하기 위해 사용하는 태그 5 = HTML5에서 새롭게 추가된 속성속 성 값 설 명 acceptfile_type HTML5에서 더이상 사용되지 않는 속성 서버에서 받을 수 있는 파일 유형을 콤마로 구분된 리스트를 나타냄. accept-charsetcharacter_set 폼 제출을 위해 사용될 수 있는 문자셋을 지정함. action URL 입력된 form-data가 어디로 보내질지 나타냄. method get 주소창에 서버로 전송되는 데이터가 노출됨. 전송값이 노출되어도 무관한 간단한..
2019.03.01