전체 글
-
React JS_StateWEB/ReactJS 2020. 1. 20. 19:06
#3.0 ~ #3.3 아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy 바닐라 JS로 크롬 앱 만들기 % Complete academy.nomadcoders.co 1. Class Component State를 다루기 위해서는 컴포넌트를 class component로 선언해야 한다. class component의 형식은 아래와 같으며, React.Component를 extends한다. React.Component안에 state(data)를 넣을 수 있고 변경이 가능하기 때문이다. 즉, State 데이터를 다루기 위해서는 react component를 확장한 class..
-
React JS _ JSX & PropsWEB/ReactJS 2020. 1. 16. 03:12
#2.0 ~ #2.4 아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy 바닐라 JS로 크롬 앱 만들기 % Complete academy.nomadcoders.co 1. Component component는 HTML을 반환하는 함수이다. 아래 코드에서이 component의 형태이며, 이것이 component를 사용하는 방법이다. 리액트는 component와 함께 동작하며 모든 것은 component로 이루어져 있으므로 component를 빼고 리액트를 설명할 수는 없다. 아래 코드는 index.html 파일의 root element에 App component를 넣겠다..
-
React JS_IntroductionWEB/ReactJS 2020. 1. 15. 03:54
#0.0 ~ #2.0 아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy 바닐라 JS로 크롬 앱 만들기 % Complete academy.nomadcoders.co 0. 사전 작업 node.js/ npm/ npx/ git 을 다운받아야 한다. cmd 창에서 node -v/ npm -v/ npx -v/ git --version 각 명령어로 설치 여부를 확인하고, 없으면 다운받아야 한다. npx 다운로드 방법: npm install npx -g react-create-app 이라는 것을 이용해 쉽게 리액트를 사용할 수 있다. 리액트 어플리케이션은 다음 명령어로 생성할 수..
-
Pre. Framework vs LibraryWEB/ReactJS 2020. 1. 11. 16:31
ReactJS는 대표적인 프론트엔드 라이브러리이다. 본격적으로 들어가기 앞서, 프레임워크와 라이브러리의 정의와 이 둘의 차이점을 알아보고자 한다. 1. Framework framework를 구글에 검색하면 번역의 결과가 나온다. '뼈대, 틀, 구조' 정도로 해석할 수 있다. 개발과정에서 쓰이는 프레임워크도 이 단어의 단순한 해석과 다르지 않다. 프레임워크는 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적이고 기능적인 어플리케이션을 만들수 있도록 하는 소프트웨어 환경이다. 프레임워크의 예로 angular, vue.js, backbone 등이 있다. 2. Library library는 모두가 알다시피 '도서관'이라는 뜻을 가진다. 도서관에서 필요한 책을 대여하는 것처럼 응용 프로그램을 개발할 때 필요한 ..
-
JavaScript_day3WEB/JavaScript 2020. 1. 11. 14:15
#3.8 ~ #3.11 아래 강의 중 '바닐라 JS로 크롬 앱 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy [멤버십] 초보를 위한 React JS [중급] React, React Router, Styled Components, Typescript, Hooks % Complete academy.nomadcoders.co 1. NaN (Not a Number) 5개의 배경사진을 1~5의 숫자로 저장한 뒤 random 함수를 통해 사진을 불러오는 과정에서 파일을 찾을 수 없다는 오류가 났다. 그리고 그 오류에는 NaN이라는 메세지가 있었다. 찾아보니 숫자가 아니라는 뜻의 오류 메세지였다. 콘솔 창을 통해 디..