본문 바로가기
반응형

전체 글1136

리액트 웹앱개발 - react-grid-layout / 리액트 제이쿼리 적용 그리드 메모 다는거 성공했다! 아직,, 여기 글도 담아야하고 아이콘도 달 수 있으면 달아야 하지만,, 일단 여기까지 한거 정리 참고 https://www.npmjs.com/package/react-grid-layout 터미널에서 npm install react-grid-layout 설치하고, https://github.com/STRML/react-grid-layout/blob/master/test/examples/1-basic.jsx 여기 소스를 가져다가 App.js에 붙여넣었다. import React from "react"; export default if (process.env.STATIC_EXAMPLES === true) { import("../test-hook.jsx").then(fn => fn.. 2020. 12. 26.
리액트 공부 - launch chrome against localhost / 투두리스트 만들기 vs 코드 내에서 리액트 실행 오류 여기서 설정을 눌러 launch.json을 url 8080에서 3000으로 바꿔도 안됨.. * 한번 실행됐던 파일의 경우 폴더 불러오면 vs 코드 내 터미널에 폴더가 이미 거기로 들어가져있어서 yarn start 명령하면 실행되는데... 일단 투두리스트를 제대로 된 구조로 만들어보자 https://velopert.com/3480 컴포넌트 폴더에 제작 시작! const TodoListTemplate = ({form, children}) => { return( 오늘 할 일 {form} {children} ); }; 이걸로 틀 생성 * 특정 div에 다른 js파일의 형식 넣을 때? 1 임폴트 import Form from './components/Form'; 2 폼 넣기 -.. 2020. 12. 26.
리액트 공부 - js 스크롤바 css 설정 / component life cycle 흐름 / 투두 리스트 앱 기획 * 스크롤바 설정 스크롤 scroll scrollbar .con::-webkit-scrollbar { width: 8px; height: 8px; border-radius: 6px; background: rgba(255,255,255,0.4); } .con::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,0.3); border-radius: 6px; } component lifecycle method 흐름 https://sass-guidelin.es/ko/ Syntactically awesome style sheets의 약어 Sass 문법적으로 멋진 스타일 시트 * Todo 리스트 만들어보기 새프로젝트 create-react-app todo-list cd.. 2020. 12. 25.
리액트 공부 - 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.
728x90
반응형
LIST