본문 바로가기

분류 전체보기

Angular/angularjs 2020. 5. 20. angular form (유효성 검증) Todo List 추가 {{todoForm}} 삭제 {{todo.createdAt | date}} {{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}} Completed Active All form에서 name으로 지칭한 todoForm을 {{todoForm}}을 통해 나타내게 되면 해당 과같은 정보들이 출력이된다. $name form에 등록한 이름 $dirty 필드를 수정했을때 true로 변한다 $prinsitne 사용자와 필드가 상호작용을 했는지 $valid 필드안의 내용들이 유효한지 $invalid 필드안에 내용들이 유효하지않은지 $submitted 필드내용을 submit했는지 //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function..
Angular/angularjs 2020. 5. 20. ng-repeat, ng-filter, ng-click ng-repeat은 배열데이터의 내용들을 for문과 유사하게 뿌려주는 내용이다 react에서는 map을 활용해서 뿌려주고 vue에서는 v-for을 활용해 뿌려주는데 vue의 v-for과 굉장히 유사하다 Todo {{todo.createdAt}} //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function () { // app이라는 변수에 todo라는 모듈이 담긴다 var app = angular.module("todo", []); //두번째 파라미터는 배열로준다 app.controller("TodoCtrl", [ "$scope", function ($scope) { // $scope.name = "Chris"; // $scope.data = "aa"; $scope.todos..
Angular/angularjs 2020. 5. 20. ng-app, controller ng-app 앵귤러를 사용하겠다는 의미 hello world {{name}} 위 방식처럼 사용하기보단 view부분과 data부분을 분리해서 사용한다 index.html {{todo}} script.js의 app을 기반으로 module을 선언한다 (ng-app에 script의 모듈이 들어간다) ng-controller를 통해 $scope를 지정하고 기본적인 데이터및 함수들을 정의할수 있다 script.js //모듈: 컨테이너 //모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다 (function () { // app이라는 변수에 todo라는 모듈이 담긴다 var app = angular.module("todo", []); //두번째 파라미터는 배열로준다 app.controller("TodoCtrl", [ ..
React/react 기초 공부하기 2020. 5. 18. react setState와 useState 비교하기 간단한 카운트 함수 먼저 class 기반으로 생성된 setState를 활용한 카운트 증가함수이다 import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } setCount = () => { this.setState({ count: this.state.count + 1 }); }; render() { const { count } = this.state; return ( {count} ); } } 다음은 함수형을 기반으로 생성된 useState를 활용한 카운트 증가함수이다 useState를 import 한후 const [값, 값을변경할수있는..
React/react 기초 공부하기 2020. 5. 18. react setState this.setState를 활용하여 state내 내용을 바꿔준다 vue와 다른점이 있다면 vue는 data() { return { heart: require("../../assets/heart.png"), fillHeart: require("../../assets/fillHeart.png"), recentDatas: [] }; }, 해당방식으로 선언하여 this.recenDatas = "넣을값" 방식으로 바로 값을 대입해주는 반면 react는 setState를 활용해서 값을 대입해주고 또한 두번째 인자로 콜백함수로 받아오는 다른점이 있었다. import React from "react"; class App extends React.Component { constructor(props) { super(pr..
React/react 기초 공부하기 2020. 5. 18. React LifeCycle 컴포넌트 생성 constructor (생성, setState 사용X), -> componentWillMount(렌더 되기전) -> render(그리는경우, setState 사용X) -> componentDidMount(렌더가 그려졌을때) 컴포넌트 제거 componentWillUnmount 실행 컴포넌트 props 변경 componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate 컴포넌트의 state 변경 shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate 1. constructor props를 ..
Node.js/node crawling 2020. 5. 16. puppeteer을 활용해서 스크린샷 찍기, 크롤링하기, pdf 생성하기 https://github.com/puppeteer/puppeteer puppeteer/puppeteer Headless Chrome Node.js API. Contribute to puppeteer/puppeteer development by creating an account on GitHub. github.com 폴더에 npm init을 통해 패키지를 생성해준다. 그후 npm i puppeteer 을 실행하면 다운이 완료된다 스크린샷 찍기 const puppeteer = require('puppeteer'); const main = async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); /..
Node.js/node 기초 2020. 5. 15. express 글로벌 변수및 404, 500 에러 핸들링 글로벌 변수를 활용하면 전역적으로 사용할수 있는 정보 (로그인유무)등을 활용하여 전역적으로 활용 할 수 있다. const express = require('express'); const nunjucks = require('nunjucks'); const logger = require('morgan'); // const bodyParser = require('body-parser'); const admin = require('./routes/admin'); const contacts = require('./routes/contacts'); const app = express(); const port = 3000; nunjucks.configure('template', { autoescape: true, e..

티스토리툴바