이미지 7

[Release] MEMOPAD: React.js 를 사용하여 만든 간단한 메모 웹 어플리케이션

React.js, Redux, Express.js, 그리고 MongoDB 를 사용해서 만들어진 싱글 페이지 무한 스크롤링 메모 어플리케이션입니다. 이 어플리케이션은 React.js 강의 진행을 위해서 만들어졌습니다. 이를 만드는 내용은 https://velopert.com/tag/reactcodelab 여기에서 다루고 있습니다. Preview: https://memo.hoah.xyz/ Source: https://github.com/velopert/react-codelab-project 기능 회원인증 (가입/로그인) 메모 작성 / 수정 /…
이미지 6

[Release] SaySomething. Long-polling 기법을 사용하여 구현한 실시간 채팅 예제 웹 어플리케이션

Express.js, MongoDB 를 사용하여 구현한 채팅 예제 웹 어플리케이션 입니다. Long-Polling 구조를 자체적으로 구현하여 Ajax 를 통해 메시지를 통신합니다. 서버측에선 MessageCache 를 구현하여 실질적을 MongoDB 에 쿼리를 할 때는, 초기에 데이터 불러올 때랑, 이전 데이터를 불러 올 때 입니다. 클라이언트…

처음으로 영어로 동영상을 만들어보았다

  요새 React 관련 동영상 만들다가, 갑자기 한번쯤 영어로도 만들고싶다는 생각이 들어서 만들어보았다. 최근 동영상 많이 만들어봐서인지.. 딱히 어려움이 없었다. 영어가 불편한건 아니지만 그래도 제 2 외국어이기때문에 발음이 더 많이 꼬일 줄 알았는데 그렇진 않았다.   시간날때마다 조금씩 만들어봐야겠다.. 라고…

VSCode Extension

최근에 VSCode 를 사용하게 됐는데 꽤 빠르고 괜찮은 것 같다. 확실히 아톰보다 훨씬 가벼운 느낌이 든다. 그리고 확장 프로그램 설치 할 때 빠르다… react 프로젝트 진행 할 때 이 정도로 설치하면 좋은 것 같다 :))…

[ERROR] React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

이번에 한번 프로젝트를 create-react-app 으로 시작해서 진행해볼까.. 하고 시작하는데 갑자기 날 멘붕하게 한 이 에러 메시지. Uncaught Invariant Violation: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional…
npm-logo

[Node.js] Tip: Node는 LTS버전을 사용하더라도, NPM은 최신버전을 사용하자

저는 보통 프로그래밍 작업을 서버컴퓨터나, 클라우드 IDE 를 사용하여 작업을 합니다. 그러다가, 오늘은 제 노트북에서 React.js 프로젝트를 클론하여 npm install 을 했는데, node_modules 디렉토리 의 크기가 어마무시하게 크다는걸 발견했습니다.       거의 200MB ??? 디스크 할당 크기는 276MB!!? 어쩐지…
react

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

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

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

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

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

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

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

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