본문 바로가기

분류 전체보기346

Git(1) 개발환경 설치 - Git(깃) 개발환경을 설치해보자 - Git 설치 - SourceTree 설치 (다음포스팅) 1. Git 웹사이트에서 다운받아 설치 (git-scm.com/downloads) 2. Git 사용자 등록 Git을 설치하고 나면 Git의 사용 환경을 적절하게 설정해 주어야 한다. 한 번만 설정하면 된다. 설정한 내용은 Git을 업그레이드해도 유지된다. 언제든지 다시 바꿀 수 있는 명령어가 있다. 1. 설치 후 사용자 등록하기 git config --global user.name "name" git config --global user.email "gittt@gmail.com" git config --global user.name "name" git config --global user.email "gittt@gmail.c.. 2021. 1. 13.
React(19) Delete 구현 대망의 React 마지막 포스팅!!! (동영상강의 : 생활코딩 opentutorials.org/module/4058) 최종목표 delete의 구현은 CRUD중 가장 쉽다. CRU했던 부분에 숫가락 얹기(?) 하지만 데이터가 삭제되는 것인만큼 삭제전 사용자의 confirm을 꼭 받는게 아주 중요하다. Control.js 사용자가 delete를 누르면 태그 안에 onChangeMode()라는 Props를 호출함. 이때 인자로 delete를 받음. App.js로 넘어가자 **전체코드보기(복사용 첨부 / 더보기클릭) 더보기 import React, { Component } from 'react'; class Control extends Component { render() { return( create upda.. 2021. 1. 12.
React(18) Update 구현 Update는 Create + Read 기능이 더해져있다. 최종 목표 업데이트 기능 구현하기 - Create의 폼에 입력받은 기존 컨텐츠의 내용을 수정한다. App.js 1. 렌더함수 return에 자리를 만든다. 1-1. 추후에 이 자리를 대신하여 {this.getContent()} 함수가 들어간다. 만들고 보니 너무 복잡하다. 흠... 함수를 좀 나누어 정리해야지 2. getContent()라는 함수를 만들어 깔끔하게 CRUD자리를 치워놓자. 3. render()함수의 내용 (if문이 있는 로직부분) 그대로 가져오기 + 리턴은 _article 값 넣어주기 (1-1로 돌아가시오) 4. else if문 (모드===update) 일 때 ver. 추가하기 - _content 변수를 getReadContent.. 2021. 1. 12.
React(17) Immutable 개념 리액트 컴포넌트의 state 를 변경시, 무조건, setState 를 통해서 업데이트 해주어야 하며, 업데이트 과정에서 기존 객체의 값을 직접적으로 수정하면 절대!! 안됩니다. 언제나 기존객체는 불변함을 유지시켜주어야 합니다. 자칫 잘못했다 나중에 최적화를 제대로 못하게 되는 일이 발생하죠. "데이터를 이리저리 주고받는 과정에서 데이터는 변하면 안된다. 예를 들어 데이터를 추가할 때 push()는 데이터뭉텅이(배열) 원본으로, concat()은 복사본으로 작업한다. → 그래서 원본이라는겨 복사본이라는겨? 굉장히 헷갈리며 일관성이 떨어짐 이때 Immutable 라이브러리를 사용하면 원본은 킵하면서 복제본의 결과만 일관성있게 바꿔준다." Immutable 을 사용 할 때는 다음 규칙들을 기억하세요: 객체는 .. 2021. 1. 8.
React(16) Create 구현 : shouldComponentUpdate shouldComponentUpdate 란? 얘는 state가 변경되거나 부모 컴포넌트로부터 새로운props를 전달받을 때 실행되는 메소드다. React는 이 메소드(shouldComponentUpdate)의 반환 값에 따라 re-render를 할지에 대한 여부를 결정 shouldComponentUpdate 메소드는 true를 반환 (But React 개발자는 re-render를 원치않으면, return false로 놓고 할 수 있다.) 요새 고민은... 부모가 호출되면 → 하위 자식들 등.. 렌더함수가 줄줄이 호출된다. 그리고 그 자식 중 하나인 은 create에 입력하면 그 글을 글 목록에 추가시켜주는 역할을 한다. BUT 불합리하다. create기능 안써도 같이 딱히 필요없는 자식도 매번 불필요하게.. 2021. 1. 8.
React(15) Create 구현 : onSubmit이벤트 & contents변경 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. create에 내용을 입력 후 submit 버튼을 누르면 해당링크가 생성되고 링크를 누르면 내용이 출력됨 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : onSubmit 이벤트 → 컨텐츠 리스트의 맨 끝에 서밋한 데이터를 추가하기 App.js - this.max_con.. 2021. 1. 7.
React(14) Create 구현 : 모드 전환 & form 생성 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : 모드 전환 & form 생성 create 버튼을 눌렀을 때 이 생성되며 내용이 출력된다. App.js - render( )안에 if문에 따라 각 모드에서 실행될 _article = 태그 내용을 각각 넣어주기 - retur.. 2021. 1. 6.
React(13) Create구현 : 모드 변경 "상위 컴포넌트가 → 하위로 값을 전달할때 props로 전달하고 하위가 → 상위로 명령을 전달할때는 event로 전달한다." 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 1. create구현 : 클릭시 mode라는 state값이 달라짐 App.js 1. 이라는 사용자 정의 태그를 만든다. 2.. 2021. 1. 6.
React(12) 컴포넌트 이벤트 만들기 오늘할일 - WEB을 클릭하면 welcome모드가 되며 내용이 나오고 - HTML, CSS, JavaScript를 클릭하면 read모드가 되어 세부내용이 나오는 페이지 만들기 App.js - 사용자가 WEB 링크를 클릭했을 때 이벤트가 실행되도록 하고 싶다면, - onChangePage라는 props를 만들어준다. 그 안에 핸들러메소드 넣고 + 바인드함수를 사용해 this를 명시해준다 - 핸들러 메소드 안에는 this.setState({mode:'welcome'});을적어주어서 state, 즉 모드를 바꾼다. Subject.js - 안에 onClick 이벤트를 심어준다. - onClick이벤트 안에 e.preventDefault를 사용해 이벤트 동작을 멈춘다. - 이어서 this.props.onChang.. 2021. 1. 5.
반응형

티스토리툴바