티스토리

tenchoi

검색하기

블로그 홈

tenchoi

yeolceo.tistory.com/m

TenChoi's tech blog

구독자: 7

방명록 방문하기

주요 글 목록

React, Vue, Html 등 구분없는! CSS로 font 적용하기-YEOL Css에서 font를 적용할 수 있게끔 지원하는 기능이 있습니다. 그래서 html, vue, anguler 이런 구분이 없이 적용할 수 있습니다. 필자는 React를 주로 쓰기 때문에 React에서 font를 적용하는 예시를 보여드립니다. (다른 프런트 언어를 사용하셔도 이해하기 쉬운 글입니다) -폰트 적용하는 방법 1. npm 명령어를 사용하여 React 프로젝트를 만들어줍니다. npm create-react-app font-test // 이름은 편한대로 설정해주세요. 그리고 App.js 파일로 이동하여 화면에 보이는 부분을 깔끔하게 정리해줍니다. 보기 편하기 위해 폰트 사이즈를 50px로 설정했습니다. 2. 눈누라는 무료 폰트 사이트를 이용했습니다. 원하는 폰트 하나를 정해서 클릭해주세요. 저는 산돌.. 공감수 0 댓글수 0 2021. 2. 3.
정말 쉬운! React 에서 RTSP 사용하기 2 -YEOL -해당 글은 streamedian 사이트의 rtsp 기술을 참조합니다. 윈도에서 개발하시는 분들이 RTSP 하시기에 적합하며 실무라면 라이선스 구매나 리눅스 환경에서 실행을 위한 공부가 필요할 수 있습니다. -필요 프로젝트 준비 React의 프로젝트 내에서 Rtsp를 실행할 수 있게끔 해야겠죠? [정말 쉬운! React에서 RTSP 사용하기 1 -YEOL]에서 사용했던 Streamedian 프로젝트를 준비합니다. 그다음 npm crate react-app [프로젝트명]을 통해 새 프로젝트를 만들어줍니다. Streamedian 프로젝트를 살펴봅시다! 이 프로젝트에서 Rtsp실행에 관계된 파일들을 React 프로젝트에 옮겨주어야 합니다. free.player.1.8.4.js 는 소켓 통신으로 Rtsp를 가능.. 공감수 1 댓글수 1 2021. 1. 4.
쉽게 배우는 React 로 달력 만들기 with Moment.js -YEOL 이번엔 react를 사용한 달력 알고리즘을 만드려고 합니다. 완성형이 예쁘다기보단 구조를 보여드리기 위함을 참고해주세요!! -Moment.js 란 javaScript에서 날짜 데이터 조작을 하기 쉽게 도와주는 라이브러리입니다. (공식 사이트를 참조하시면 학습에 더욱 도움이 됩니다.) -React.js 에서 Moment.js 사용 먼저 다음 명령어 npm create-react-app [프로젝트명]를 사용하여 react 파일을 생성해줍니다. (기존 프로젝트가 있다면 쓰셔도 무방합니다.) moment.js 는 저희가 캘린더를 만들기 위한 핵심 라이브러리입니다. CMD에서 오른쪽의 명령어를 통해 인스톨해주세요 npm install moment --save 프로젝트를 생성하셨다면 App.js 파일을 아래와 같이.. 공감수 5 댓글수 8 2021. 1. 2.
초간단! React 에서 jQuery 사용하기 -YEOL 정말 간단하게 배워보는 react에서 jQuery 사용하기입니다. 1. React Project setting 먼저 안 쓰는 react 프로젝트가 있으시면 사용해주시고 없다면 아래의 이미지를 참조하세요. create react-app [파일명] 명령어를 통해 프로젝트를 생성해주세요. 프로젝트 생성을 완료하셨다면 npm i jquery --save 명령어를 사용하세요. 해당 프로젝트에 jquery가 인스톨됩니다. (구글에서 npm i jquery를 검색하셔도 나옵니다 ) 자 여러분도 프로젝트를 실행하셨나요? 그럼 바로 에디터로 해당 프로젝트를 살펴봅시다. (다들 vscode 쓰시지만 저는 atom 도 쓰는 편입니다 ㅎㅎ..) 2. react class component에서 사용법 App.js를 보고 있는 .. 공감수 2 댓글수 2 2020. 12. 30.
Uncaught SyntaxError: Unexpected token '<' -YEOL 이 미친 에러를 알게 되었습니다. 저는 react에서 이문제가 일어났습니다. 코드 2에서 위와 같은 에러가 떴고 찾아본 결과 코드 1이 있으면 해결이 됩니다. React App -코드 1 - 해결용 코드 -코드 2 - 문제의 스크립트 - 알아본 결과 base 요소는 페이지 내의 모든 상대 url의 기준을 잡아주는 요소입니다. 제 경우에는 url을 변경하면 다른 페이지를 실행하는 기능이 있었는데 그중 한 페이지만 이런 문제가 나왔습니다. 내부 코드를 전부 지워도 같은 결과가 나오더군요. 다른 react 파일은 이런 경우가 없었습니다. 즉 특수한 경우에 일어나고 모든 url이 아닌 미정의 url 에서 base url 이문제가 되는 경우가 생깁니다. 공감수 1 댓글수 0 2020. 12. 23.
react 에서 express 로 값 전달하는 법 2 -YEOL 이설명만 하고 바로 리액트 설치하겠습니다! react에서 express로 값을 넘겨주려면 2가지 라이브러리를 react에 설치해야 합니다. 바로 axios와 http-proxy-middleware입니다. -axios React에서 express로 get이나 post를 사용하여 값을 넘겨야 하는데 그때 필요한 라이브러리가 axios입니다. -http-proxy-middleware react에서 express로 restAPI (ex: get이나 post를 사용하여 값 전달하는 기능) 사용하여 값을 넘겨줄 때 node.js 와 react.js는 포트 숫자가 다릅니다. 이경우에 http-proxy-middleware를 사용하여 다른 포트여도 값을 받아줄 수 있게 설치해줍니다. -CRA를 통한 React 파일 생.. 공감수 1 댓글수 0 2020. 11. 10.
정말 쉬운! React 에서 RTSP 사용하기 1 -YEOL -해당 글은 streamedian 사이트의 rtsp 기술을 참조합니다. 윈도에서 개발하시는 분들이 RTSP 하시기에 적합하며 실무라면 라이선스 구매나 리눅스 환경에서 실행을 위한 공부가 필요할 수 있습니다. -RTSP Real time streaming protocol의 스트리밍 서버를 실시간으로 제어하기 위해 설계된 프로토콜입니다. 예를 들면 cctv 같은 실시간 영상을 재생할 때 RTSP나 HLS 등의 프로토콜이 적용됩니다. -Streamdian Streamdian이란 개발자의 편의성을 위해 웹소켓을 통한 rtsp 스트리밍을 지원해주는 비디오 플레이어입니다. 바로 검색해서 공식 홈페이지를 참조해줍니다. 먼저 소켓통신을 위한 준비를 시작합시다. 홈페이지의 첫 화면은 아래와 같을 것입니다. 붉은 선이 그.. 공감수 2 댓글수 0 2020. 10. 20.
세상 간단한 redux saga 함수 -YEOL Saga란 react redux 패턴에서 redux가 서버값을 가져오는 부분을 실행하면 서버는 값을 토해낼 때까지 지연이 생깁니다. 그래서 그지 연을 기다렸다가 값을 받으면 전달하게끔 동기 처리를 해야 하는데 그 행위를 saga가 대신해줍니다. 능통한 이해를 위해선 js의 generator 문법을 숙지할 필요가 있습니다. Saga 함수 목록 put : type에 선언된 action을 dispatch 합니다. ex ->CHECK 라는 이름을 가진 action을 dispatch 합니다. yield put({ type:'CHECK', payload:response.data, }); delay : 시간을 설정하고 시간이 지나면 resolve를 실행하는 promise 객체를 반환합니다. ex - 이렇게하면 해당 .. 공감수 1 댓글수 0 2020. 9. 10.
쉽게 이해하는 react의 input 정리 -YEOL -input이란 키보드 입력을 가능하게 해 주는 html 태그 -JSX에서의 사용법 input의 값을 변경하고 변경값을 알기 위해서는 절차가 필요합니다. 그중에서 아래와 같은 경우는 input의 e.target.value로 입력한 값을 받아주는 동시에 handleChange를 통해 state값을 이용하여 입력받은 값을 value 값에 대입하고 setState를 통해 바로 변경해주는 코드입니다. import React from 'react' export default class App extends React.Component { state = { value:'' } handleChange = (e) => { this.setState({ value: e.target.value }); } render() {.. 공감수 0 댓글수 0 2020. 8. 10.
React의 Redux 데이터 구조 이해하기 2- YEOL 지금까지 잘 따라와 주셔서 감사합니다. 이제 카운터의 컨테이너를 만들 것입니다. 그전에 흐름을 한 번 더 살펴봐주세요. 이해가 잘 간다면 다음으로 진행해주세요. #데이터의 흐름 컴포넌트(View)의 버튼(어떤 기능)을 클릭합니다. 그러면 컴포넌트의 데이터를 관리하는 용도의 컨테이너에서 클릭된 기능을 dispatch (action)합니다. 클릭된 기능은 액션 타입으로 구분해줍니다. 액션이 실행됐다면 그에 맞는 타입의 리듀서가(모듈) 클릭된 기능을 이행합니다. 이행한 값은 스토어에 저장됩니다. 스토어에 새로운 값이 저장되면 View를 리 렌더링 해줍니다. #카운터 컨테이너 가장 처음 만들 것은 폴더입니다. src경로에 containers 폴더를 만들어줍니다. 만들었을 때 컴포넌트, 컨테이너, 모듈 폴더가 각.. 공감수 0 댓글수 0 2020. 6. 17.
React의 Redux 데이터 구조 이해하기 1- YEOL 이번 프로젝트는 리액트에서 주로 사용되는 데이터 구조인 리덕스에 대해서 알아보려 합니다. 이해하기 쉬운 카운터를 이용해서 설명할 예정입니다. 제가 느낄 때 기본 패턴보다 Ducks 패턴이 더 편리하여 Ducks패턴을 사용하였습니다. *Ducks 패턴이란 리듀서 함수, 액션 타입 변수, 액션 생성 함수를 하나의 파일에 작성하는 방식입니다. (이번 프로젝트에서는 모듈이라는 폴더를 생성합니다. counter 컴포넌트가 있다면 위의 3가지를 하나의 파일에 몰빵 합니다. ) # 데이터 구조 및 흐름 기초적인 구조를 먼저 설명하고 넘어가겠습니다. 자세한 부분은 진행하면서 풀어가겠습니다. 컴포넌트 : 모든 웹에 보이는 뷰를 담당합니다. 보이기만 하는 껍데기입니다. 컨테이너 : 컴포넌트에서 보이는 기능들을 여기서 처리.. 공감수 1 댓글수 0 2020. 6. 17.
react Context API 이해하기 - YEOL 이번에 설명해볼 내용은 Context API에 관해서입니다. redux와 같은 상태 관리를 위한 라이브러리입니다. react의 내장 라이브러리로서 사용 가능합니다. create-react-app으로 리액트 프로젝트를 하나 생성해줍시다. 후에 import React, {createContext, useState} from 'react'; const ColorContext = createContext({color:'pink'}); export default ColorContext; 위와 같은 js 파일을 하나 생성합니다. createContext는 초기값 설정이라고 보시면 됩니다. json 타입으로 color를 pink로 초기화해주었습니다. import React from 'react'; import Col.. 공감수 0 댓글수 0 2020. 6. 15.
이보다 더나은 설명은 없다! React에서 Router 쓰기! -YEOL -React에서 Router란 SPA(싱글 페이지 어플리케이션)에서 경로 설정만으로 다른 화면을 보여주는 기술입니다. html 파일로 예를 들어보겠습니다. html에선 보여줄 화면이 3개라면 html 파일 3개가 각각 경로가 되어 화면에 보여줍니다. 하지만 SPA는 싱글 페이지 이기 때문에 화면이 하나입니다. 그러니까 router 같은 경로 설정을 이용하여 보여주는 화면을 다르게 설정하는것입니다. [ router기본 기능 및 qs, params, history 설명입니다. 자주 쓰는 기능을 다뤘습니다. ] -React에서 바로 실천해보기 npm install create react-app [원하는 프로젝트 명] yarn add create react-app [원하는 프로젝트 명] 명령 프롬프트에서 원하는.. 공감수 0 댓글수 0 2020. 6. 12.
react 에서 css 및 Sass에 관한 고찰 -YEOL 이 밑으로 css에 관한 새로운 지식에 관한 나열입니다. 이런 것도 있구나 하고 봐주시게끔 간결한 페이지로 만들었습니다. $red: #fa5252; $orange:#fd7e14; $yellow:#fcc419; $green:#40c057; $violet:#7950f2; @mixin square($size){ $calculated:32px * $size; width:$calculated; height:$calculated; } .SassComponent{ display:flex; .box { background:red; cursor:pointer; transition: all 0.3s ease-in; &.red{ background: $red; @include square(1); } &.orange{ bac.. 공감수 0 댓글수 0 2020. 6. 11.
쉽게 쉽게 hooks 사용하기2! -YEOL hooks를 쉽게 사용해봅시다. 일단 실행부터 해보고 구조를 뜯어보는 방식이 이해하기 쉽다고 생각합니다. 이전에 했던 reducer의 복습을 한번 할 겁니다. useReducer 기출 변형 import React, {useReducer }from 'react'; function reducer(state, action){ console.log(`action의 name ->${action.name}`); console.log(`action의 value ->${action.value}`); return{ ...state, [action.name]:action.value }; } const App =()=>{ const [state, dispatch]= useReducer(reducer, {user:'' , n.. 공감수 0 댓글수 0 2020. 6. 11.
쉽게 쉽게 hooks 사용하기! -YEOL hooks 란 react 16.8 버전부터 도입된 기능으로 함수형 컴포넌트에서 할 수 없었던 상태 관리를 가능하게 해주는 내장 라이브러리입니다. useState useEffect useReducer 설명합니다. create react app을 이용하여 새로운 프로젝트를 만들어 줍시다! 먼저 useState를 설명드리겠습니다 딱 한 페이지 분량으로 설명합니다. 클래스형 컴포넌트의 setState와 동일하게 값이 변경되면 리 렌더링을 해줍니다. 하지만 useState는 사용할 때 요렇게 사용한다. 간단하게 짜 봤는데 설명드리자면 import React , {useState} from 'react'; const App =()=>{ const [data , setData] = useState(0); return.. 공감수 0 댓글수 0 2020. 6. 11.
react 에서 express 로 값 전달하는 법 1 -YEOL 이 글이 필요하신 분은 이미 react.js 와 node.js의 차이에 대해 아실 거라 믿고 진행하겠습니다. 1, 2 탄으로 정리해서 수정하였고 이전의 글에서 보완 완료했습니다! 3탄은 예정! 1은 node.js 2는 react 파트로 나뉩니다. node.js를 아신다면 아래 링크로 넘어가 주세요. www.yeolceo.com/57 react 에서 express 로 값 전달하는 법 2 -YEOL 이설명만 하고 바로 리액트 설치하겠습니다! react에서 express로 값을 넘겨주려면 2가지 라이브러리를 react에 설치해야 합니다. 바로 axios와 http-proxy-middleware입니다. -axios react에서 express로 get이.. www.yeolceo.com 자 원하시는 부분 바로 들.. 공감수 1 댓글수 0 2020. 6. 5.
react.js 초간단 설치 및 실행 방법 -YEOL node.js를 사용하고 에디터는 atom을 사용합니다. (ide 다른 거 쓰셔도 무방합니다.) Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. javaScript 개발을 위한 환경이라는 의미입니다. V8 JavaScript engine What is V8? V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, m.. 공감수 0 댓글수 0 2020. 6. 5.
간단하게 배우는 react로 ant 사용하기(Dashboard) 5 -YEOL 간단하게 배우는 dashboard 마지막 글입니다. ant design의 기본기를 익히시기에 편한 글이었기를 바랍니다. 측면 메뉴바 측 사이더를 만들어주기 위해 components에서 Menu를 찾으시면 됩니다. 가장 첫 번째 나오는 Menu컴포넌트의 코드를 보고 내용을 확인하시길 바랍니다. 간단히 요약한 코드입니다. 메뉴를 사용한다는 의미로 태그를 만들었고 그 안에 아이템으로 DashBoard를 설정했습니다. 큰 메뉴의 첫 번째에는 DashBoard 가 뜹니다. 그아래 SubMenu를 설정하는데 그 내부를 그룹화하는 ItemGroup이 있습니다. 메뉴를 그룹화하는데 타이틀 -> 즉 이름을 저런 이름의 그룹으로 만들어라 하는 내용입니다. SubMenu안에 아이템을 넣어주면 아래와 같은 모양이 완성될 것입.. 공감수 0 댓글수 0 2020. 5. 26.
간단하게 배우는 react로 ant 사용하기(Dashboard) 4 -YEOL 이번에는 사이드 바를 제외한 layout 설정을 마무리 하겠습니다. layout 컴포넌트에 코드를 토대로 화면을 코딩합니다. 레이아웃은 헤더(상단 메뉴) , 사이더 (측면 메뉴) 컨텐츠( 중앙 내용) , 풋터 (하단에 설정할 내용) 으로 정리합니다. 씬은 처음부터 나눠놓고 시작하는 것이 효율적입니다. 스타일 설정은 사이더를 보시면 저런 식으로 색을 넣을 수 있습니다. red를 넣어줘서 구분을 줍니다. 화면을 보시면 글자가 잘 안 보이시고 크기도 작습니다. 그러니 글자 크기를 변경하러 갑니다. 타이틀을 이용할 건데 레벨이 크기를 의미합니다. 편하신 거 가져오셔서 헤더 사이에 넣을 겁니다. import는 꼭 해줍시다. (from 'antd'가 겹치면 import { Layout , Typography} fr.. 공감수 0 댓글수 2 2020. 5. 26.
간단하게 배우는 react로 ant 사용하기(Dashboard) 3 -YEOL layout태그에 들어가셨다면 가장먼저 보이는 화면은 레이아웃일겁니다. 저희는 대쉬보드에 가까운형태인 4번째 레이아웃을 사용할 것입니다. 이전과 같이 밑으로 스크롤을 내리고 를 클릭하여 코드를 확인합니다. 동그라미를 해놨습니다. 4번째 레이아웃을 레이아웃부터 레이아웃까지 복사한 후 react 앱에 붙여넣습니다. import는 항상 확인해줍시다. 아래와 같은 코드를 react에 입력해주시면 됩니다. 이런화면이 뜨셨다면 완성입니다. 공감수 0 댓글수 0 2020. 5. 25.
간단하게 배우는 react로 ant 사용하기(Dashboard) 2 -YEOL ant design 사이트에서 컴포넌트를 이용할 생각입니다. ant를 이용하는 이유는 제가 직접 짜지 않기 위해서니까요. 밑의 url사이트는 ant사이트에서 components를 바로 누르면 나오는 상태입니다. 버튼이 가장 먼저 등장합니다. https://ant.design/components/button/ Button - Ant Design If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button. ant.design 밑으로 스.. 공감수 0 댓글수 0 2020. 5. 25.
간단하게 배우는 react로 ant 사용하기(Dashboard) 1 -YEOL Ant Design 에 대해 검색하고 들어오셨다면 프론트엔드에 어느 정도 이해가 있으실 거라 생각합니다. (모르시겠다면 다음글부터 짚어가면서 설명하겠습니다!!) 간단히 설명드리자면 ant란 제품의 view를 쉽게 설계하기 위한 라이브러리를 사용하는 개념으로 bootstrap을 사용해보셨다면 유사한 사용방식입니다. 다만 앵귤러, 뷰, 리액트를 지원하는 라이브러리입니다. 사용 방법 npm install -g react-create-app 로 리액트 앱을 만드는 npm을 인스톨 하셨다면 npx create-react-app 을 명령프롬프트에서 실행해주셔야합니다. - npx npm의 차이점 npm 은 아시다시피 노드의 패키지 매니져로서 필요한 모듈의 설치를 도와줍니다. 다만 npm의 5.2버전부터는 npx라는 .. 공감수 0 댓글수 0 2020. 5. 25.
js 몰랐던 문법 a[b] = "c" 면 console.log(a) 는{b:"c"} -YEOL -에러이미지 jsx 문법인 거 같은데 이런 식으로 표현하는걸 처음 봐서 글로 기록한다. 변수를 파싱한 다른 변수에 배열 값으로 넣고 문자열을 넣으면 json형태로 출력한다. nextState 그대로 setState도 가능하다. 이런 식으로 json형태로 쉽게 만들고 사용하는 경우가 꽤 보입니다. let userName="test"; let nextState={} nextState[userName] = "value"; console.log(nextState); //결과값 {test: 'value'} 공감수 0 댓글수 0 2020. 5. 21.

문의안내

티스토리
로그인
고객센터

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