본문 바로가기
반응형

to be 개발자54

리액트 공부 - LifeCycleSample.js / handleRandomizeColor / 렌더링 사이클 확인 예제 (리액트를 다루는 기술 책 참고) LifeCycleSample.js import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, } myRef = null; constructor(props) { super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState) { if(nextProps.color !== prevState.color){ return { color: nextProps.color }; } return null; } componentDidMount(){ console.lo.. 2020. 12. 25.
리액트 공부 - 더블 클릭시 삭제 handleRemove / 라이프사이클 메소드 * 더블클릭시 삭제 handleRemove = (index) => { const { names } = this.state; //편의상 name의 레퍼런스를 미리 만든다 this.setState({ names: [ ...names.slice(0,index), ...names.slice(index + 1, names.length) ] }); } render() { const nameList = this.state.names.map( (name, index) => ( this.handleRemove(index)}>{name}) ); * 라이프사이클 메소드 DOM 생성 - 웹브라우저에: 마운트 나타남 이 과정에 사용되는 메소드: 컴포넌트 만들기 - constructor - getDerivedStateFromPr.. 2020. 12. 25.
리액트 공부 - map / input value 추가해서 아래 나타내기 자바스크립트 배열 map() 함수 arr.map(callback, [thisArg]) callback 새로운 배열 요소 생성 currentValue 현재 처리 요소 index 현재처리요소 index 값 array 현재처리 원본 배열 thisArg(선택항목) 콜백 함수 내부 this 레퍼런스 var numbers = [1,2,3,4,5]; var processed = numbers.map(function(num){ return num * num; }); console.log(processed); (5) [1, 4, 9, 16, 25] 콘솔에서 확인 가능 (결론 보기전까지는 shift + 엔터 / 결론 보려면 엔터) render() { const names = ['눈사람', '얼음', '눈', '바람']; .. 2020. 12. 25.
리액트 공부 - 화살표함수 / 리액트이벤트 (종류) / onChange / onClick / state 예외 / ref * 화살표 함수 setTimeout(function(){ console.log(“1”); }, 1000); setTimeout(() => { console.log(“1”) }), 1000); 화살표 함수는 기존 function과는 용도가 다르다 서로 가리키는 this 값도 다르다 일반 함수: 자신이 종속된 객체를 this로 가리킴 화살표 함수: 자신이 종속된 인스턴스를 this로 가리킴 function BlackDog() { this.name = ‘흰둥이’; return { name: ‘검둥이’, bark: function(){ // 우리거 console.log(this.name + ‘: 멍멍!’); } } } const blackDog = new BlackDog(); blackDog.bark(); //.. 2020. 12. 24.
리액트 공부 - props / state / onClick * props properties 줄임말. 컴포넌트 속성 설정 시 사용 용어. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트 (MyCoponent의 부모 컴포넌트는 App 컴포넌트)에서만 설정 가능 App.js MyComponent.js 안녕하세요. 제 이름은 {this.props.name} 입니다. 결과 안녕하세요. 제 이름은 React 입니다. * 혹은 이렇게 해도 이름에 값을 넣어줄 수 있고 (기본 이름) class MyComponent extends Component { render() { return ( 안녕하세요. 제 이름은 {this.props.name} 입니다. ); } } MyComponent.defaultProps = { name: '기본 이름' } * 이렇게 해도 이름.. 2020. 12. 24.
리액트 공부 - 조건부 연산자 / 조건부 렌더링 / DOM 스타일링 / 모듈 import * 조건부 연산자 const condition = true; return( { condition ? '참' : '거짓' } * 조건부 렌더링 const condition = true; return( { condition && ' 보여주세요 ' } ); 이러면 false 일때는 값이 아예 안뜨고 참일 때만 ‘ 보여주세요 ’가 뜸 * DOM 요소 스타일링 const style = { backgroundColor: 'gray', border: '1px solid black', height: Math.round(Math.random() * 300) + 50, width: Math.round(Math.random() * 300) + 50, WebkitTransition: 'all', MozTransition: '.. 2020. 12. 24.
리액트 공부 - 개념/렌더링/DOM/JSX/var let 차이 함수형으로 할때 주의할 것 * React.FC = 컴포넌트 * useEffect-상태를 업데이트 할 때 무한 루프 방지 일단... 책에 나와있는대로 클래스형으로 해보았다… 개념을 정리해보자.. * 리액트 자바스크립트만으로 규모가 큰 애플리케이션을 만들 수 있는 시대 수많은 프레임워크가 조금씩 다른 관점에서 순수 자바스크립트로만 애플리케이션 관리할 수 있도록 노력해옴 (AngularJS, Backbone.js, Vue.js…: 여러 아키텍처로 애플리케이션 구조화) 이들의 공통점: Model과 View가 있다 Model: 데이터 관리 / View: 유저에게 보이는 부분 프로그램이 유저에게 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회, 수정하고 젼경된 사항을 뷰에 반영하는 식 그런데 뷰의 일부만 업데이트.. 2020. 12. 23.
윈도우 그램 리액트 설치 총정리 리액트 Node js 설치 https://nodejs.org/ko/ Yarn 설치 https://classic.yarnpkg.com/en/docs/install#windows-stable Vs 코드 확장 프로그램 설치 ESLint Reactjs code snippets 이거 두개는 필수 Relative Path Guides React-beautify 이거 세개는 선택 (마지막거는 검색 안돼서 안깔았음) 깃 설치 https://git-scm.com/download 설치 프로그램 눌러서 설치하면서 중간에 bash 에뮬레이터 함께 설치 이제 크롬프트에서 명령어 실행 Yarn global add create-react-app Create-react-app react1010 (Create-react-app rea.. 2020. 12. 23.
PostgreSQL 공부중 - 기초 시퀀스 생성 / 서브쿼리 붙이는 법 / 마이바티스 설정 show search_path; 해서 자신이 속한 search_path가 아니면 alter 문으로 수정 alter user postgres set search_path='public'; 사용자 postgres의 서치패스 설정을 public으로 한다 (기본이 public 근데 내가 바꾸는 바람에 안됐던건데 이게 껏다 켜야 바뀐게 뜨기 때문에 이걸 몰라서 계속 바꾸고 껏다켜서 다시 바꾸고 해보고 안되고 이런 엇갈림을 계속 겪은 것) 이후 select 문 으로 해당 서치패스 속 테이블 열면 열린다 select * from study10071600; insert into study10071600 values (nextval('st_seq'),'보라',10,now()), (nextval('st_seq'),'덕선'.. 2020. 12. 23.
728x90
반응형
LIST

티스토리툴바