Skeleton의 세상

리액트의 생명주기 중 constructor 메서드가 있습니다. 이 메서드는 맨 처음 실행되는 메서드 입니다. 생성자라고도 부를 수 있습니다. 사용방법은 다음과 같습니다. class Test extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } state에 값을 지정해서 사용합니다. constructor(props) { super(props); this.date = new Date(); } 만약 이렇게 쓴다면 이또한 동작은 합니다만, 데..

컴포넌트 간에 데이터를 전달하는 방법에 대하여 알아보도록 합시다! 먼저 컴포넌트를 하나 만들어 줍니다! 컴포넌트는 아무렇게나 만들면 됩니다 class TextCard extends React.Component { render() { return ( {this.props.value} ); } } 컴포넌트를 그려주기위해 불러온 다음 아래와 같이 값을 넘겨주면 됩니다. class Main extends React.Component { renderText(i) { return ; } render() { return ( {this.renderText(0)} {this.renderText(1)} {this.renderText(2)} {this.renderText(3)} {this.renderText(4)} {thi..

오늘의 리뷰는 자동차 충전 거치대 입니다. 중국산이지만 요즘 중국제품이 더 좋아요! 퀄리티가 정말 좋습니다 3만원 선으로 구매가 가능해요! 이전에 샀던 거치대가 망가져서 새로 구입했어요 사용하는것은 정말 어렵지 않아요. 충전 또한 무선충전이 됩니다. 폰에는 선을 연결하지 않아도 되지만 기기에는 선을 연결해야 합니다. 아래에 영상입니다 잡아주는 부분이 자동으로 움직여요! 대박 신기 아래에 링크가 있습니다 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음

펌자료: https://wonderbout.tistory.com/60 웹서핑을 하다 보면 글을 복사 하거나 마우스 오른쪽 메뉴를 이용해 이미지를 저장하는 경우가 종종 있습니다. 그런데 불법으로 게시물을 복사해 가져가서 본인 블로그에 붙여넣기 하는 불법 업로드 블로거들이 많이 있습니다. 이 때문에 마우스 드래그가 안 되게 해 복사를 못 하도록 하거나 마우스 우클릭 금지를 해 마우스 오른쪽 메뉴를 사용할 수 없게 하는 경우를 보게 됩니다. 아직 까지는 완벽한 마우스 우클릭 금지나 복사 금지 방법은 없습니다. 블로그에 글을 쓰는 사람으로서는 아쉬운 부분이지만 이 문제는 논외로 하고 오늘은 마우스 우클릭 해제와 복사 금지, 드래그 금지 해제 방법을 알아보도록 하겠습니다. 브라우저 중 가장 많이 사용되는 크롬 또..

리액트의 컴포넌트들은 라이프사이클 즉 생명주기를 가지고 있습니다. 생명주기(라이프사이클)이란 컴포넌트가 생성되고 쓰이고 삭제 될때까지의 일련의 과정을 얘기하는 단어입니다. 각 메서드들을 호출하여 사용할 수 있는데 각 항목들을 한번 알아봅시다 1. render() 함수 컴포넌트의 가장 기본이자 가장 중요한 함수 입니다. 컴포넌트의 모양을 의미합니다. 2. constructor 메서드 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행되는 메서드 입니다. 3. getDerivedStateFromProps 메서드 v16.3이후에 새로 만들어진 라이프사이클 메서드이며 props로 받아온 값을 state에 동기화 시키는 용도로 사용되며 컴포넌트를 마운트하거나 props를 변경할때 사용됩니다. 4. component..

리액트의 JSX를 사용함에 있어 몇가지의 장점이 있습니다. 그 장점에 대하여 소개를 해볼까 합니다. 1. 보기 쉽고 익숙함 JSX는 자바스크립트의 확장 문법으로써 XML과 닮아 있습니다. HTML과 같이 작성이 가능하다는 점이 크게 작용합니다. 2. 오류 검사가 편함 JSX에 오류가 있다면 바벨이 코드를 변환하는 과정에서 자동으로 이를 감지해내 오류를 내줍니다. 찾아서 수정하기가 편합니다 3. 높은 활용도 JSX는 흔히 HTML에서 사용되는 div span a 등 태그들을 사용할 수 있고 컴포넌트도 JSX안에서 작성이 가능합니다.

리액트를 배우기전, 리액트를 설치하고 프로젝트를 생성해 봅시다. 과정은 다음과 같습니다 Node.js / npm 설치 => 코드 에디터(VisualStudio Code)설치하기 => git 설치하기 => 프로젝트 생성하기 1. 리액트는 Node.js를 기반으로 하고있기 때문에 Node.js와 npm을 반드시 설치해 주어야 합니다. Node.js 다운로드 에서 다운로드를 진행하고 설치해 줍니다. 2. 코드 에디터를 설치해줍니다. 코드를 편하고 빠르게 작성 수정 하기위해서 꼭필요한 에디터 입니다. VisualStudio Code 설치 위의 링크를 통하여 VisualStudio Code를 설치해 줍니다 VisualStudio Code를 설치하고 나면 확장 프로그램을 설치해주어서 코드작성에 도움을 받을 수 있습..

웹의 문제점중 하나인 부분이 있는데요! 한번에 값들을 전부 받아서 돌리기때문에 상대적으로 느리게 표현됩니다. 하지만 앱에서는 조금 다르게 동작하여야합니다. 값들을 불러오면서 느려지거나 화면이 안보이는 문제가 있습니다. 그래서 리액트 네이티브에서는 FlatList를 사용하여 보여지는 부분만 불러오고 다른부분은 보여지지않게 함으로써 느려짐 현상을 없애줍니다. 이게 FlatList를 사용해야하는 이유라고 할 수 있습니다. 그럼 어떻게 사용되는지 간단히 한번 살펴볼까요? import React from 'react'; import styled from 'styled-components/native'; import { useNavigation } from '@react-navigation/native'; impo..

리액트 네이티브에는 PanResponder라는 클래스를 제공해 줍니다. 이 클래스를 통해서 드래그 할때의 제스쳐를 확인할 수 있습니다. 컴포넌트에서 PanResponder를 사용하기 위해서는 PanResponder객체를 생성하고 컴포넌트의 렌더 함수에 적어주어야 합니다. PanResponder는 반드시 콜백 함수가 필요한데, 간단히 살펴보겠습니다. UNSAFE_componentWillMount() { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder onMoveShouldSetPanResponder: this._handleMoveShouldSetPanRes..

많은 시간과 노력이 들어간 명장, 장인일때 숙련도가 하락한다는 문구를 보신적이 있으신가요? 지속적인 제작을 하지 않으면 숙련도가 계속해서 하락하여 강등을 당하게 되는데요 강등 당하지 않으려면 어떻게 해야할까요? 해결책은 간단합니다 명장, 장인을 찍을때 썻던 숙련도가 올라가는 아이템을 하나 만들어주면 됩니다. 그저 피로도만 소모되는 템은 만들어도 소용이 없으니 조심하세요! 장인은 24시간 이후 시간당 300씩 떨어지고 명장은 18시간 이후 시간당 400씩 떨어집니다 숙련도가 올라가는 아이템을 아무거나 하나를 골라 시간이 될때마다 만들어서 유지해주도록 합시다!