post-thumbnail

FullStack.instargramClone(1);

금일부터는 NomaderCoder의 instargram clone 강의를 공부하겠습니다. 스택은 prisma react react-native GraphQL 입니다. express는 GrpahQL 모듈안에 내장되었습니다. Part.1 GraphQL API 서버 만들기

어제
·
0개의 댓글
post-thumbnail

React.GraphQL(poketmon-app);

오늘은 노마더코더에서 제공하는 무료강의인 GrpahQL movie-app 만들기를 하겠습니다.설치항목은 router-dom, styled components, apollo 입니다.먼저 router폴더에 Home과 Detail을 만들어 주고, App에서 Router 컴

4일 전
·
0개의 댓글
post-thumbnail

React.미들웨어사용하기(saga, 2);

redux-saga에서는 제너레이터 함수문법을 사용합니다. 이 함수를 사용하면 순차적으로 값을 반환할 수 있고, 만들떄 에는 function\* 이라는 문구를 사용해야합니다. 이러한 제러레이터 함수를 사가라고 부릅니다.counter를 saga로 리팩토링 해봤습니다. 이

6일 전
·
0개의 댓글
post-thumbnail

React.미들웨어사용하기({action, logger, thunk}, 1);

미들웨어의 사용을 익혀보겠습니다.차례로는 action, thunk, saga순입니다.일단 action으로 코드를 꾸며보겠습니다. 어제의 삽질로 인해 redux의 구조가 완벽해진 것인지 책을 잠깐씩 참고하고 금방 만들었습니다. 특히 redux-action을 쓰니깐 정말

6일 전
·
0개의 댓글
post-thumbnail

React.Redux(React with Redux(2));

1. 컨테이너 컴포넌트 만들기 저번글에서 모듈화 시킨 것들은 reducer와 액션을 만들고 스토어를 만들었던 것이라면 컨테이너 컴포넌트에서는 디스패치를 액션에 전달하는 컴포넌트들을 작성 할 것입니다. container 폴더를 만들고 그안에 먼저 덧셈 기능을 가진 c

2020년 2월 20일
·
0개의 댓글
post-thumbnail

React.Redux(React with Redux(1));

Redux를 공부하겠습니다. 먼저 Redux의 탄생배경부터 알아보겠습니다. react의 각 컴포넌트들은 스테이트를 가져도 서로 공유하거나, 접근하기가 매우 까다롭고 어렵습니다. 그래서 이를 서로 간섭하기 쉽고, 관리하게 편하게 해주는 것이 필요로 했는데 그것이 Redu

2020년 2월 20일
·
0개의 댓글
post-thumbnail

React.외부API연동하기(NewsAPI)

오늘은 API를 이용하여 최신뉴스가 나오는 페이지를 작성하겠습니다. 해당 강의 후반부에 React-router의 대한 내용이 있지만, 저는 쓰지 않을 예정이라 건너뜁니다. 애당초 서버에서 pug같은 템플릿 쓰기 싫어서 react를 쓰는거라 router보다는 서버쪽에서

2020년 2월 19일
·
0개의 댓글
post-thumbnail

Reack.Hook(ToDoList(2));

어제부로 공식적인 백수가 되었습니다. 개발 공부를 위하여 과감하게 퇴직하였습니다. 꿈은 back-end 개발자라 Node.js, Rust, C#.net-core에 관심이 있습니다. 그런데 React를 하는 이유는 Pug같은 템플릿 뷰를 쓰기 싫어서 배우고 있습니다! 더

2020년 2월 18일
·
0개의 댓글
post-thumbnail

React.Hook(ToDoList(1))

이제 react와 Hooks를 써서 ToDoList를 만들어보겠습니다. 이번 강의도 역시 해당 서비스를 만드신 김민준님의 책 내용입니다.먼저 yarn으로 todo라는 이름의 리액트 프로젝트를 생성하고 react-icons, classnames, node-scss도 함께

2020년 2월 17일
·
0개의 댓글
post-thumbnail

React.Hook(고객관리스템 리팩토링)

이번에는 저번에 썻던 ustState와 useEffect를 이용하여, 저번에 만들어 본 고객관리시스템의 리팩토링을 시작하겠습니다. 리팩토링 하는 과정에서 저번에 만났던 오류인 allow-orign 오류가 나와 한참을 고생했습니다. express에 cors 모듈을 사용하

2020년 2월 17일
·
0개의 댓글
post-thumbnail

React.Hook(useState, useEffect)

React Hook의 연습시작! React의 학습서는 리액트를 다루는 기술 개정판입니다. 지금부터는 클래스로 작성되었던 고객관리시스템의 Class 컴포넌트를 function 컴포넌트로 바꾸면서 Hook을 학습하겠습니다. 하지만 그 먼저 이번 글에서는 Hook의 기본

2020년 2월 15일
·
0개의 댓글
post-thumbnail

React.고객관리시스템(Circular, 로딩화면만들기)

저번 글에서는 단순히 isLoading을 줬을 때에 "" 공백이 출력하게 했는데, 이제는 material-ui에서 제공하는 컴포넌트를 사용해서 로딩화면을 만들겠습니다. 먼저 https://material-ui.com/api로 가면 여러가지 제공하는 API들

2020년 2월 14일
·
0개의 댓글

React.고객관리시스템(Node.js)

다시 React 고객관리시스템으로 돌아왔습니다. 강좌는 다시 한번 말씀드리지만 나동빈님의 React 강좌를 따르고 있고, 강좌의 코드와 다른 부분도 있습니다. 예를 들어 강좌는 yarn을 쓰지만 저는 NPM으로 쓰고, 추가로 babel과 ES6 문법으로 작성했습니다

2020년 2월 14일
·
0개의 댓글
post-thumbnail

React.영화App만들기(CSS, slice);

먼저 시작전에 장르 data를 API에서 추가하도록 하겠습니다. 저번 글에서처럼 JSON안에서 해당 Data이름을 적어주면 됩니다.각각 App.js 와 Movie.js에 해당의 내역을 추가해줍니다. ul에 map으로 li를 생성하여 뿌려주었습니다. 그 뒤 App.css

2020년 2월 13일
·
0개의 댓글
post-thumbnail

React.영화App만들기(axio);

저번에 만들던 고객관리시스템 만들기를 잠시 중단하고 이번에 NomaderCoder의 React 강좌인 Movie App 만들기를 하겠습니다. 먼저 API의 JSON을 받아오기 위해 Axio라는 패키지를 깔아야 합니다. npm i axio라고 치면 깔립니다. 먼저 Web

2020년 2월 13일
·
0개의 댓글

React.고객정보시스템만들기(Material-ui,Table)

오늘은 Material-ui/core를 이용하여 화면을 조금 만지도록 하겠습니다. Material의 경유 요즘 뜨는 새로운 UI 디자인 기법입니다. 이것은 라이브러리에서 제공하는 많은 내재된 디자인을 쓸 수 있게 해주어 보다 손쉬운 디자인을 할 수 있게 도와줍니다. 이번화는 그 중 Table을 사용하여 무작정으로 화면에 뿌려주던 고객정보를 보다 보기 좋...

2020년 2월 2일
·
0개의 댓글

React.고객관리시스템만들기(고객정보컴포넌트, 구조화)

설 연휴를 보내고, 돌아왔습니다. 교대근무를 하고 있어서 교대근무를 하면서 공부를 하기가 힘이 듭니다. 그렇기 때문에 과감히 회사를 관두고 2~3개월동안 혼자 구매해놨던 책들과 강의들을 독학 하려고 하는 것이죠. 또한 사이버대학교의 봄학기가 시작되었으니 이 기간이 끝난 후에 계획했던 프로그램 부트캠프에 들어가려고 합니다. 곧 직장을 관두려고 하니 마음이...

2020년 1월 30일
·
0개의 댓글

React.ToDoList(eval,bind,splice);

오늘을 끝으로 기능구현을 완성 후에 다음 단계로 넘어갑니다. 이번에는 추가했던 Tasks를 삭제하는 기능을 구현하려고 합니다. 한시간 좀 넘게 헤맸습니다! 처음에는 filter로 해당 타켓의 value를 빼고 다시 tasks에 넣는 방식으로 진행했는데 왠지 모르게 자꾸 cant read라는 오류가 뜨는 겁니다. 그 다음으로 splice를 이용하여 선택...

2020년 1월 21일
·
0개의 댓글

React.TodoList(method,map);

지난 시간에 이어 계속해서 ToDoList를 만들어 보겠습니다. 저는 이번에 input의 Value를 HTML에 출력하고자 합니다. ToDo의 경우 input value -> Event 처리 -> HTML에 추가 하는게 기본 골격입니다. 하지만 저는 React에서ToDoList를 만드는 것이 처음이였고 일단은 JavaScript에서 하는 방식대로 해봤습니...

2020년 1월 20일
·
0개의 댓글

React.ToDoList(props, state);

연습예제: ToDoList 오늘은 리액트로 가볍게 ToDoLIST를 만들어 보면서 개념을 정리해볼까 합니다. CSS로 꾸미지는 않고, 가볍게 이론정리하는 예제로만 사용할 것입니다. React는 NomaderCoder의 와, 나동빈님의 를 동시에 진행하면서 연습할 계획입니다. 이렇게 두가지의 예제를 한꺼번에 하는 이유는 두 개를 동시에 만들어가는 과정에...

2020년 1월 17일
·
0개의 댓글