CODE CAVE

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

[웹 보안] 출력 인코딩을 통한 XSS 방지 지난 포스팅에서 XSS 공격을 하는 아주 기본적인 체험에 대해 다뤘었습니다. [웹해킹] XSS - 5분만에 체험 해보기 웹 해킹 기법중 하나인 'XSS', 5분만에 체험 해보기 안녕하세요! 오늘은 웹해킹의 대표적인 주제 중 하나인 'XSS'에 대해 함께 알아보도록 하겠습니다. XSS가 무엇인지, 그리고 어떻게 작동하는지 초 kkotkkio.tistory.com 오늘은 반대로 이러한 'XSS' 공격을 방지하는 방법 중 하나인 '출력 인코딩'에 대해 알아보겠습니다. 출력 인코딩은 사용자의 입력을 안전하게 화면에 출력하는 방법으로, XSS 공격을 효과적으로 방지할 수 있습니다. 출력 인코딩이란? 출력 인코딩은 사용자로부터 받은 입력을 그대로 화면에 출력하기 전에 특..

웹 해킹 기법중 하나인 'XSS', 5분만에 체험 해보기 안녕하세요! 오늘은 웹해킹의 대표적인 주제 중 하나인 'XSS'에 대해 함께 알아보도록 하겠습니다. XSS가 무엇인지, 그리고 어떻게 작동하는지 초등학생도 이해할 수 있도록 간단하게 설명해 드리겠습니다. XSS란 무엇인가요? 웹사이트에서 댓글이나 글을 작성할 때, 단순한 텍스트 외에 특별한 코드를 삽입하여 다른 사용자들의 컴퓨터에 원치 않는 동작을 일으키는 기법이 있습니다. 이를 'XSS'라고 합니다. 이 기법은 웹의 보안 취약점을 이용한 것인데, 오늘은 이 기법이 어떻게 작동하는지 간단하게 체험해보도록 하겠습니다. XSS 체험해보기 아래의 코드를 복사해 주세요. 이 코드를 테스트 환경의 웹사이트 댓글이나 글 작성 부분에 붙여넣어 보세요. (주의:..

웹 기반 개발이 메인인 저는 인텔리제이나 웹스톰을 거의 5년이상 사용하다가, 이번년도에 처음 VSCode를 사용해봤습니다. VSCode로 변경한 가장 큰 이유는 인텔리제이는 기능이 점점 많아져서 계속 무거운 느낌이 들어서 입니다. 근데 기능이 많아져도.. 제가 쓰는 기능은 어차피 거기서 거기라.. 주변 개발자 지인들 통해 새로운 에디터를 추천 받았고 요새 정말 많은 분들이 사용하는 VSCode를 사용하게 되었습니다. 인텔리제이와 비슷한 단축키도 많았지만, 어떤 단축키는 새로 적응해야해서 조금 헷갈리더라구요. 스스로 리마인드 겸, 기본적인 단축키와 유용한 단축키 몇개를 정리해봤습니다. [ VSCode 단축키 ] * 아래 "Ctrl"은 윈도우에선 그대로 컨트롤 키 이고, 맥에서는 "Command" 키로 보면..

"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..