본문 바로가기

Progamming93

Learn Git Branching! - 깃 게임 해당 글은 2019.11.15 에 작성되었으며 깃 브랜칭 게임의 처음부터 작성한 글이 아니기 때문에 누락된 부분이 있습니다. 추후 추가할 예정입니다. HEAD HEAD 는 현재 체크아웃된 커밋을 가르킨다. 다시 말하자면 현재 작업중인 커밋 이다. HEAD 는 항상 작업트리의 가장 최큰 커밋을 가르킨다. 작업트리에 변화를 주는 git 명령어들은 대부분 HEAD 를 변경하는 것으로 시작한다. 일반적으로 HEAD 는 브랜치의 이름을 가르키고 있다. commit 을 하게 되면, 해당 브랜치의 상태가 바뀌고, 이 변경은 HEAD 를 통해서 확인이 가능하다. HEAD 를 분리한다는 것은 git checkout commit 을 통해 HEAD 를 브랜치 대신 commit 에 붙이는 것을 의미한다. 각 commit 은 .. 2019. 12. 10.
[벨로퍼트] 리액트의 Hooks 완벽 정복하기 useState 가장 기본적인 Hook 으로서, 함수형 컴포넌트 에서도 가변적인 상태를 지닐 수 있게 해준다. const [value, setValue] = useState(0); useState() 함수의 파라미터에 들어가는 값은, 초기값 을 의미하는 것 사용하고자 하는 state 의 기본값을 0 으로 설정 useState() 는 배열을 반환 첫 번째 원소, value 는 상태 값 두 번째 원소, setValue 는 상태를 설정하는 함수 setValue 함수에 파라미터를 넣어서 호출 -> 전달받은 파라미터로 value 의 값이 바뀜 useState 여러 번 사용하기 useState() 는 하나의 상태 값만 관리 가능 만약, 컴포넌트에서 관리해야하는 상태 값이 여러개라면 useState() 를 여러번 사.. 2019. 10. 29.
[벨로퍼트] 흔하디 흔한 투두리스트 첫번째 컴포넌트, TodoTemplate 이 컴포넌트의 역할은 하나의 '틀'인 템플릿의 역할을 한다. //src/components/TodoListTemplate.js import React from 'react'; import './TodoListTemplate.css'; const TodoListTemplate = ({form, children}) => { return ( 오늘 할 일 {form} { children } ); }; export default TodoListTemplate; 이 컴포넌트는 함수형 컴포넌트이다. 파라미터로 받게 되는 것은 props인데, 이것을 비구조화 할당하여 원래는 " (props) => { ... } " 해야하는 것을, " ({form, children}) => { .. 2019. 7. 14.
[벨로퍼트] 앞으로의 공부 방향 요약 0. 리액트는 따지고보면 정말 간단한 라이브러리다. 1. 재사용 가능한 컴포넌트를 만든다. 2. props는 부모 컴포넌트에게서 전달받는 값이다. 3. state는 자기 자신 컴포넌트가 지니고 있는 데이터다. 4. props나 state가 바뀌면 컴포넌트는 리렌더링되고, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 같이 리렌더링된다. 5. LifeCycle API를 통해서 컴포넌트 마운트, 업데이트, 언마운트 전후로 처리할 로직을 설정하거나 리렌더링을 막을 수 있다. 스타일링 리액트 컴포넌트를 스타일링하는 방법은 여러가지이다. 일단, 가장 기본적인 방법으로는 일반 .css 파일을 만들어서 사용하는 CSS Module 이 있다. (참고 : React 기초 입문 프로젝트 - Todo List 만들기) .. 2019. 7. 12.
[벨로퍼트] 불변성과 업데이트 최적화 데이터 필터링 구현하기 우선, 불변성의 중요성을 알아보는 과정에서 이름으로 전화번호를 찾는 데이터 필터링 기능을 구현해보겠다. 먼저, App 컴포넌트에서 input 하나를 렌더링하고 해당 input의 값을 state의 keyword라는 값에 담겠다. 이를 위한 이벤트 핸들러도 만들고! //src/App.js import React, { Component } from 'react'; import PhoneForm from './components/PhoneForm'; import PhoneInfoList from './components/PhoneInfoList'; class App extends Component { id = 2 state = { information: [ { id: 0, name: '김.. 2019. 7. 12.
[벨로퍼트] 배열 다루기(2) 제거와 수정 이번에는 배열 내부의 데이터를 제거하는 방법과 수정하는 방법을 알아보자. 데이터 제거 기존의 배열 데이터를 건들이지 않으면서 데이터를 제거하기 위해서는, 여러가지 방법이 있을 수 있다. 먼저 자바스크립트 배열을 가지고 연습해보자. const arr = [1, 2, 3, 4, 5]; arr 배열에서 3을 제거해보자. 기존의 배열은 그대로 유지하고 새 배열을 만들어서 3을 제외시키겠다. 첫번째 방법은 slice와 concat을 이용하는 것이다. 3을 기준으로 좌측의 배열과 우측의 배열을 서로 합쳐주는 것이다. array.slice(0,2).concat(array.slice(3,5)) //[1, 2, 4, 5] 배열 전개 연산자(...)를 사용하면 다음과 같이 구현할 수도 있다. [ ...array.slice.. 2019. 7. 12.
[벨로퍼트] 배열 다루기(1) 생성과 렌더링 이번에는 리액트 프로젝트에서 배열을 다루는 방법에 대해 알아보자. 리액트에서는 배열을 다룰 때 평상시에 하던 것처럼 사용하면 안된다. 데이터 추가의 경우 자바스크립트처럼 this.state.array.push('value'); 식으로 하면 되겠지? 하고 생각할 수도 있는데, 리액트에서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다. 이것을 불변성 유지라고 한다. push, splice, unshift, pop과 같은 내장함수는 배열 자체를 직접 수정하게 되므로 적합하지 않다. 대신, 기존의 배열에 기반하여 새 배열을 만들어내는 concat, slice, map, filter과 같은 함수를 사용해야 한다. 리액트에서 불변성 유지가 중요한 이유는, 불변성을 이용해여 리액트에서 모든 것들이 필요한.. 2019. 7. 12.
[벨로퍼트] input 상태 관리하기 프로젝트 생성하기 앞서 배웠던 지식들을 응용하여 다양한 작업들을 구현하고, input 상태를 관리하는 방법과 배열을 다루는 방법을 알아보기 위해 새로운 프로젝트를 만들어보자. create-react-app phone-book 해당 디렉토리를 VSCode로 열고, 내부에서 yarn start 를 통해 개발서버를 시작해보자. 첫번째 컴포넌트, PhoneForm 만들기 먼저 만들 컴포넌트는 PhoneForm이다. 이 컴포넌트에서는 사용자에게서 이름과 전화번호를 입력받을 것이다. input 다루기 우선, src 디렉토리 내부에 components 라는 하위 디렉토리를 만든다. 그 안에 PhoneForm.js 파일을 만든다. //src/components/PhoneForm.js import React, { Com.. 2019. 7. 12.
[벨로퍼트] LifeCycleAPI API는 컴포넌트가 브라우저에 나타날때, 사라질때, 그리고 업데이트 될 때 호출되는 API이다. 정말 중요한 역할 ! 컴포넌트 초기 생성 일단, 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들이 있다. constructor constructor(props) { super(props); } 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다. componentWillMount componentWillMount() { } 이 API는 컴포넌트가 화면에 나타나기 직전에 호출되는 API인데, 별로 신경쓰지 않아도된다. componentDidMount componentDidMount() { // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데.. 2019. 7. 12.

티스토리툴바