React
-
ReactJS - #3 기초 및 실습 (2주차)React 2020. 12. 20. 17:58
ReactJS - #3 기초 및 실습 (2주차) scss 스타일 설정 .scss 로 확장자명을 변경해서 실행해보면 정상적으로 실행되지 않는다.. 그래서 scss 파일을 읽어 사용하기 위해서는 특정 모듈을 설치해주어야 한다. @zeit/next-css , @zeit/next-scss, node-scss를 만들고 모듈 세팅을 해주어야 한다. jaeho@jaehoiui-MacBookPro my-app % sudo npm install --save@zeit/next-sass node-sass jaeho@jaehoiui-MacBookPro my-app % sudo npm install --save @zeit/next-css [next.config.js] 파일 생성 후 그 안에 밑에 코드 그럼 package.jso..
-
ReactJS - #1 기초 및 실습 (2주차)React 2020. 12. 17. 18:23
#1 기초 및 실습 (2주차) nextjs.org/docs/basic-features/pages Basic Features: Pages | Next.js Next.js pages are React Components exported in a file in the pages directory. Learn how they work here. nextjs.org next.js는 기본적으로 page routing 방식을 밑에 형식과 같이 지원해준다. next.js에서 자체적으로 지원해주는 Link와 Router 기능 위 코드와 같이 import 를 한 후 요런 식으로 써주게 되면 'pages/class.js' 로 자동으로 routing된다 페이지 이동이 좀 자유로운 장점이 있다. 이런식으로도 쿼리스트링으로도 넘..
-
ReactJS - #5 기초 및 실습 (1주차)React 2020. 12. 17. 14:31
Class Component [Class.js] import React, { Component} from 'react' // state 기능 및 라이프 사이클 기능을 사용 // render 함수가 반드시 필요(class형 Component에서) class ClassComponent extends Component{ // 생성자 함수 // 생성자가 이유는 props나 state같은 상태값들을 초기화하기 위해서 constructor(props){ // constructor를 사용하면 항상 병용, this를 초기화, props를 넣어줘야 this.props 사용가능 // suepr(props)를 통해서 this를 초기화 해주지 않으면 다른 component에서 사용했던 this와 충돌이 발생할 가능성이 있다...
-
ReactJS - #4 기초 및 실습React 2020. 12. 16. 21:01
#4 기초 및 실습 생성된 my-app 폴더 밑에 여러개의 파일이 생기는데 [package.json] name, version, private 같은 자신이 만든 App에 대한 설명들이 있고 script 부분이 우리가 쓰는 명령어라고 생각하면 된다. 보통 우리가 next를 만드는 과정은 bulid 명령어를 통해 bulid하고 start 명령어를 통해 실행한다. 이 둘을 통합하는 느낌이 dev 명령어 이다. 나중에 deploy(배포) 할때는 bulid 명령어와 start명령어를 따로 써야 되겠지만 개발환경에서는 dev 명령어를 사용해도 무관한다. aeho@jaehoiui-MacBookPro react % cd my-app jaeho@jaehoiui-MacBookPro my-app % npm run dev 이..
-
ReactJS - #3 기초 및 실습React 2020. 12. 16. 20:47
#3 기초 및 실습 node.js 설치 node.js 설치 후 terminal에서 node -v, npm -v 로 잘 설치 되었으면 위의 화면과 같이 설치된 버전이 출력됨 npm은 node.js를 설치하면 자동으로 설치됨 React를 빌드하는 방법은 순수 webpack이나 babel 를 설정해서 직접 빌드하는 방법, create-react-app을 통해 빌드하는 방법, next.js를 통해 빌드하는 방법이 있는데 여기서는 next.js를 이용해서 빌드 페이지 명명으로 라우팅이 쉽게 가능하고 seo라는게 원활하게 가능하고, SSR이 보다 쉽게 지원해주기 때문에 여기서는 next.js를 사용 next js검색 후 여기서 관련된 document들을 확인할 수 있는데 우리는 npm으로 설치할거니까 jaeho@j..
-
ReactJS - #2 기초 및 실습React 2020. 12. 16. 17:28
#2 기초 및 실습 react가 재사용성도 좋고 퍼포먼스도 좋지만 개발자끼리 정의된 표준이 없기 때문에 여러 개발자들마다 좀 많이 다를 수 있다. React JS의 등장 - 웹 앱의 중요도가 높아지면서 Single Page Application이 등장 - 구글에 의해 Angular.js 프레임워크 등장 -> 데이터 흐름 파악이 쉽지 않음 - 기존 문제 해결을 위해 페이스북에 의해 React.js 프레임워크 등장 - 웹 프론트엔드 개발을 위한 효율적인 자바스크립트 프레임워크 - 가상 DOM(Virtual DOM) 을 통한 빠르고 효율적인 렌더링 - 재사용이 가능한 컴포넌트 구조 - 일방향적인 데이터 흐름 구조 (state와 props) * 가장 상위에 있는 데이터만 바꿔도 하위의 모든 데이터에 영향이 감 ..
-
ReactJS - #1 기초 및 실습React 2020. 12. 16. 14:04
#1 기초 및 실습 리액트를 왜쓰나.. ? jsp 쓰고 jquery로 해도 상관없는데 그러면 퍼포먼스가 잘 안나와서 웹이 버벅거릴 수 있다 근데 이러면 사용자들이 어? 이 사이트 느리네? 안써야지 .. 빨리빨리 민족.. 퍼포먼스가 좋다 리액트는 하나의 libraray 리엑트가 프레임워크처럼 보이는 이유는 여러개의 보조 모듈들이 생겨서 그렇게 보임 javascript란? - 웹 페이지를 동적으로 제어하기 위해 고안된 스크립트 언어 (독립된 시스템에서 사용자가 직접 동작 시키는 프로그래밍 언어) - 웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어 - 대부분의 웹 브라우저가 javascript 엔진(인터프리터) - 크로스플랫폼인 웹의 중요성의 확대와 함께 중요 - ECMAScript 를 준수하는 범용..