쉬는 시간에

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다. 크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다. 본 포스팅은 (2)화면을 구동하는 스텝의 두번째 2.2단계에 해당된다. 1. 화면 구성 > 1.1 : Input Component 생성하기 (textarea, input) > 1.2 : Option Component 생성하기 (option) > 1.3 : CSS 적용하기 2. 화면 구동 > 2.1 : DOM 조작하기 > 2.2 : 배열 사용하기 2.1단계에서 텍스트를 기입하여 해당 내용을 저장하는 저장 기능을 추가하였다. 이번 2.2단계에서는 배열을 이용하여 내용을 저장하고, 저장된 내용을 삭제/수정이 가능하도록 하고자 한다. 배열(Arrays)이..

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다. 크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다. 본 포스팅은 (2)화면을 구동하는 스텝의 첫번째 2.1단계에 해당된다. 1. 화면 구성 > 1.1 : Input Component 생성하기 (textarea, input) > 1.2 : Option Component 생성하기 (option) > 1.3 : CSS 적용하기 2. 화면 구동 > 2.1 : DOM 조작하기 > 2.2 : 배열 사용하기 이전 포스팅을 통해 화면을 모두 구성하였으므로, 이번 스텝에서는 화면을 구동하는 기능을 추가하고자 한다. 이번 2.1단계 포스팅에서는 저장버튼을 추가하여 저장 버튼을 클릭했을 때, 텍스트 영역에 값이 정상적..

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다. 크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다. 본 포스팅은 (1)화면을 구성하는 스텝의 세번째 1.3단계에 해당된다. 1. 화면 구성 > 1.1 : Input Component 생성하기 (textarea, input) > 1.2 : Option Component 생성하기 (option) > 1.3 : CSS 적용하기 2. 화면 구동 > 2.1 : DOM 조작하기 > 2.2 : 배열 사용하기 1.1단계에서 페이지에 textarea 태그와 input 태그를 활용하여 값을 입력하는 부분을 구성하였고, 1.2단계에서는 option 태그를 활용하여 값을 목록에서 선택하여 입력할 수 있도록 구성하였다. ..

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다. 크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다. 본 포스팅은 (1)화면을 구성하는 스텝의 두번째 1.2단계에 해당된다. 1. 화면 구성 > 1.1 : Input Component 생성하기 (textarea, input) > 1.2 : Option Component 생성하기 (option) > 1.3 : CSS 적용하기 2. 화면 구동 > 2.1 : DOM 조작하기 > 2.2 : 배열 사용하기 1.1단계에서 페이지에 textarea 태그와 input 태그를 활용하여 값을 입력하는 부분을 구성하였다. 이번 1.2단계에서는 option 태그를 활용하여 값을 목록에서 선택하여 입력할 수 있도록 구성하고..

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다. 크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다. 본 포스팅은 (1)화면을 구성하는 스텝의 첫번째 1.1단계에 해당된다. 1. 화면 구성 > 1.1 : Input Component 생성하기 (textarea, input) > 1.2 : Option Component 생성하기 (option) > 1.3 : CSS 적용하기 2. 화면 구동 > 2.1 : DOM 조작하기 > 2.2 : 배열 사용하기 이번 1.1단계에서는 React 프로젝트를 생성하여, 텍스트 값을 입력하는 부분을 구성하고자 한다. 텍스트 값을 입력하는 부분은 textarea 태그와 input 태그를 활용한다. React Componen..

React Component란? React Component란 리액트로 만들어진 앱을 이루는 최소한의 단위로 화면에 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있다. Create React App을 통해 생성된 리액트 프로젝트에서 JSX를 활용하여 Component를 추가할 수 있다. JSX란? JSX란 JavaScript XML의 줄임말로 Javascript에 XML을 추가하여 확장한 문법이다. Java Script와 HTML을 하나의 파일로 작성할 수 있기 때문에 비교적 편리하다. 자세한 내용은 React 페이지 -> https://ko.reactjs.org/docs/introducing-jsx.html JSX을 활용하여 Component의 CSS 적용하기 (Header, Footer)..

React Component란? React Component란 리액트로 만들어진 앱을 이루는 최소한의 단위로 화면에 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있다. Create React App을 통해 생성된 리액트 프로젝트에서 JSX를 활용하여 Component를 추가할 수 있다. JSX란? JSX란 JavaScript XML의 줄임말로 Javascript에 XML을 추가하여 확장한 문법이다. Java Script와 HTML을 하나의 파일로 작성할 수 있기 때문에 비교적 편리하다. 자세한 내용은 React 페이지 -> https://ko.reactjs.org/docs/introducing-jsx.html JSX를 활용하여 Component 생성하기 (Header, Footer) 1. R..

VS Code로 Create React App 사용하기 React 프로젝트를 진행하기 위해서는 Webpack, Babel 등의 라이브러리 설정이 필요하다. 해당 라이브러리는 기능적인 면에서도 매우 넓고 다양하여 모두 다 학습하고 설정하는 데에는 프로젝트 시작 전에 너무 많은 시간이 소요될 것이다. 이렇게 모든 걸 학습하고 적용하기엔 물리적인 시간이 부족하기 마련이다. 이를 해결하기 위해 React를 개발한 페이스북에서는 Create React App이라는 CLI 도구를 제공하고 있다. Create React App을 활용하면, 기초 세팅이 완료되어 있어 바로 React 프로젝트를 진행할 수 있다. Create React App은 Boiler Plate 라는 단어로 설명할 수도 있다. Boiler Plat..