CODE CAVE

React에서 가장 많이 쓰이는 기능 중 하나이죠. React에서는 "hooks"라는 개념을 도입하여 함수 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 했습니다. 이 중에서도 useState는 가장 기본적이고 중요한 훅 중 하나입니다. useState Hook의 기본 개념 useState는 React 함수 컴포넌트에서 상태를 추가할 수 있게 해줍니다. 이는 클래스 컴포넌트의 this.state와 this.setState에 대응되는 기능을 제공합니다. useState는 두 개의 값, 즉 현재 상태 값과 해당 상태를 업데이트하는 함수를 반환합니다. 이제 useState의 기본 구조와 작동 방식에 대해 알아봅시다. const [state, setState] = useState(initialSt..

"100,000,000" 처럼 숫자 3자리 마다 숫자를 넣는 방법에 대한 포스팅 입니다. 특히 돈 이나 숫자를 많이 나타내는 웹사이트를 개발할 때 필요한 경우가 많더라구요. 1. toLocalString()을 이용하는 방법 저는 이 방법을 주로 씁니다. 가장 간편하더라구요. let order_price = 100000000; order_price.toLocaleString("ko-KR"); 파라미터로 넘기는 "KR"이 있는 이유는 숫자를 또 다르게 표시하는 국가도 있나봅니다. 매우 특수 케이스라, 왠만한 평범한 프로젝트는 ko-KR이나 en-US을 사용하시면 될것 같습니다. 혹, 이 함수에 대해 자세히 알고 사용하고 싶으신 분들은 아래 링크 참고가 가능합니다 :) https://developer.mozi..

웹 프론트엔드 작업을 하다보면 스와이퍼를 구현해야할 일이 많습니다.이 중 가장 많이 쓰이는 Swiper 라이브러리 사용법을 간단히 소개드립니다. Swiper 라이브러리에는 다양한 속성들이 있는데 자주 쓰이는 속성들만 모아보았습니다. new Swiper('.container', { pagination: '.swiper-pagination', paginationClickable: true, spaceBetween:0, autoplay: 3000, autoplayDisableOnInteraction: false, loop: true, onSlideChangeEnd: function (swiper) { var swiper.activeIndex; var slidesLen = swiper.slides.length;..

CSS가 발전함에 따라 이제 포토샵으로 해야만 했던 작업들이 코딩으로 가능해지고 있습니다. 이번 포스팅은 그 중 이미지 혼합 기능인 blend-mode 에 대한 실험입니다. 색상과 이미지를 혼합하는 기능을 어디서 쓸까 생각하다가 운영중인 쇼핑몰에서 색상과 재질을 선택해서 미리 볼 수 있는 Custom Option 기능을 만드는데 활용했습니다. [재질과 색상의 혼합] - http://www.trymoon.kr - NO BRAND BUT GOOD SENSE 위 화면은 신발 쇼핑몰에서 혼합 모드를 응용하여 개발한 것입니다.정의해놓은 재질을 선택하고, 색상을 선택하면 재질 이미지와 색상을 혼합하여 결과를 아래 보여주는 방식입니다. 위 화면을 개발하기전, 제가 블랜드 모드 관련 샘플로 만들어놓은 화면입니다. 위 ..

트렌디적인 리스트 디자인 혹은 UI를 꼽자면 핀터레스트를 뺄 수 없습니다.한국 서비스로는 피키캐스트가 유명하죠! 아마 리스트에서 각각의 목록이 이미지가 중요한 리스트라면 단순한 2,3단 배열보다 훨씬 볼만합니다. 백번의 말보다 한번의 예제! 샘플 만들어봤어요.아래 이미지 처럼 리스트 카드가 겹쳐서(?) 나오는 형식의 디자인 입니다. 이런 리스트는 자바스크립트로도 개발할 수 있고 CSS로도 개발할 수 있는데요. 저는 CSS로 할 수 있는 거면 CSS단에서 끝내자는 주의라서 CSS로 구현해보았습니다! 소스코드는 제 깃허브에 올렸습니다. github : https://github.com/kkotkkio/pinterest-list 원본 출처 : https://opentutorials.org/course/2473..

멋있는 Front-end 템플릿을 찾았습니다. 어떤 사이트든 서비스를 하는 사이트라면 관리자페이지는 필수로 가지고 계실 거라 생각이 드는데요. 저희 쇼핑몰 사이트는 독립몰이라서 관리자페이지도 직접 하드코딩 해야하는데 기존 관리자페이지가 디자인부터 기능까지 너무 허술해서 최근에 싹 개편하는 걸 목표로 잡았습니다. 하지만 디자인 부터 다시 다 하려니 막막하더라구요.포토샵으로 디자인 하고, 몇번 수정하고, 퍼블리싱하고, 스크립트 짜고,에러 잡고, 백엔드 고려하고,CSS도 LESS로 하고 싶어서 또 욕심내게되고,소스가 커지다보니 모듈화하고 싶고, 모듈화 하고나니 또 다른 욕심이 끊임 없이 닥쳐 옵니다.. 결국 개발기간은 2배로 뛰어 10일로 잡았다면 20일이 되겠지요.. (저만 그런가요? ㅎㅎ) 이걸 한번에 해..

세번째 자리 콤마 넣는 함수 comma(num)//세번째 자리 콤마 function comma(num){ var len, point, str; num = num + ""; point = num.length % 3 ; len = num.length; str = num.substring(0, point); while (point < len) { if (str != "") str += ","; str += num.substring(point, point + 3); point += 3; } return str; } num : number의 줄임말로 자바스크립트의 + 연산으로 "" 과 더하여 숫자를 문자열로 만듭니다. len : length의 줄임말, 파라미터로 넘긴 num의 길이를 저장합니다. point : n..

콤마 삭제 함수 rm_comma(number)//콤마 삭제 function rm_comma(num){ var number = num + ""; return number.replace(",",""); } 먼저 파라미터 이름이 num 이라서 숫자만 받아올 것 처럼 짜놓긴 했는데요~ 문자열을 넘기든 숫자를 넘기든 어차피 num + "" 을 해서 문자열로 만들기 때문에 상관은 없습니다. 파라미터를 문자열로 만들고 거기서 "," 를 ""(공백)으로 replace 해서 return 하는 것 입니다. -- 웹 사이트를 만들다보면 콤마를 삭제하는 경우가 종종 있는데요~ 이건 제 얘기입니다만.. 어디 회사에 새로 들어가게 되었는데 디비 설계가 잘못 되어있었습니다. Database 의 상품 테이블의 1 상품이 1 필드에 ..

안녕하세요~ 이번엔 jQuery의 요소 반복으로 매우 매우 자주 사용되는 each() 에 대해 알아보려 합니다~ 클라이언트 프로그래밍을 하다보면 자주 마주치게 되는데요. 요새 쇼핑몰에서 제품을 구매할 때 옵션을 선택하면 해당 옵션 별로 상품 카드(?)가 추가 되는 것이 일반적이죠.제가 써놓고도 뭔말인지 모르겠네요 ㅋㅋ 사진으로 보시죠![출처 : trymoon(트라이문)] 온라인 쇼핑몰에서 이런 화면 많이 보셨을겁니다. 상품 옵션을 고르면 해당 옵션의 상품이 카드형식으로 하나하나 추가되는 방식이죠. 이렇게 사용자의 입력에 따라 html 추가되는 건 append() 라는 메서드를 쓰시면 됩니다! 옵션 클릭 리스너에서 옵션 클릭을 감지하고 클릭한 요소에서 옵션(컬러,상품명 등)값 들을 가져와서 append로 ..

자바스크립트는 맨 처음 나오게 된 계기는 브라우저에 랜더링 된 정적인 HTML을 동적으로 제어할 수 있게 하기 위해 나왔습니다. HTML로만 작성한 정적인, 멈춰있는 사이트를 동적으로 만들어 주는 역할을 합니다. 예를 들어 HTML의 table 태그로 만들어진 어떤 시간표 테이블이 있다고 가정합니다. 또한 이 시간표의 색상을 바꾸는 "파란색으로 변경"이란 버튼이 있다고 합시다. 이제 처음 시간표 페이지를 브라우저에 띄웠을 때 시간표 색상이 초록색이 나왔습니다.이 초록색을 파란색 버튼으로 바꾸기 위해 "파란색으로 변경하기" 버튼을 누릅니다. 하지만 아무 반응이 없습니다. HTML은 그저 화면의 구조를 정하고 CSS는 이 HTML과 함께 레이아웃, 스타일을 지정할 뿐 뭔가 파란색으로 변해라! 하고 버튼을 눌..