티스토리

heeestorys

검색하기

블로그 홈

heeestorys

heeestorys.tistory.com/m

리딩리드 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

티스토리 블로그에 후원버튼(donaricano) 만드는법 안녕하세요. 요즘 유튜브와 BJ방송을 보면 많은 사람들이 크리에이터에게 후원을 합니다. 이젠 블로그에서도 후원을 받을 수 있습니다. 어떻게 받을 수 있는지 알아보겠습니다. 1. 도네리카노 사용하기 https://donaricano.com/ 유튜브, 블로그, BJ, 아티스트의 손쉬운 후원문화로 세상에 좋은 변화를 만듭니다. | 도네리카노 유튜버, 블로거, BJ, 아티스트, 디자이너, 예술가에게 향긋한 커피 한잔을 선물하세요. 커피 한잔이 세상에 좋은 울림이 됩니다. donaricano.com - 도네리카노라는 서비스입니다. 도네리카노를 통해 네이버, 티스토리 블로그에서 후원버튼을 만들 수 있습니다. 또한 자신의 개인 카카오 QR코드를 업로드하기 때문에 수수료없이 무료로 후원 받을 수 있습니다. 2. 도네리.. 공감수 1 댓글수 0 2020. 6. 29.
[Testing Library] React-testing-libaray 란? React-testing-library 란? 리엑트를 개발하다보면 TDD에 관해서 한번씩 생각하게 합니다. 화면에 소스가 렌더링 되기전에 커맨드라인으로 미리 확인 할 수 있다면 개발속도가 더 빠를까라는 생각을 하게 됩니다. 그러나 개발의 생산성을 올리기위해 TDD를 진행한다면 이 방법은 해답이 될 수도 있고 아닐 수도 있습니다. TDD는 오히려 빠른개발을 방해할 수도 있습니다. 하지만 더 견고한 어플리케이션을 제작할 수 있다는 사실은 반론할 수 없습니다. 더 견고하고 신뢰할 수 있는 웹 서비스를 만들기 위해서 react-testing-library를 사용합니다. react-testing-library는 결국 react 컴포넌트의 DOM테스트를 하기위한 TDD 도구로 사용됩니다. Testing-librar.. 공감수 0 댓글수 0 2019. 12. 2.
[ReactNative] 리엑트네이티브 설치하기 리엑트네이티브 리엑트 네이티브를 처음 설치하는 사람이라면 조금은 혼동이 될 수 있다. 유튜브나 블로그에 적힌 글을 보면 expo-cli 를 이용한 간단한 방법 소개가 많다. 그 이유는 그만큼 react-native 를 빠르게 접할 수 있으며 누구나 어느 환경에서든 개발을 할 수 있기때문이다. 하지만 간편함에는 한계가 있다고 생각합니다. expo-cli와 react-native-cli 차이 expo-cli - 간편한시작이 가능합니다. - 배포가 편하고 업데이트는 expo에 publish 만 해주면 끝납니다 - Expo 에서 제공하는 API 만 사용할 수 있습니다. - native 파일을 제어할 수 없습니다. - 나중에 프로젝트가 커지면 Expo 파일을 ejet 해서 사용해야 합니다. react-native.. 공감수 0 댓글수 0 2019. 11. 28.
[ReactNative] 리엑트 네이티브란? 1. 리엑트 네이티브란? 요즘 크로스플랫폼이라는 단어를 많이 사용하게됩니다. 크로스플랫폼 혹은 멀티플랫폼이라고도 하는 개발 도구들이 우후죽순 생겨나기 시작했습니다. 크로스플랫폼도구란 하나의 언어로 다양한 플랫폼인 web, ios, android 등을 개발할 수 있는 도구를 말합니다. 예를 들어 angular의 ionic, 구글의 flutter, c#으로 개발하는 xamarin, 마지막으로 리엑트 네이티브까지 개발자들은 행복한 고민에 놓일 수 있습니다. 이런 도구들 중 가장 핫하게 뜨고있는 리엑트 네이티브는 2017년 부터 지금까지 독주를 이어오고 있습니다. https://cogi.kr/rn 코기(cogi) - 알기쉬운 단축 URL cogi.kr https://cogi.kr/rn2 코기(cogi) - 알기.. 공감수 0 댓글수 0 2019. 11. 28.
[socket.io] 7. socket.io를 이용한 채팅프로그램 - 타이핑중추가 1. 타인의 타이핑 확인 채팅을 하다보면 누군가가 글을 입력하고 있다는 알림을 보신적이 있습니다. 특히 slack을 애용하신다면 자주 보셨을 거라 생각합니다. 이번에는 저희가 만든 채팅프로그램에 누군가 입력중이라는 표시를 추가해보도록 하겠습니다. 2. 클라이언트 socket index.html Send - : 타이핑중이라는 표시를 해줄 태그를 추가했습니다. - keyup 이벤트: 기존 인풋 박스에 keyup 이벤트를 생성하여 키보드입력이 있을시 서버소켓으로 타이핑중인 nickname을 날립니다. - socket.on('typing'): 서버에서 받아온 typing 관련 메시지를 태그에 출력합니다 - #typing: 태그에 스타일을 추가합니다. 3. 서버 socket index.js const app = .. 공감수 0 댓글수 0 2019. 11. 28.
[socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가 socket.io 글들을 순차적으로 진행하시면 socket.io를 이해하는데 더욱 도움이 됩니다. 1. 닉네임추가 기존에 완성했던 채팅창에는 누구의 글인지 알 수가 없었습니다. 이제는 닉네임을 추가해서 조금더 채팅창 처럼 보이도록 하겠습니다. 2. 클라이언트 socket.io index.html Send // 닉네임 form 추가 - 먼저 닉네임을 만들 input 박스를 추가합니다. - socket.emit() 부분에 닉네임을 포함한 msg 를 만들어 전송합니다 - style 부분에 저희가 만든 input에 absolute 포지션을 추가합니다. 3. 테스트 창을 여러게 열고 이름을 입력해보겠습니다. 이름이 잘 노출되나요??? 위와같이 나왔다면 성공입니다. 저는 클라이언트 사이드에서 임의로 닉네임을 추가했.. 공감수 0 댓글수 0 2019. 11. 27.
[socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가 1. 다른유저가 접속했는지 확인 앞의 소스들은 다른 소켓(클라이언트)이 접속을 했는지 않했는지 확인을 할 수 없었습니다. 이번 장에서는 socket.broadcast를 이용하여 접속 여부를 기능을 추가해보도록 하겠습니다. 2. 서버 소켓 index.js const app = require('express')(); const http = require('http').createServer(app); const io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket){ socket.broadcast.em.. 공감수 0 댓글수 0 2019. 11. 26.
[socket.io] 4. socket.io를 이용한 채팅프로그램 - 이벤트처리 & 채팅완성 1. 이벤트 발생 앞의 예제에서 socket.io를 연동하고 클라이언트에서 채팅창을 구현했습니다. 또한 클라이언트가 소켓을 연결헀을때 서버 로그로 접속되는것 까지 확인했습니다. 이번에는 클라이언트에서 발생한 이벤트를 서버로 전달하겠습니다. 예를들어 클라이언트 입력폼에 메시지를 submit 하면 서버에서 해당메시지를 받는지 확인하겠습니다. 2. 클라이언트 설정 index.html Send 기존에 작성했던 클라이언트 코드 - socket.on() : 서버에서 요청하는 이벤트를 listen 하는 역할을하며 데이터를 받아와 클라이언트에 노출시키는 작업을 할 수 있습니다. index.js const app = require('express')(); const http = require('http').createS.. 공감수 0 댓글수 0 2019. 11. 26.
[socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동 1. socket.io 구성 socket.io는 두 가지로 구성됩니다 - socket.io : 서버에서 사용되는 모듈 입니다. - socket.io-client: 브라우저에서 사용되는 모듈입니다. 2. socket.io 설치 npm을 이용해 설치하겠습니다 npm install socket.io 1) 서버 socket.io index.js const app = require('express')(); const http = require('http').createServer(app); const io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('co.. 공감수 0 댓글수 0 2019. 11. 25.
[socket.io] 2. socket.io를 이용한 채팅프로그램 - 프로젝트 설정 1. 에디터, 서버와 클라이언트 셋팅 블로그에서 만드는 채팅프로그램은 socket.io 스타터 프로젝트를 재현합니다. 재현하면서 발생하는 문제를 기록하고 프로젝트 마지막에 있는 남은 과제또한 수행하는것이 목적입니다. https://socket.io/get-started/chat/ Socket.IO — Chat In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. IntroductionWriting a chat ap socket.io socket.io를 알고.. 공감수 0 댓글수 0 2019. 11. 21.
[socket.io] 1. socket.io란 무엇인가? 1. socket.io 란? - 과거에 모의 프로젝트로 채팅프로그램을 만든적이있다면 socket 통신이란 단어를 들어보았을 겁니다. 서버소켓과 클라이언트 소켓을 만들어 응답과 요청을 실시간으로 처리할 수 있다는 것이 소켓 통신의 핵심요지입니다. 결국은 양방향 통신이 가능하다 입니다. (소켓 통신이란 검색하면 정말많이 나오기때문에 따로 다루지는 않겠습니다) 만약 소켓통신을 처음부터 만들게 된다면 꽤나 많은 소스양을 보시게 될겁니다. 서버, 클라이언트 통신의 맺고 끝음을 관리해야되며 소켓의 이벤트 처리 등 신경쓸 부분이 많습니다. 그러나 이런 수고로움을 덜어줄 소켓 통신 라이브러리가 나오게 되었습니다. 무엇보다 javascript 라는 점이 너무나 매력적인 포인트입니다. 그 소켓 라이브러리가 바로 socke.. 공감수 0 댓글수 0 2019. 11. 20.
[웹서비스] 단축 URL 사이트 코기(cogi) 1. 단축 URL 사이트란? - 단축 URL 사이트는 말 그대로 긴 URL을 단축하는 역할을 한다. 예를들어보자 여기에는 참고할만한 긴 URL을 가진 사이트가 있다. https://heeestorys.tistory.com/655?category=649473 [Javascript] 객체의 포함된 배열 객체의 포함된 배열 - 객체에 복잡한 데이터를 저장할 때 사용한다 1. 구현 function weekTemps(){ this.dataStore = []; this.add = add; this.average = average; } function add(temp){ this.dataStore.push(te.. heeestorys.tistory.com 하지만 위의 주소는 기억하기 쉽지않다. 이렇게 기억하기 어려운.. 공감수 0 댓글수 0 2019. 11. 20.
[React] Something is already running on port 3000 1. node 혹은 npm start 시 에러 발생- Something is already running on port 3000 2. 해결방안1) linux/mac- $ lsof -i tcp:3000- $ kill -i PID2) window- $ netstat -ano | findstr :3000- $ tskill PID 공감수 0 댓글수 0 2018. 11. 29.
[ReactJs] Redux를 이용한 React앱 개발 Redux를 이용한 React앱 개발 1. 정의 - redux 를 이용하여 영화 리스트를 출력하는 앱을 개발한다. 2. 프로젝트 설정 1) package.json { "name": "redux-netfix", "version": "0.0.1", "description": "A sample project in React and Redux that copies Netflix's features and workflow", "main": "./build/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "concurrently \"webpack --watch --config webpack.config.js.. 공감수 1 댓글수 0 2018. 8. 16.
[ReactJs] Redux 란? Redux 란? 1. 정의- react 데이터 라이브러리의 하나로 가장많이 사용한다. - flux 아키텍처의 구현체 중 인기가 가장높다 2. 특징1) 훌륭한 개발 생태계2) 간결성3) 훌륭한 개발자 경험 : 핫 리로딩과 시간 여행 디버깅을 할 수 있다.4) 리듀서 구성: 최소한의 코드만으로 기능을 구형한다.5) 서버측 렌더링 지원 3. React 앱에서 redux- 스토어는 모든 데이터를 저장하고, 이 데이터를 조작할 수 있는 메서드를 제공한다. 스토어를 생성할 때는 createStore() 메서드를 사용한다- Provider 컴포넌트는 모든 컴포넌트가 스토어에서 데이터를 가져올 수 있도록 만들어준다- connect() 메서드는 컴포넌트를 감싸서 스토어에 있는 애플리케이션 상태의 일부를 컴포넌트의 속성에.. 공감수 0 댓글수 1 2018. 8. 16.
[ReactJs] 브라우저 히스토리 vs 해시 히스토리 브라우저 히스토리 vs 해시 히스토리 1. 해시 히스토리- #기호를 사용하여 페이지를 다시 불러오지않고 탐색한다.- router/#/posts/http2- 대부분의 단일 페이지 애플리케이션이 해시를 사용하여 페이지를 완전히 새로고침 하지 않고 앱의 변경을 반영한다.- 구형 브라우저 구현이 필요하다면 추천한다.1) 사용법 //해시 히스토리 정의 const ReactRouter = require('react-router') const History = require('history') let hasHistory = ReactRouter.useRouterHistory(History.createHashHistory)({ queryKey:false }) //React Router 에 포함된 해시 히스토리 에서 사.. 공감수 0 댓글수 0 2018. 8. 16.
[ReactJs] react-router 고차 컴포넌트인 withRouter 사용 react-router 고차 컴포넌트인 withRouter 사용 1. withRouter - 컴포넌트에서 router 에 접근하는 방법 중 하나이다. - 정적 클래스 속성인 contextTypes 를 설정하여 this.context.router 로 접근하는 방법 보다는 withRouter 로 접근하는 방법을 선호한다. - withRouter 는 고차 컴포넌트로 컴포넌트를 인자로 받아 router 에 주입하고 다른 컴포넌트를 반환한다. 2. 사용예 const {withRouter} = require('react-router') ..... 1) 컴포넌트에서 접근 - 함수의 첫 번째 인자로 전달된 객체의 속성을 통해 router 객체에 접근한다. const React = require('react') modu.. 공감수 1 댓글수 0 2018. 8. 16.
[ReactJs] react-router 사용하기 react-router 사용하기 1. react-router- 리액트의 공식 라이브러리는 아니다. 그러나 react 개발자들의 1/3 정도 사용하고 있다. 2. 프로젝트 구성1) 폴더/css/js-bundle.js/jsx- about.jsx- app.jsx- contact.jsx- posts.jsx- post.jsx/node_modulesindex.htmlpackage.jsonposts.js ----> 데이터webpack.config.js2) index.html 3) package.json{ "name": "router", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test.. 공감수 3 댓글수 0 2018. 8. 16.
[ReactJs] react router 처음부터 만들기 react router 처음부터 만들기 1. 정의- 리액트에서 사용할 라우터를 직접 만들어 본다. 2. 프로젝트 설정1) 폴더 구조/js-bundle.js/jsx- app.jsx-router.jsx/node_modulesindex.htmlpackage.jsonwebpack.config.js2) package.json { "name": "naive-router", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/.bin/webpack -w" //webpack 빌드스크립트 추가 }, "k.. 공감수 1 댓글수 0 2018. 8. 16.
[ReactJs] 서버사이드 렌더링 서버사이드 렌더링 0. 폴더구조 /components - about.jsx /views - about.hbs index.js package.json 1. 서버 1) index.js const fs = require('fs') const express = require('express') const app = express() const errorHandler = require('errorhandler') const http = require('http') const https = require('https') const httpPort = 3000 const httpsPort = 443 const React = require('react') require('babel-register')({ presets.. 공감수 1 댓글수 0 2018. 8. 12.
[ReactJs] node.js를 이용한 react 컴포넌트 렌더링 node.js를 이용한 react 컴포넌트 렌더링 1. 정의- Node.js 를 이용하여 HTML 을 생성한다 2. 폴더구성- /node - email.js : react 컴포넌트 - index.js : node.js 소스 3. index.js const ReactDOMServer = require('react-dom/server') const React = require('react') const Email = React.createFactory(require('./email.js')) const emailString = ReactDOMServer.renderToString(Email()) const emailStaticMarkup = ReactDOMServer.renderToStaticMarkup(E.. 공감수 1 댓글수 0 2018. 8. 12.
[ReactJs] 리엑트 폼 요소 정의 리엑트 폼 요소 정의 1. 리엑트의 폼 속성- 일반적으로 리엑트는 속성을 변경할 수 없다. 그러나 폼 요소의 속성은 변경이 가능하다.- value, checked, selected 라는 대화형 속성을 두어서 폼 요소를 특별하게 다루고 있다- value : , , - checked: 의 type="checked" 또는 type="radio"- selected: 의 2. 요소1) type="text"- value를 변경가능 속성으로 한다- 일반적인 텍스트 영역이다.- onChange 이벤트 핸들러를 사용한다. 2) type="checkbox", type="radio" - checked 혹은 selected를 변경 가능 속성으로 한다.- value 속성은 하드코딩을 한다A. radio 사용하기import Re.. 공감수 1 댓글수 0 2018. 8. 7.
[ReactJs] 리액트 폼 이벤트 설정 리액트 폼 이벤트 설정 0. 제어컴포넌트와 비제어 컴포넌트- 제어컴포넌트 : 컴포넌트 내부 상태와 뷰를 항상 동기화 시키는 방식, React가 값을 통제하거나 설정한다. (value 속성존재) - 비 제어컴포넌트: 간단한 폼을 작성한다면 비 제어 컴포넌트를 추천한다. 제어와 다르게 값을 react가 통제하지 않는다 1. 제어 컴포넌트 1) 기본사용- react 에서는 기본적으로 단방향 바인딩을 이용하여 간결함을 유지한다 class Form extends React.Component{ constructor(props){ super(props) this.state = {title:'aaa'} } handleChange(event){ this.setState({title: event.target.value}).. 공감수 1 댓글수 0 2018. 8. 5.
[ReactJs] 리액트 이벤트와 컴포넌트 데이터 교환 리액트 이벤트와 컴포넌트 데이터 교환 1. 클릭 이벤트 와 상태 저장 컴포넌트 class Count extends React.Component{ constructor(props){ super(props) this.state = { counter : 0 } } handleClick(event){ this.setState({counter:++this.state.counter}) } render(){ return( Don't click me {this.state.counter} ) } } ReactDOM.render( , document.getElementById('app') ) - 이벤트와 상태를 같이 사용함으로 동적인 UI 구성이 가능해진다 2. 클릭 이벤트 와 상태 저장/비저장 컴포넌트class Cont.. 공감수 2 댓글수 0 2018. 8. 5.
[ReactJs] 리액트 컴포넌트 라이프사이클 리액트 컴포넌트 라이프사이클 1. 컴포넌트 라이프사이클 이벤트 - 생성된 컴포넌트를 조금더 세밀하게 제어할 수 있도록 라이프 사이클 이벤트를 사용한다. 2. 라이프사이클 종류1) 마운팅(mounting) 이벤트- React 엘리먼트를 dom노드에 추가 할 때 발생한다.- 이벤트를 한번만 실행한다2) 갱신(updating) 이벤트- 속성이나 상태가 변경되어 React 엘리먼트를 갱신 할 때 발생한다- 이벤트 여러번 발생3) 언마운팅(unmounting) 이벤트- dom에서 제거 될 때 사용된다- 한 번만 실행된다.3. 라이프사이클 사용방법 class Content extends React.Component{ componentWillMount(){ console.log(ReactDom.findDOMNode(.. 공감수 1 댓글수 0 2018. 8. 5.
[ReactJs] 리액트 상태저장 컴포넌트와 상태비저장 컴포넌트 리액트의 상태저장 컴포넌트와 상태비저장 컴포넌트 1. 컴포넌트 상태- react 에서 상태는 컴포넌트의 변경 가능한 데이터 저장소다.- 속성과 상태는 뷰를 갱신하기 위하여 사용하지만 서로다른 목적을 가지고 있다.- 상태는 동적으로 뷰를 렌더링 할 때 사용한다 2. 속성(props) vs 상태(state)1) 접근 방법- 속성 : this.props.NAME- 상태 : this.state.NAME2) 전달 방법- 속성: 부모에서 자식 컴포넌트로 전달해야만 render()에서 사용 가능하다- 상태: 현재 컴포넌트에서 변경하여 render() 에 전달 가능하다 3. 상태저장 컴포넌트1) 초기 상태 설정- render() 에서 상태 데이터를 사용하려면 상태를 초기화 해야한다.- construtor()를 사용한다.. 공감수 1 댓글수 0 2018. 8. 5.
[git] gitignore 설정이 작동안 할 때 gitignore 설정이 작동안 할 때 1. 원인- .gitignore 설정파일을 생성한 후 ignore할 값들을 생성했지만 제대로 작동하지 않는다2. 해결- 기존 캐시된 값을 지우면 설정된다 git rm -r --cached . git add . git commit -m "delete cached" 공감수 1 댓글수 0 2018. 8. 1.
[ReactJs] webpack + babel + reactjs 환경셋팅하기 webpack, babel, reactjs 환경셋팅하기 1. 프로젝트 폴더 만들기- 기본적으로 node 와 npm 이 설치되어 있어야 한다.1) 폴더 구성 mkdir react-test cd react-test npm init -y - npm init 을 통해 package.json 파일을 생성한다mkdir dist cd dist touch index.html - build 후 생성된 파일을 관리 하기 위하여 dist 폴더를 생성한다 - bundle.js 는 webpack을 통해 빌드된 파일이다. 2. webpack 설치하기- webpack 을 이용하여 모듈화하고 빌드를 진행한다.npm install --save-dev webpack webpack-dev-server webpack-cli 1) packa.. 공감수 3 댓글수 0 2018. 7. 29.
[jQuery]jQuery의 ajax - 전역 ajax 이벤트 처리 jQuery의 ajax - 전역 ajax 이벤트 처리 - 전역 ajax 이벤트는 페이지 수준에서 모든 ajax요청에 대한 공통의 이벤트 처리 기능을 지원한다.- 개별적인 ajax 요청이후 전역 ajax 이벤트가 발생된다1. 종류- ajaxStart(handler) : 처리 중인 ajax 요청이 없는 상태에서 처음으로 ajax 요청이 일어날 때 발생되는 이벤트. 이미 ajax 요청이 진행 중인 상태에서 새로운 ajax 요청을 하는 경우에는 이 이벤트가 발생하지 않는다 handler: function(){} - ajaxSend(handler): 각각의 ajax 요청이 전송되기 전에 발생되는 이벤트, 현재 ajax 요청이 진행 중이라 하더라도 매번 이벤트가 발생handler:function(event, xhr.. 공감수 2 댓글수 0 2018. 7. 17.
[jQuery]jQuery의 ajax - 헬퍼 함수 jQuery의 ajax - 헬퍼 함수 - 입력데이터가 많을 때 사용할 수 있다 1. 종류- serialize() : 폼 요소를 선택하고 호출 했을 때 입력 필드의 name특성을 이용하여 인코딩된 폼 데이터를 생성- serializeArray(): 폼 요소를 선택하고 호출했을 때 입력 필드의 name특성을 이용하여 객체로 구성된 배열을 생성- $.param : 객체의 배열이나 객체를 파라미터로 전달하여 인코딩된 폼 데이터를 생성한다. 2. 사용- serialize(), serializeArray() 는 반드시 폼 요소를 선택해야한다. 공감수 1 댓글수 0 2018. 7. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.