Life goes slowly...

[React] React.js의 Hooks란 무엇인가

React.js의 Hooks React에서 Hooks은 React의 새로운 기능으로써 React 16.8 버전에서 새로 추가된 기능입니다. state, component에 대한 모든 것을 바꿔놓은 기능입니다. Hooks을 이용하여 기존의 함수형 Compontent에서도 클래스형 Compontent 작업을 할 수 있게 되었습니다. 기존의 클래스형 Compontent가 가지고 있었던 복잡성, 재사용성의 단점들까지 모두 해결하기도 했습니다. 함수형 Compontent에서 사용되는 Hook 기능중에서는 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정할 수 있는 useEffect의 함수가 있습니다. React.js의 Hooks 사용하며 없어진 문제점 1. Compontent 사이에서 상태와 관..
프로그래밍/React.js 2022. 1. 17. 15:06

[React] React.js의 useEffect() 함수

React.js의 useEffect() 함수 React에서 컴포넌트를 작성할 때에는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하게 되지만 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없는데 이때 사용되는 함수가 useEffect() 함수입니다. 컴포넌트가 화면에 나타나거나, 사라질 때 또는 업데이트될 때에 렌더링을 해주는 함수입니다.(컴포넌트가 마운트 될 때 실행되는 함수입니다.) useEffect() 함수의 가장 기본적으로 사용될 때의 예시입니다. //렌더링이 완료될때마다 실행 useEffect(() => { }); //처음 렌더링이 완료된후 text값이 변경될때마다 실행 useEffect(() => { },[text]); //처음 렌더링이 완료된후에만..
프로그래밍/React.js 2022. 1. 6. 13:27

[React] error command failed with exit code 1 [React start 에러]

Error command failed with exit code 1. Error 발생 React 프로젝트에서 yarn start 또는 npm start으로 서버를 시작할 때에 발생하는 에러입니다. 설치되어 있는 node의 문제가 아닌 yarn 또는 npm의 문제로 보여집니다. yarn을 다시 설치하여 확인을 해보는 것이 좋습니다. 또는 yarn을 다시 설치 후에 서버를 다시 기동 해보도록 합니다.
프로그래밍/React.js 2022. 1. 5. 14:29

[Javascript] 패턴형식 정규식 체크하기(전화번호, 이메일)

자바스크립트(Javascript)의 test() 함수 자바스크립트(Javascript)의 test() 함수를 사용하여 주어진 문자열이 정규 표현식을 만족하는지 판별하여 그 여부를 true 도는 false로 반환하여 패턴 형식을 체크하면 됩니다. 일단 정규 표현식이란 "특정 패턴의 문자열"을 찾기 위한 표현 방식이며 형식 언어(Formal Languange)라고도 합니다. 가장 기본적으로는 전화번호, 이메일의 패턴을 찾을 수 있습니다. // 패턴 정규표현식 //전화번호 정규식표현식 var telRegex1 = /\d{3}-\d{4}-\d{4}/; //(\d는 숫자를 의미하고, {} 숫자갯수를 의미합니다.) //휴대폰 정규식표현식 var telRegex2 = /^01([0|1|6|7|8|9])-?([0-9]..
프로그래밍/Javascript 2021. 12. 21. 10:31

[jQuery] 체크박스(checkBox)에 체크된 행(Row) 삭제하기

자바스크립트의 제이쿼리(jQuery)를 사용하여 목록 List의 데이터중에 체크박스(checkBox)에 체크된 행(Row)을 삭제하는 방법입니다. 체크박스(checkBox)의 체크된 행 삭제하기 삭제 선택 No. 아이디 이메일 1 Test01 Test01@gmail.com 2 test02 test02@naver.com 3 test03 test03@gmail.com 가장 먼저 체크박스(checkBox) 목록 데이터를 반복문으로 체크된 데이터만 조회하여 관련된 상위 엘리먼트(parentElement)를 확인하여 관련돼 행(Row)을 삭제하면 됩니다.
프로그래밍/Javascript 2021. 9. 29. 14:48

[jQuery] 시간 지연함수 - .delay() 함수

자바스크립트의 제이쿼리(jQuery)를 사용하여 일정 시간 뒤에 콜백 함수를 실행하는 방법에는 .setTimeout() 함수를 사용하게 됩니다. .setTimeout() 함수 이외에도 일정 시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 함수로 .delay() 함수가 있습니다. jquery(제이쿼리)의 .delay() 함수 jQuery(제이쿼리)의 .delay() 함수는 일정 시간이 경과한 후에 다음 코드를 강제적으로 실행하도록 지연시간을 생성하는 함수입니다. 단 큐를 가진 애니메이션에만 적용되는 함수입니다. 실행 중인 함수를 정해진 시간만큼 중지하기도 하는 함수입니다. // .delay()함수 사용방법 .delay( [중지할 시간] , [ queueName ] ) //p 태그의 엘리먼트가 5초후..
프로그래밍/Javascript 2021. 9. 27. 18:08

[Javascript] 자바스크립트(JS) attr()과 prop() 차이점

자바스크립트(Javascript)의 attr()과 prop() 차이점 자바스크립트(Javascript)에서 선택자를 통하여 선택한 엘리먼트를 append 하여 새롭게 생성하는 엘리먼트에 속성을 지정할 때 많이 사용하는 attr() 함수와 prop() 함수가 있습니다. attr()과 prop() 함수의 차이점은 무엇이 있을까 알아보도록 하겠습니다. jQuery(제이쿼리) 1.6 버전 이전에는 attr() 함수와 prop() 함수의 차이는 없었지만 1.6 버전 이후에는 구분되어 있습니다. attr() 함수는 엘리먼트가 가지고 있는 속성값이나 정보를 조회할 때 사용하는 함수이며, prop() 함수는 엘리먼트가 가지고 있는 상태를 제어할 때 사용하는 함수입니다. 폼의 속성 값을 확인하거나 변경할 때에는 prop..
프로그래밍/Javascript 2021. 9. 15. 16:23

[jQuery] 현재 요소 및 이전 선택 요소도 함께 선택하기 - .addback() 함수

자바스크립트의 제이쿼리(jQuery)를 사용하여 현재 선택한 요소와 함께 이전에 선택한 요소도 함께 선택하는 함수입니다. .addBack() 메소드는 현재 선택된 요소의 이전 요소를 한번 더 찾아주는 필터링 역할의 함수입니다. jquery(제이쿼리)의 .addback() 함수 jQuery(제이쿼리)의 .addback() 함수는 현재 선택한 요소와 이전 요소를 함께 동시에 효과를 나타내는 함수입니다. //함수 사용방법 $([선택자]).addBack(); $([선택자]).addBack([선택자]); //ul의 하위 태그중에서 li를 선택하고 처음에 선택했던 ul 태그도 함께 선택하기 $("ul").find("li").addBack();
프로그래밍/Javascript 2021. 9. 13. 18:35

[Javascript] 유니코드로 인코딩하는 함수 - escape() 함수

자바스크립트(Javascript)의 escape() 함수 자바스크립트(Javascript)의 escape() 함수는 알파벳과 숫자 및 특수문자(*,@,-,_,+,.,/)를 제외한 문자를 모두 16진수로 인코딩하는 함수입니다. escape() 함수는 쉼표와 세미콜론 같은 문자가 쿠키 문자열과의 충돌을 피하기 위하여 사용됩니다. 숫자를 escape() 함수를 사용하여 인코딩하게 되면 문자 타입으로 변환하여 반환됩니다. 아스키 문자가 아니라면 escape() 함수를 통하여 모두 유니코드 형식으로 인코딩 되어 반환됩니다. 그 인코딩 되어 변환된 문자는 16진수 형식으로 표시되며 1바이트 문자는 %XX 형태로 변환되며, 2바이트 문자는 %uXXXX 형태로 변환됩니다. 이러한 처리를 이스케이핑(escaping)이라..
프로그래밍/Javascript 2021. 9. 8. 15:20

[발매예정] CLOT x sacai x Nike LDV Waffle - “Orange Blaze”

나이키 LD와플 x sacai x CLOT - “Orange Blaze” CLOT x sacai x Nike LDV Waffle CLOT x sacai x Nike LDV Waffle CLOT Release Date: September 9th, 2021 SNKRS Release Date: September 14th, 2021 Style Code: DH1347-100 Color: Net/Orange Blaze/Deep Red/Green Bean Price: $170 https://www.nike.com/kr/launch/t/men/fw/nike-sportswear/DH1347-100/lvbh14/nike-ldwaffle-s-c 나이키 LD와플 x sacai x CLOT 나이키 LD와플 x sacai x C..
패션*취미/Sneaker 2021. 9. 3. 16:27

[발매예정] Nike Dunk High “Villanova”

나이키 덩크 하이 - “Championship Navy” Nike Dunk High “Villanova” Nike Dunk High “Villanova” Kids Release Date: July 1st, 2021 Adults Release Date: September 3rd, 2021 Adult Style Code: DD1399-104 GS Style Code: DB2179-104 PS Style Code: DD2314-104 Color: White/Midnight Navy-Total Orange Price: $110, ￦129,000원 https://www.nike.com/kr/launch/t/men/fw/nike-sportswear/DD1399-104/pmft77/nike-dunk-hi-retro ..
패션*취미/Sneaker 2021. 9. 2. 17:40

[발매예정] Nike Dunk Low PRM “Cider”

나이키 덩크 로우 - “Cider” Nike Dunk Low PRM “Cider” Nike Dunk Low PRM “Cider” Release Date: August 2021 Style Code: DH0601-001 Color: Off Noir/Cider-Dark Chocolate-Wild Berry Price: $110, ￦129,000원 https://www.nike.com/kr/launch/t/men/fw/nike-sportswear/DH0601-001/nxtg34/nike-dunk-low-retro-prm 나이키 덩크 로우 레트로 프리미엄 나이키 덩크 로우 레트로 프리미엄 - SNKRS www.nike.com
패션*취미/Sneaker 2021. 9. 1. 21:05

[Javascript] 디버그 확인용으로 자주사용하는 함수 - console() 함수

자바스크립트(Javascript)의 console() 함수 자바스크립트(Javascript)의 console 함수는 대부분 디버그 확인용으로 많이 사용하게 되는 함수입니다. 대표적으로 console.log가 있습니다. console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있도록 제공하는 함수로써 동작의 방식은 브라우저마다 다르고, 표준으로 여겨지는 기능도 여러 가지가 있습니다. // console() 함수 종류 console.log(); console.info(); console.warn(); console.error(); console.dir(); //코드 호출 count를 확인할때 사용하는 console 함수 console.count(); //코드 수행시간을 확인할때 사용하는 console 함수 ..
프로그래밍/Javascript 2021. 8. 31. 16:08

[발매예정] Nike Dunk Low “Georgetown”

나이키 덩크 로우 - “Championship Grey” Nike Dunk Low “Georgetown” Nike Dunk Low “Georgetown” Release Date: September 2nd, 2021 Style Code: DD1391-003 [AD] Style Code: CW1590-004 [GS] Style Code: CW1589-004 [PS] Style Code: CW1588-004 [TD] Price: $100/, ￦119,000원 https://www.nike.com/kr/launch/t/men/fw/nike-sportswear/DD1391-003/iljl65/nike-dunk-low-retro
패션*취미/Sneaker 2021. 8. 30. 18:19

[Javascript] 유니코드를 문자열로 반환하기 - fromCharCode () 함수

자바스크립트(Javascript)의 fromCharCode() 함수 자바스크립트(Javascript)의 fromCharCode() 함수는 지정된 유니 코드 값을 받아서 문자열로 반환하는 함수입니다. 문자열, 지정된 별도의 숫자 유니코드 인코딩으로 문자열의 각 문자의 정적인 방법입니다. UTF-16 유니코드의 시퀀스로부터 값을 받아야 하며 문자열을 생성하여 반환하는 함수입니다. // fromCharCode() 함수 사용방법 String.fromCharCode(n1, n2, ..., nX) let test1 = String.fromCharCode(9733); let test2 = String.fromCharCode(104,101,108,108,111); let test3 = String.fromCharCod..
프로그래밍/Javascript 2021. 8. 26. 15:03
◀ 1 2 3 4 ··· 39 ▶

티스토리툴바