본문 바로가기

분류 전체보기

 (179)
[#. React] Functional Component 함수형에서 사용할 수 있게 된 React Hooks 정리하기 React Hooks v16.8에 도입 기존 React에서 Class Component에서만 사용 가능하던 state, lifecycle 기능을 Functional Component에서도 useState, useEffect로 사용할 수 있도록 추가된 기능 이 state, lifecycle 기능 때문에 React-Native로 cuckoo 앱을 만들 때는 Class Component를 사용했었다 클래스형, 함수형을 코드로 확인해보자 Class Component vs Functional Component ① Class Component import React, { Component } from 'react'; import Axios from 'axios'; export default class Shab ex..
[#. Markdown Editor] Markdown Editor for Chrome 크롬 마크다운 에디터 github 프로젝트에서 README.md 파일을 관리하려고 하는데 수정하고 확인하고 수정하고 확인하는 과정이 번거롭다면 markdown editor를 사용하면 된다 vs code로도 확인이 가능하다고 하지만 나는 atom을 사용하고 있고 최대한 간편한 방법의 markdown editor를 사용하고 싶다 그래서 크롬 확장프로그램을 사용할 것이다 chrome.google.com/webstore/detail/markdown-editor-for-chrom/dkpldbigkfcgpamifjimiejipmodkigk?hl=ko Markdown Editor for Chrome Create and view markdown files from any were. Simple and easy. A Github Flavor..
[#. Git] cherry-pick으로 다른 branch에서 원하는 commit 커밋만 가져오기 branch를 파서 힘들게 작업했는데 기획이 바뀌거나 하는 이유로 반영할 수 있는 커밋이 한두 개밖에 되지 않을 때가 있다 이럴 때 원하는 커밋 한두 개만 가져와서 dev branch에 반영해보자 git에서 cherry-pick이라는 걸 사용할 수 있다 ① branch가 두 개 있다고 가정하자 feature/signup feature/signin feature/signin branch에 있는 커밋 하나만 가져오려고 한다 ② commit 커밋 id 가져오기 git checkout feature/signin git log --abbrev-commit ````` commit 89c1234 ````` 89c7823 형태 => 커밋 ID를 가져온다 @ git의 commit id는 SHA1 알고리즘으로 만들어진 해..
[#. js-cookie] Cookie package 쿠키 패키지 사용해서 쿠키 set/get 하기 쿠키 사용하기 이전 글에 쓴 HTTP의 특징(비연결성, 상태없음) 때문에 쿠키를 사용하려고 한다 쉽고 간편하게 사용하기 위해 cookie.js 라이브러리는 사용해보자 ① cookie.js 설치 ⑴ NPM으로 설치 npm i js-cookie ⑵ CDN으로 사용 둘 중 편한 방법으로 사용한다 ② set/get // default 사이트 전체에서 확인 가능 Cookies.set('name', 'value') // 7일 뒤 쿠키 만료 Cookies.set('name', 'value', { expires: 7 }) // 7일 뒤 쿠키 만료 + 현재 경로에서만 확인 가능 Cookies.set('name', 'value', { expires: 7, path: '' }) Cookies.get('name')// 'value' Coo..
[#. HTTP] HTTP의 특징과 쿠키(cookie), 세션(session)의 차이 쿠키(cookie), 세션(session)의 차이 사용하는 이유 HTTP 프로토콜의 특징이자 약점인 Connectionless(비연결성), Stateless(상태없음, 무상태) 을 보완하기 위해 사용한다 HTTP 특징 ① Connectionless(비연결성) 클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어 버리는 성질 ② Stateless(상태없음, 무상태) 클라이언트의 상태 정보를 가지지 않는 서버 처리 방식 => 이렇게 HTTP의 Connectionless, Stateless 특징 때문에 발생하는 문제가 있다 쇼핑몰 접속 로그인 상세 페이지 로그인 장바구니 로그인 주문 로그인 … 상태 정보를 가지고 있지 않기 때문에 로그인 무한 반복을 수행..
[#. JavaScript] 정규표현식을 이용해서 input 입력 폼에서 소수점 첫째 자리까지만 입력할 수 있도록 막기 input에서 소수점 첫째자리까지만 입력 가능하게 하려고 한다 자바스크립트 정규식을 이용해서 막아보자 $("#num").off("keypress").on("keypress",function(e){ var num = $("#num").val(); var _pattern1 = /^\d*[.]\d{1}$/; if (_pattern1.test(num)) { return false;// 현재 value 값이 소수점 첫째 짜리 숫자라면 더 이상 입력 X } }); 정규식.test(str) 문자열과 정규식의 일치 여부를 true, false로 반환한다
[#. JavaScript] chart.js doughnut(donut) chart 원형 차트 생성, 사용하기 도넛 모양 원형 차트를 만들려고 합니다 chart.js를 사용하겠습니다 www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 사이트로 들어가면 설치부터 사용 방법, 사용 가능한 옵션들까지 상세하게 정의되어 있다 npm, Bower, CDN 등 여러 가지 방법으로 설치하거나 가져와서 사용할 수 있다 나는 CDN으로 가져와서 사용했다 ① CDN으로 chart.js 사용 ② char..
[#. JavaScript] Math.pow(a, b) 제곱 구하기 엑셀에서 3^2로 표현되는 제곱 구하는 함수 Math.pow(밑, 지수) 제곱 Math.pow(3, 2)// 9 세제곱 Math.pow(5, 3);// 125 네제곱 Math.pow(3, 4)// 81

티스토리툴바