Front-End13 (7-1) React - input태그 만들기 예제 국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다.작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다.. 소스코드는 깃허브 URL에 공개해 두었습니다. https://github.com/awse2050/ReactTodo 안녕하세요. 오늘은 리액트를 사용함에 있어서 todoList를 만드는 것이 첫 단계라고 생각합니다. 첫 단계에 들어가기에 앞서서 기존 HTML에서 사용되는 input 태그와 다르게 리액트에서 사용되는 input 태그는 좀 다르게 작동하기 때문에 todoList를 만들기 위해 꼭 알아야 하는 부분입니다.. 계획한 순서에 맞춰서 포스팅하겠습니다.!! 1. 먼저 src - Component 폴더에 새로운 폴더인 'Sample' 폴더를 만들겠습니다. 2. 이후 index... 2020. 7. 27. (6) React - 자동완성기능 툴 위처럼 리액트를 사용할때 처음에 타이핑하는 작업이 귀찮을 수 있는 분들을 위해서 수업시간에 얻어낸 확장팩이 있습니다. 좌측에 정사각형 버튼을 클릭해서 ES7 라고 쓰여있는 툴을 설치합니다. 클릭하시면 상세정보는 위와 같습니다. 설치를 하신 후에 "rafce"라고 쓰시면 미리보기식으로 자동완성되는 양식을 보실수가 있습니다. 엔터를 치시면 다음과 같이 자동으로 완성시켜서 빠르게 사용하실수 있습니다. 이외에 rfc , rafc , rfce 등등이 있으니 함수형 컴포넌트를 사용하실때는 rafce를 사용하시는 것을 추천드립니다! 2020. 7. 26. (5) React - Props 사용하기 단순히 국기 과정에서 수업받은 내용을 토대로 작성하였습니다. 태클은 언제나 환영합니다. 실력이 미숙한 관계로 사용하는 언어나 표현능력이 부족한 점 인지해주시길 바랍니다.. 이전 글과 이어서 진행됩니다. 1. 각 컴포넌트에는 props를 인자로 줄 수 있습니다. props를 인자로 주게 될 경우 이 컴포넌트에 적용되어있는 속성을 전부 알 수 있습니다. 현재 App.js에는 함수형 컴포넌트인 Hello에 어떠한 속성도 주지 않았습니다. 2. 현재 "props"라는 문자열을 붙여서 나타냈기 때문에 Object 타입으로 나타나고 있으며 console.log(props)로 타이핑했을 경우 undefined가 나타나는 것을 알 수 있을 것입니다. 3. 그럼 이제는 직접 속성을 부여해서 props를 인자로 받았을 경.. 2020. 7. 12. (4) React - CSS 적용시켜보기 단순히 국기 과정에서 수업받은 내용을 토대로 작성하였습니다. 태클은 언제나 환영합니다. 실력이 미숙한 관계로 사용하는 언어나 표현능력이 부족한 점 인지해주시길 바랍니다.. 이전 글과 이어서 진행됩니다. 1. css 스타일 넣어보기. 기존의 HTML에서 CSS 넣는 방식과 약간의 차이가 보이실겁니다. "backgroundColor"를 보시면 "-"가 빠져있는것을 볼 수 있는데 이것이 React에서 사용하는 JSX의 특징입니다. 그리고 style변수를 적용시키기 위해 "{style}" 이런식으로 태그를 완성시킵니다. 2. 결과 값으로 아래와 같이 CSS가 적용되어 나타나는 모습을 볼수가 있고. F12를 눌러보면 Style이 적용된 태그가 보입니다. 신기한 점은 배경색을 넣을때 쓰지 않은 backgroundC.. 2020. 7. 11. (3) React 구동시켜보기 (Hello, World) 단순히 국기 과정에서 수업받은 내용을 토대로 작성하였습니다. 태클은 언제나 환영합니다. 실력이 미숙한 관계로 사용하는 언어나 표현능력이 부족한 점 인지해주시길 바랍니다.. 이전 글과 이어서 진행됩니다. React는 웹페이지를 만드는 것이 아니다. 애플리케이션을 개발하는 기술임을 기억하자. 1. 우선 src이하에 폴더를 하나 만듭니다. 2. 저는 Component라는 이름의 폴더를 만들었습니다. 3. 그리고 Component이하의 파일로 "Hello.js"를 만들었습니다. vscode는 확장자명까지 입력해주어야 한다는 점 아실 거라 생각합니다. 4. 그리고 App.js에 가서 2-3번째 라인과 App Functiond에서 태그라인을 전부 제거합니다. (수업때는 지워서 사용했다는 점 참고해주세요,) 5. H.. 2020. 7. 11. (2) React의 설치방법 (사용준비) 단순히 국기 과정에서 수업받은 내용을 토대로 작성하였습니다. 태클은 언제나 환영합니다. 실력이 미숙한 관계로 사용하는 언어나 표현능력이 부족한 점 인지해주시길 바랍니다.. 1. CMD창을 켜서 원하는 위치에 폴더를 생성합니다. 아래의 "mkdir (원하는 폴더 이름)"처럼 생성을 합니다. 2. 이후 "npx create-react-app (앱 이름)" 명령어를 사용하여 리액트 설치의 준비를 합니다. 앱 이름은 원하는 이름을 넣으시면 되겠습니다. 특정한 이름은 안되는 경우가 있었으니 참고하시길 바랍니다.. 3. 위의 명령어를 타이핑 후 엔터를 누르면 다음과 같이 다운로드가 진행됩니다. 처음 하시는 경우에는 조금 오래걸릴수 있습니다. 이 명령어가 깃 레포지토리를 자동으로 초기화 해준다고 얼핏 들었습니다. 4.. 2020. 7. 11. 이전 1 2 3 다음
