본문 바로가기

분류 전체보기68

깃허브 GITHUB 빠르게 핵심만 사용해보기 (KING초보만 눌러주셔요) 이제는 이미필수가 돼버린 깃허브... 이론 따위는 어려우니 서버 코드 저장소 개념 정도로 빠르게 사용해보겠습니다. 다만 git과 github는 구별해야 하며 git은 리눅스 창시자인 리누스 토르발스가 개발한 버전 관리 시스템이고 github는 git 시스템을 사용한 호스팅 서비스라고 생각하시면 됩니다. 이 글은 윈도우 사용자와 초보를 대상으로 작성하겠습니다. 일단 아래 링크 눌러 윈도우 버전 git 설치합니다. https://git-scm.com/downloads 빠른 글을 위해 스크린샷도 생략하겠습니다. 절대 귀찮아서 아닙니.... 전부 기본 설정으로 하시고 중간에 기본 에디터만 잘 선택하시면 됩니다. 다음으로 아래 링크 눌러 깃허브 가입합니다. https://github.com 이메일 인증하고 로그인.. 2020. 12. 26.
[ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수 2020.12.07 - [웹 프론트엔드/자바스크립트] - [ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수 어떤 프로그램 언어를 불문하고 비동기 처리는 중요합니다. 특히 웹 환경에서는 서버와의 잦은 통신으로 비동기 처리가 필수라고 할 수 있습니다. 그래서 오늘은 기존 자바스크립트의 비동기 방식과 새로운 Promise 함수를 비교하겠습니다. 먼저 총 4개의 프로세스가 있고 3개는 비동기 처리를, 나머지 하나는 즉시 호출하는 예로 코딩해보겠습니다. // 기존 자바스크립트 방식 function process1(onFin){ setTimeout(function(){onFin('프로세스1 완료')}, 1000); } function process2(onFin){ setTimeout(fu.. 2020. 12. 7.
[React] 라우터(Router), 스위치(Switch), 링크(Link), 리다이렉트(Redirect)를 이용한 페이지 이동 이때까지의 예제 및 실습에서는 페이지(URL) 이동이 없었습니다. 그래서 이번에는 페이지 이동 관련 기능들을 모아서 정리하겠습니다. 일단 리액트의 페이지 이동은 기존 서버 사이드 랜더링 기술과 개념이 조금 다릅니다. 쉽게 말씀드리면 리액트는 서버가 아닌 클라이언트에서 웹 문서를 생성합니다. 이를 SPA(Single Page Application)라고도 합니다. 그럼 이론은 너무 어려우니(무책임) 바로 실습 가겠습니다. URL을 다루기 때문에 스토리북이 아닌 App.js에 직접 넣겠습니다. 먼저 명령 프롬프트에서 리액트 라우터를 추가합니다. > yarn add react-router-dom // ..\test_project\src\App.js import React, { Component } from "r.. 2020. 10. 28.
[React] 리덕스(redux) 기능으로 데이터 관리하기 ⑤ 커넥트 지난 리덕스 세 번째 포스팅에서 코드 분리를 했습니다. 크게 액션과 리듀서로 나눴는데, 이번에는 커넥트(connect)를 사용하여 화면(view) 컴포넌트와 데이터(container) 컴포넌트로 분리해보겠습니다. 쉽게 말씀드리면 화면에 뿌려주는 재사용 가능한 컴포넌트에 리덕스 스토어 데이터를 연결하는 것입니다. 지난 시간에 했던 소스코드에서 분리하겠습니다. 2020/10/27 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 먼저 views폴더 안에 화면 컴포넌트를 만들겠습니다. 유저 데이터인 id, pass, name 그리고 수정 버튼입니다. // ..\test_project\src\components\views\UserDataView.jsx imp.. 2020. 10. 27.
[React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 이때까지 네 번에 걸쳐 리덕스 관련 포스팅을 했습니다. 기초, 디버깅, 코드 분리까지 어느 정도 리덕스 기능을 사용할 수 있지만, 문제는 어떤 데이터를 담아서 어떻게 사용하는 야입니다. 그래서 이번에는 key값과 object를 사용한 해시맵 구조를 담아보겠습니다. id, pass, name 정도의 유저 데이터를 관리하는 예시로 진행하겠습니다. 먼저 액션 추가 ㄱㄱ~ 2020/10/16 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 2020/10/22 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 2020/10/23 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데.. 2020. 10. 27.
[React] 리덕스(redux) 기능으로 데이터 관리하기 ③ 코드 분리 리덕스 첫 기초 포스팅에서는 개념을 파악하기 위해 모든 기능을 하나의 소스 코드에 넣었습니다. 즉 액션 정의, 리듀서 설정, 스토어 생성 등의 코드가 모두 한 곳에 있었습니다. 또한 하나의 리듀서를 사용하여 스토어 저장소도 나눠져 있지 않았습니다. 그래서 이번에는 코드를 분리하고 복수의 리듀서를 사용해 보겠습니다. 시간을 절약하기 위해 지난 시간에 했던 카운드 업 로직에 로그인 정보를 저장하는 정도의 기능을 추가하겠습니다. 아래 링크를 참고하세요~! [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 먼저 액션을 분리해보겠습니다. src/components 폴더 안에 actions 폴더를 만들고 이하 두 개의 소스를 추가합니다. // ..\test_proje.. 2020. 10. 23.
[React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 리덕스 관련 두 번째 포스팅입니다. 지난 시간에는 리덕스의 간략한 개념과 사용 방법을 알아봤었는데, 리덕스를 사용하면 통합적인 데이터 관리가 가능하다고 했습니다. 하지만 단지 데이터 관리 기능만이라면 이렇게 주목받거나 어려운 기능은 아니었을 것입니다. 그래서 오늘은 정말 강력한 기능인 리덕스 디버깅을 배워보도록 하겠습니다. 크롬 브라우저를 기준으로 설명드리겠습니다. 먼저 리덕스 크롬 확장 도구를 설치하기 위해 구글에 검색으로 'chrome redux devtools' 를 찾거나, 아니면 chrome 웹 스토어에서 'Redux DevTools' 를 검색해 설치합니다. 설치가 완료되면 명령 프롬프트에서 리덕스 개발자 확장 라이브러리를 추가합니다. > yarn add redux-devtools-extensio.. 2020. 10. 22.
[React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 지난 시간에는 컨텍스트(context) 기능으로 데이터 관리하는 법을 배웠습니다. 컨텍스트가 작은 편의점 같은 존재라면 리덕스는 대형마트 같은 느낌입니다. 즉 리덕스는 강력한 기능만큼 복잡하고 까다로운 절차를 거쳐야 사용 가능합니다. 하지만 리덕스를 사용하면 통합적인 데이터 관리가 가능하기 때문에 꼭 알고 가야 하는 기능입니다. 그럼 설치부터 ㄱㄱ 명령 프롬프트에서 리덕스 관련 라이브러리 설치 > yarn add redux react-redux 첫 시간인 만큼 가볍게 접근해 보겠습니다. 컨텍스트가 공급자(provider)와 소비자(consumer) 개념으로 나뉘었다면 리덕스는 스토어(store), 리듀서(reducer), 액션(action)이 있습니다. 쉽게 설명하자면 스토어는 데이터 저장소이고 리듀서는.. 2020. 10. 16.
[React] 컨텍스트(context) 기능으로 데이터 관리하기 리액트 기초 관련 포스팅에서 프로퍼티(props)와 스테이트(state)로 컴포넌트의 데이터를 관리하는 법을 배웠습니다. 다시 한번 정리하자면 주로 외부 데이터는 프로퍼티로, 내부 데이터는 스테이트로 관리했었습니다. 그래서 이번에는 프로퍼티의 단점을 보완한 컨텍스트 기능으로 데이터를 관리해보는 시간을 갖겠습니다. 아래 링크도 참고해 보세요. 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트 2020/09/21 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수 2020/09/29 - .. 2020. 10. 14.

티스토리툴바