전체태그 보기

#react (186개의 포스트)

gwangsuda
Backend 개발자 입장에서 Frontend 개발을 하게 되면서 어떤 것들을 어떤 순서대로 학습해야 할지를 정리해 보고자 합니다.
[ Netflix Clone 4 ] Modal & Search Api
smooth97
Modal 영화를 클릭하면 해당하는 영화정보를 담고있는 모달이 뜨게 만들어보자! 모달이 클릭한 영화의 정보를 담고있으려면 Movie컴포넌트와 같은 props를 받아야한다. 때문에 Movie 컴포넌트에서 Modal을 같이 렌더링 시키기로 했다. 일단 영화 정보를 담는 image / Title / overview 데이터를 props로 받고, Movie를 ...
How to GraphQL - 4. Big Picture (Architecture)
cadenzah
GraphQL의 다양한 설계 예시, 그리고 Resolver 함수와 클라이언트 라이브러리와 같은 주요 구성 요소에 대하여 배웁니다.
[ Netflix Clone 2 ] Component - 폴더 구조 & UI
smooth97
Directory 데이터를 가져왔으니 본격적으로 프론트 작업을 해보쟈! 전체적인 디렉토리의 구조 src폴더 내부에는 컴포넌트의 구조와 상태를 작성할 폴더를 Component / Container로 나눠 로직의 재사용성을 높혀주고 스타일링을 담당하는 폴더인 static과 Redux를 작성할 폴더인 store로 구성했다. image.png /Comp...
[ Netflix Clone 1 ] Redux thunk API 연동하기 - 시작부터 어렵다
smooth97
프로젝트 생성 - Git Bash를 열고 명령어를 입력해 프로젝트를 생성 `$ npx create-react-app netflix-clone 해당 디렉토리에서 필요한 모듈을 설치해 주고 $ yarn add redux react-redux axios 개발서버 실행! $ yarn start` API 연동 - 최신 영화 목록, 장르, 고품질 포...
[ Netflix Clone ]
smooth97

[ Netflix Clone ]

2019년 9월 2일0개의 댓글
React project 항상 시작은 설렘이 있다. 내가 새로운 것을 배울 수 있는 기대감과 동시에 내 실력을 직면하게 되서 멘탈이 나가는 과정인 것 같다. 디자인전공인 나는 혼자 개발공부를 시작한지 4개월이 됐는데 ( 멘땅에 해딩이였다.. ) 유튜브와 패스트 캠퍼스 온라인 강좌 등 많은 기초 강좌들을 보고 따라하는 방식으로 공부를 해왔다. 지금까지 ...
cyranocoding
React의 State는 읽기 전용이어야 한다. react에서 state는 항상 읽기 전용이어야 하며, array 등의 reference value들은 새로운 reference를 만들어서 state를 변경해 주어야 한다. 이와 같은 방식으로 redux에서도 state는 읽기 전용으로 관리 되어야 한다. 그래서 spread operator (...) 를 ...
How to GraphQL - 3. Core Concepts
cadenzah

How to GraphQL - 3. Core Concepts

2019년 8월 30일0개의 댓글
GraphQL의 기본적인 개념인 쿼리, 뮤테이션, 구독, GraphQL 스키마, SDL 등을 배웁니다. 각 개념들을 직접 실습해보세요.
How to GraphQL - 2. GraphQL is the better REST
cadenzah
GraphQL은 보다 효율적이고 유연한, REST API의 대안입니다. 강타입 시스템을 사용하며, 데이터를 필요한 만큼만 불러올 수 있습니다.
How to GraphQL - 1. Introduction
cadenzah

How to GraphQL - 1. Introduction

2019년 8월 28일0개의 댓글
The free and open-source tutorial to learn all around GraphQL to go from zero to production
ki_blank

React-Router 간단한 사용법

2019년 8월 28일1개의 댓글
사전 준비 - npx create-react-app react-router - src 폴더 안에 Components, Screens 폴더 생성 - Components 폴더에 App.js 이동, Routes.js와 Header.js 생성 - Screens 폴더에 Lionking.js, Aladin.js, Spiderman.js생성 스크린샷 201...
stampid

React-Apollo란?

2019년 8월 27일0개의 댓글
React-Apollo React-Apollo란? - Apollo는 REDUX를 대체 할 수 있는 GraphQL-Client의 하나이다. - GraphQL을 기반으로 한 상태관리 플랫폼이며 클라이언트에서 GraphQL을 사용하여 데이터를 가져오는 UI를 만들 때 사용하기 좋다. - fetch 형식이 아닌 query문을 정의하고 GraphQL 서버로...
stampid

React란?

2019년 8월 27일0개의 댓글
React 리액트(React)란? 리액트는 페이스북에서 제공해주는 프론트엔드 라이브러리이다. 또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. - 리액트를 왜 사용하는가? 사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다. 그...
cyranocoding
Update(업데이트) Component들은 state 나 props 가 변경이 되면 update가 진행이 되며 다시 rendering 된다. Input이 달라지니 output이 달라져야 하기 때문이다. 그리고 상위 component가 update되면 그에 속한 하위 component들도 다시 mount가 된다. component가 update될 때 ...
ki_blank

React - jsx에 대한 간단한 소개

2019년 8월 23일0개의 댓글
jsx jsx는 react에서 사용하는 문법입니다. jsx는 javascript 안에서 html 처럼 사용합니다. react에서는 component에서 쓰이는 html의 속성 값이나 content에 "{}"를 사용합니다. - 스크린샷 2019-08-23 오후 7.33.43.png - class name이 "foo" 과 h1태그의 cont...
ki_blank

React - Component

2019년 8월 23일0개의 댓글
React에서 component가 있습니다. component는 HTML를 반환하는 함수입니다. component의 사용법을 알아보겠습니다. 결과는... 스크린샷 2019-08-23 오전 9.56.25.png - 위와 같이 나옵니다. index.js에서 하나의 component App /를 render를 하지만 App / 에 포함되어 ...
cyranocoding
React Life Cycle React는 Component는 상위 component에서 받은 props 를 input으로 하고 React를 구성하는 가장 작은 단위인 Element 를 output으로 하는 함수!!이다. React를 사용하면 각 component 단위로 UI를 화면에 보이게 하고, 다른 UI로 바꾸고, 현재 보이는 UI를 화면에서 없...
k7120792
images.png 서론 최근들어 프론트엔드 개발에서의 테스트 방법을 생각해봤습다. 고민들에는 프론트엔드 테스트코드 실질적 효과와 효율성과 어떤 코드들을 테스트해야 하는지에 대해서 의문을 제기해왔습니다. 그러던 도중 이글을 만나게 되었습니다. 이 글은 Nick Gard의 "React Snapshot Testing: The Bad Parts"를 번...
[번역] GraphQL은 어떻게 Redux를 대체하는가
minsangk
최근 프론트엔드를 Angular로 전면 교체하면서 상태 관리 코드에 관한 고민이 많은 차에 많은 영감을 주는 좋은 글을 발견하여 (처음으로, 제대로) Mark Johnson님의 허락을 얻어 모자란 실력이나마 번역을 해봤습니다. 이에 관한 제 생각과 경험이 더 있는데 그 글은 따로 포스트를 작성하도록 하겠습니다ㅋ How GraphQL Replaces...
geonhwi

IMMERSIVE #12 - Recast.ly

2019년 8월 7일0개의 댓글
Recas.ly / Youtube API