dmchoi

평소 나는 서비스에 있어서 가장 중요한 것은 그 서비스의 유저들이라고 생각한다. 좋은 아이디어를 가진 서비스일지라도 유저들이 사용하기에 불편하거나, 좋지 않아 결국 그 서비스를 찾는 유저가 없다면 아무 소용이 없을 것이다. 프론트엔드 개발자라면 유저들에게 더 나은 UX와 UI를 제공하기 위해 고민하고 또 고민해야 하지 않을까? 최근에 “UX/UI의 10가지 심리학 법칙”이라는 책을 구매하였다. 이 책에 대해 간단히 소개하자면, 인간 중심적인 제품과 경험을 만드는데 활용할 수 있는 주요 심리학 법칙을 소개하며, 우리가 익숙하게 사용하는 앱과 경험의 사례를 통해 인간이 디지털 인터페이스를 인지하고 처리하는 방식을 고려해 사용자 경험을 디자인 방법을 알려준다. 내가 이 책을 선택한 이유들은 다음과 같다. 1...

클래스형 컴포넌트에는 lifecyle 메서드라는 것이 존재한다. 컴포넌트 안에 어떤 변화가 있었을때, 처음에 로딩될때, 컴포넌트가 해체될때 등 함수나 코드를 실행할 수 있는 기능이다. 대표적으로 다음과 같은 메서드들이 존재한다. componentDidUpdate : 컴포넌트가 업데이트될 때 실행 componentDidMount : 컴포넌트가 처음 로딩될 때 실행 componentWillUnmount : 컴포넌트가 해체되기 직전에 실행 import React, {Component} from 'react'; export default class App extends Component { componentDidMount(){ //code this } componentDidUpdate(){ //code this..

리액트에서 컴포넌트를 선언하는 방식에는 두 가지가 있다. 클래스형 컴포넌트와 함수형 컴포넌트 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8부터 함수형 컴포넌트에 리액트 훅(Hook)을 지원, 현재 리액트 공식 문서에서는 함수형 컴포넌트 사용을 권장하고 있다. 하지만, 아직 사용하고 있는 곳들이 있어 유지보수를 위해 두 가지 방식 모두 알고는 있어야 한다. 클래스형 컴포넌트 기본적으로 함수형 컴포넌트와 동작은 같지만, 클래스형 컴포넌트는 보다 더 많은 기능을 제공해 주는 것이 함수형 컴포넌트와의 차이점이다. state를 이용해 상태를 나타내거나 component lifecyle에 정의된 메서드(componentWillMount(), componentDidMount() 등)을 이용해 원..

Mode 변경 TOC 컴포넌트 아래에 create, update, delete 구현하기 create, update는 눌렀을때 특정 페이지로 이동해서 실행되게 하고 delete는 눌렀을때 페이지 이동 없이 실행되게 함 delete에 link를 사용하게 되면, 사용자들이 어떤 페이지를 방문할 때 페이지가 삭제될 수도 있는 큰 문제가 발생하기 때문에 페이지 개념이 아니라 버튼으로 구현 components 디렉토리에 Control.js 생성 App.js Control.js import React, { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Con..

원격 저장소 인터넷, 네트워크에 연결되어 있는 형태의 저장소 로컬 저장소를 원격 저장소에 연결해서 백업할 수 있다. 로컬 저장소에서 일어나는 변화들을 원격 저장소에 계속해서 업로드 원격 저장소 만들기 소스트리에서 저장소(Repository) - 원격 저장소 추가(Add Remote) - Add - github에서 http/ssh 주소 복사 - URL/Path에 붙여넣기 생성하면 Remotes에 방금 만든 원격 저장소가 나타남 push : 로컬 저장소에 있는 소스 코드를 원격 저장소로 밀어냄 -> 로컬 저장소와 원격 저장소를 동기화 로컬 컴퓨터가 없을 때 github - commits 들어가면 그 동안 작업했던 버전들을 온라인으로 볼 수 있다. 협업 혼자 로컬 저장소에서 프로젝트를 진행하다가 새롭게 누군가..

Branch 마치 두 개의 프로젝트 폴더를 따로 가지고 작업을 한 것과 같은 효과를 내면서 이 작업이 끝났을 때, 실험적인 작업에서 변경된 내용을 오리지널 소스로 매우 간편하게 병합할 수 있다. 각 브런치는 프로젝트 디렉토리를 카피한 것과 같은 효과를 가진다. mater branch : 저장소를 만들 때 기본적으로 만들어지는 브랜치 merge(병합) : 실험 브랜치에서 했던 작업들을 마스터 브랜치에 합침. 받는 쪽 브랜치를 선택(checkout) 한 후 가져오려는 브랜치 우클릭 - 현재 브랜치로 병합(Merge 브랜치이름 into current branch) Conflict(충돌) 브랜치들이 서로 같은 곳을 수정했을 때, 버전관리 시스템이 자동을 병합해 줄 수 없어 사용자에게 그 문제를 해결하라고 함 마..

되돌리기 각각 버전들에 해당하는 코드들을 보는것 뿐만 아니라, 과거의 특정 상태의 코드로 돌아갈 수도 있어야한다. 이런 점에서 버전관리 시스템은 매우 중요함. 1. Discard 어떤 파일을 수정하고 커밋 하기 전 상태이면 폐기(Discard) 기능을 통해서 수정한 내용을 취소하고 가장 최신 버전의 상태로 돌아갈 수 있다. 2. Reset 이미 커밋한 버전을 취소하는 방법. 버전이 모두 날라가기 때문에 조심해서 사용해야 함 1. 돌아가고 싶은 버전 선택 - reset to commit - using mode- hard : 선택한 버전 이후 모든 버전이 모두 삭제 됨 2. 돌아가고 싶은 버전 선택 - reset to commit - using mode- mixed : 선택한 버전 이후 모든 버전은 삭제하면..

버전관리란? 동일한 정보에 대한 여러 버전을 관리하는 것을 말함. 어떠한 문제가 발생했을 때, 문제의 맥락을 파악할 수 있게 도와주고, 변화에 실패 했을 때 이전 상태로 쉽게 돌아갈 수 있게 해준다. 백업과 협업에서도 많이 쓰이며, 형상관리라고도 부른다. 각 버전들은 프로젝트의 변화를 의미하며, 그 버전들을 통해 어떤 일들이 일어났는지 추적할 수 있다. 버전관리 시스템을 사용하기 위해선 git을 설치해야함 git은 명령어로 버전관리를 하는 것이기 때문에 어려울 수 있다. 이때, gui 환경의 소스트리(Source Tree)라는 소프트웨어를 이용하면 git을 좀 더 쉽게 사용할 수 있다. 저장소 만들기 New tab - Create a repository 에서 경로 설정하고 생성을 누르면 프로젝트를 위한 ..

이벤트 state props 그리고 render 함수 props, state, event 가 서로 상호작용하여 애플리케이션의 역동성을 만듦 리액트에서 props나 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출되고 그 하위 컴포넌트들의 render 함수들도 다시 호출됨 (render 함수 : 어떤 html을 그릴것인가 결정하는 함수) 이벤트 설치 a 태그를 클릭하면 onClick에 설치된 함수가 실행되도록 함 {this.state.subject.title} function에 e라는 인자를 줌으로써 이벤트를 핸들링 할수 있게 해줌 e.preventDefault( ) : 이벤트가 발생한 태그가 기본적인 동작 방법을 하지 않게 만들어 줌 {this.state.sub..

※본 포스팅은 생활코딩님의 리액트 강의를 바탕으로 작성한 글입니다. 컴포넌트 만들기 HTML로 코드를 작성했을 때 WEB world wide web! HTML CSS JavaScript HTML HTML is Hyper Text Markup Language. 컴포넌트를 만드는 코드 class App extends Component { render() { return ( Hello, React! ) } } 리액트가 가지고 있는 컴포넌트라는 클래스를 상속해서 새로운 App라는 클래스를 만든다 그리고 그 클래스는 render라는 매서드를 가지고 있다. 위 HTML 코드를 React로 정리하면 class Subject extends Component { render() { return ( WEB world wi..