Category: React.js

[Video] 리액트 라우터 (react-router v4) 강의 [1/3] : 사용 방법

velopert23 Comments
작년 Pre-release alpha시절에 한번 자료를 만든적이 있지만 올해초에 정식 릴리즈되면서 바뀌어도 너무 많이바뀌어버려서 이렇게 자료를 새로 만들었습니다. 흔히 사용되는 기능들을 대부분 다뤄보려다보니 생각보다 강의가 길어져서 동영상 하단에 타임라인을 추가했으니 참고하세요~ 타임라인 00:00 – 05:25 소개 및 프로젝트 셋업 05:25 –…

[번역] 리액트하다가 막혔을 때 생각해볼 4가지 질문

velopert4 Comments
웹서핑하다가 저와 비슷한 생각을 하고 있는 블로거의 포스트를 읽게되어 좋은 내용인 것 같아 번역해보았어요. 여기에 있는 내용은 꼭 리액트에 국한되어있는것은 아니니 지나가다가 읽어보시면 좋을 것 같습니다.   저는 React 에는, Anti-pattern 은 있어도 Best Practice 는 존재하지 않아야 한다고 생각해요…

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가?

velopert22 Comments
리액트를 지난 2년간 사용하면서도 막상 말끔하게 설명하라고 하면 어려웠던 주제, 원래 번역글은 잘 안쓰지만 글 자체가 구성이 잘 되어있어서 글을 번역해보았습니다. 원본: https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq 글의 자연성 및 더 높은 이해도 및 몰입도를 위해 의역이 많이 포함되어 있습니다 🙂   어느날 내…

[React.JS] 강좌: 함수형 컴포넌트 (Functional Component)

velopert8 Comments
이번 포스트에서는 React 에서 함수 형태로 컴포넌트를 정의하는 방법을 알아보겠습니다. React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용합니다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야하죠. View the…

[React.JS] 강좌: 리액트 프로젝트에서의 라우터, React-router v3 사용하기

velopert26 Comments
아직 React-Router v3 는 유지보수가 이뤄지고 있는 상태이며, 현재 2017년 3월 기준 가장 최신 버전은 v4 입니다 (한동안 베타였는데 정식 릴리즈되었습니다. 관련 동영상이 만들어졌으니 여기를 참조해주세요) 리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용합니다. 라우터는 사용자가 요청한 URL에 따라서 다른…

[React.JS] 강좌: React 컴포넌트 구성 & AJAX 비동기 작업 처리하기 & CSS 애니메이션 처리

velopert38 Comments
이 포스트에서는 React 프로젝트에서 Ajax 와 같은 비동기 작업을 효율적으로 처리하는 방법을 다뤄보겠습니다. Ajax 처리 외에도, 컴포넌트 구성 및 응용, 애니메이션 처리도 다루니, React 입문자들은 한번 따라서 진행해보시면 많은 도움이 될거에요. 만약에 이해가지 않는 부분이 있거나 틀린 부분이 있다면 언제든지…

[React.js] React-Router v4 Pre-Release 사용해보기

velopert11 Comments
리액트 라우터 v4 공식 릴리즈되어 새 자료를 만들었습니다. 이 포스트에 있는 자료는 deprecated 되었으니 새 포스트를 참고해주세요. 최근, React Router 가 v4 버전을 pre-release 하였습니다. 어떻게 달라졌나 알아보고, 사용법도 알아봅시다. 제가 사용해본 결과, 기존의 사용법과 정말 많이 달라졌으며, 사용법이 정말…

[React.JS] Tip: create-react-app 사용하기 + react-hot-loader 적용 + Express.js 와 함께 사용하기

velopert26 Comments
Redux 를 개발한 Dan Abramov, React 가 릴리즈 된 이후에 React.js 생태계에 가장 큰 영향을 끼친 인물이 아닐까요? 2016년 7월 22일, 그가 React 블로그를 통하여 멋진 소식을 전했는데요. React 작업환경을 명령어 하나로 설정 할 수 있는 “공식 도구” 를 릴리즈하였습니다!…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (7)

velopert10 Comments
6편에선 저희 프로젝트의 핵심기능을 모두 완료하였고, 성능을 최적화하는 방법도 가볍게 배웠습니다. 이번 편에서는 (마지막 편입니다! 야호~) 유저 검색기능을 구현해보겠습니다. 강좌 후반부에서는 제가 핵심코드만 제공해드릴테니, 한번 여러분이 직접 구현해보세요.   25. 유저 검색기능 구현하기 – 담벼락 우리가 구현 할 기능은 이렇게…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (6)

velopert6 Comments
5편에서는 메모를 수정하고 삭제하는 기능을 구현해보았습니다. 이번 편에서는, 별 주기 기능을 구현해보겠습니다. 이 작업은 수정 기능과 매우 비슷하므로 쉽게 구현 하실 수 있을겁니다. 23. 별 주기 기능 서버 – 별주기 API 구현하기 (server/routes/memo.js) /* TOGGLES STAR OF MEMO: POST /api/memo/star/:id…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (5)

velopert1 Comment
  4편에서는, 메모를 쓰고 읽는 기능을 구현했습니다. 지금까지 잘 따라와주셨다면, 이번 코드랩의 목표를 이미 달성 한 셈입니다. 여러분들은 React 컴포넌트를 다루는 방법을 어느정도 숙지하였고, Redux 데이터 흐름 구조에도 익숙해졌으며, 서버와 커뮤니케이션 하는 방법 또한 배웠습니다. 저희가 지금까지 해왔던 지식과 방식을…

React.js Codelab 2016 – Express 와 React.js 를 사용한 웹 어플리케이션 만들기 (4)

velopert10 Comments
3편에서는 계정인증 부분을 완료했었습니다. 어떤가요? 조금 복잡했나요? 이 파일 수정하고.. 저 파일 수정하고, 조금 정신없었을 수도 있지만, 결국엔 비슷한 동작이 계속해서 반복되기 때문에 몇번 해보면 쉬워진답니다. 이런 동작이 반복되죠 action type 만들기 action creator 만들기 reducer 만들기 컴포넌트에서 사용 이번…