초보개발자 초보개발자

전체 글

• react - JSX란 무엇일까??

  React 2020. 11. 26. 14:30

  const element = Hello, world!; 이 요상한 문법을 뭘까? 이건 문자열도 아니고 HTML도 아니다.. JSX라고 불리는 javascript를 확장한 문법!! UI가 어떻게 생기는지를 설명하기위해 react와 함께 쓰이길 권장하는 문법이다. JSX는 react element를 생성하는데! react element란? 이러한 모양의 JSX는 const element = ( Hello, world! ); 이러한 구조의 react element를 생성한다! // 주의: 다음 구조는 단순화되었습니다 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; 자 그럼 다시 돌아와서! JS..

  Read More
• react - 컴포넌트 생명주기 메소드 rendor()

  React 2020. 11. 26. 13:33

  rendor() rendor() 메소드는 클래스 컴포넌트에서 반드시 구현되야 하는 유일한 메소드! rendor() 메소드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것중 하나를 반환해야 한다!! 1. React element - 보통 JSX를 사용하여 생성된다!

  Read More
• react - [컴포넌트 생명주기 (component lifecycle)]

  React 2020. 11. 26. 13:17

  ✅ 컴포넌트 생명주기란? 1. 마운트(Mount) - 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될때 순서대로 호출된다!!! * 자주 사용되는 메서들은 파란색으로 표시함 1) constructor() 2) static getDerivedStateFromProps() 3) render() 4) componentDidMount() 2. 업데이트(Update) - props 또는 stater가 변경되면 갱신(update)이 발생!! 아래 메소드들이 순서대로 호출된다! 1) static getDerivendStateFromProps() 2) shouldComponentUpdate() 3) render() 4) getSnapshotBeforeUpdate() 5) componentDidUpdate() 3. 마운..

  Read More
• react - [기본개념]

  React 2020. 11. 26. 11:08

  A Simple Component class HelloMessage extends React.Component { render() { return ( Hello {this.props.name} ); } } ReactDOM.render( , document.getElementById('hello-example') ); - react는 jsx이라는 문법을 사용할 수 있는데 jsx를 사용하는것은 선택사항이며 반드시 필요하진 않다 - HelloMessage 클래스는 this.prop 형태로 input data를 받을 수 있는데 위의 코드에서 input data는 ReactDOM.render안에 있는 이다! HelloMessage는 Class HelloMessage를 call 하는 부분이고 name = "Tayl..

  Read More
• react - [tutorial]

  React 2020. 11. 25. 23:21

  function Square(props) { return ( {props.value} ); } class Board extends React.Component { renderSquare(i) { return ( this.props.onClick(i)} /> ); } render() { return ( {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)} {this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} ); } } class Game exte..

  Read More
• Docker 실습 - 가장 쉽게 배우는 도커(유튜브) 예제

  Docker 2020. 11. 24. 13:18

  www.youtube.com/watch?v=hWPv9LMlme8 * 참고 사이트 사전 준비 1. docker 설치 2. git 설치 3. vsCode 설치 1. 실습 폴더 생성 2. vsCode로 실습 폴더를 열고 terminal로 git clone 수행. git clone https://gitlab.com/yalco/practice-docker.git 위의 사진과 같이 정상적으로 clone 됨을 확인. 💻 이 프로젝트는 node.js와 http-server를 이용하여 front - back - db로 연결하여 웹 브라우저에 화면을 띄워 구동하는 구조 필자의 컴퓨터에 node.js가 설치되어 있지 않다고 가정하고 docker를 이용하여 사용자가 구현했던 개발환경과 동일한 환경에서 이 프로젝트를 수행해보기..

  Read More
• 플러터 튜토리얼 #1 - [플러터 설치]

  Flutter 2020. 11. 23. 21:06

  1. 안드로이드 스튜디오 다운로드 ㅇㅇㅇㅇ ㅇㅇ ㅇㅇ ㅇㅇ developer.android.com/studio

  Read More
• 이미지 reszie하기

  교육 2020. 11. 14. 18:43

  // 이미지 resize 하기 function ResizeImage() { var filesToUpload = document.getElementById('prdtImageFile05').files; var file = filesToUpload[0]; // 문서내에 img 객체를 생성합니다 var img = document.createElement("img"); // 파일을 읽을 수 있는 File Reader 를 생성합니다 var reader = new FileReader(); // 파일이 읽혀지면 아래 함수가 실행됩니다 reader.onload = function(e) { img.src = e.target.result; // HTML5 canvas 객체를 생성합니다 var canvas = documen..

  Read More