분류 전체보기 (399) 썸네일형 리스트형 [HTML] SVG 가 SVG 로 불리는 이유와 렌더링 순서(작성중인 문서) 보호되어 있는 글입니다. 사용자가 비속어를 사용한다면, 그것을 어떻게 필터링할까요?(with NodeJS & GPT) 오늘의 명언 비속어 필터링이 없는 사이트 제가 개인 프로젝트인 명언 웹 사이트를 만들고 배포까지 했지만, 그리고 트래픽도 없지만, 이 부분은 꼭 필요하다고 방금 떠오른 부분이 있습니다. 그건 바로 비속어 필터링인데요. 사실 사이트 배포 후 운영을 생각하기 전에는 이 사실을 깊이 있게 고려하지 않았을 것 같은데, 실제 배포하고 운영한다고 가정하니까 여러 문제들이 사이트 내에 잔재하고 있다는 사실을 깨달아가고 있습니다. 그래서 이 문제를 해결하기 위해 추가적인 기능이 필요한 상황이라 이 부분을 추가하는 시간을 가져볼까 합니다. 필터링 하는 방법은 뭐가 있을까요? 나름 생각해본 방법들에는 정규표현식을 이용한 방법, 일반적인 배열에 키워드를 담아서 일치하는 여부에 따라 처리하는 방법이 있었고, 좀 비용이 들더라.. 프리티어 인데 왜 cloudWatch 에서 비용이 크게 나왔냐 했더니 ;; 쓴 것도 없는 것 같은데..EC2 에 프로젝트를 배포한 뒤에 cloudWatch 에서 며칠 되지도 않았는데도 비용이 크게 나오는 일이 생겼습니다. 프리티어 한도 내에서 얼마나 많은 로그를 수집한다고 혹시 오류가 아닐까 생각을 했지만.. 그건 아니었고 무료로 사용 가능한 모니터 리소스 한도를 초과해서 생긴 비용 증가였습니다. 아래 보시면 112 개의 리소스에 대한 모니터가 이루어지고 있다고 나와있죠? 지금 이 4월 6일 인데 4월 1일 부터 약 5일 동안 발생한 비용입니다.. 이게 한 달이 되었다면, 그 비용은 생각보다 크게 다가왔겠지요. "프리티어로 무료로 제공해주는 건 맞는데, 초과분은 내야지 안 그래?"이 부분에 대해서 더 알기 위해 자세하게 찾아보니 인터넷 모니터의 경우에는 초기 100개 까지만 .. gsap flip 을 이용한 인터렉티브 카드 스위칭 GSAP 에는 뒤짚는 녀석이 있습니다. GSAP 를 공부하면서 아주 아주 흥미로운 친구를 발견했습니다. 바로 Flip 이라는 친구인데요. 이 친구가 왜 흥미롭냐면 이름 그대로 판을 뒤짚기 때문입니다. 해당 기능은 사용해보지 않으면 알수가 없기에 오늘은 해당 녀석을 가지고 재밌는 기능을 하나 구현해볼까 합니다. 아마 해당 기능은 GSAP 를 자주 사용하셨다면, 튜토리얼 영상에서 한 번 보셨을 수도 있습니다. 모르셨다면, 이번에 알고 가셔서 보다 재밌는 인터렉티브한 웹 사이트를 만드는데 활용해보시면 좋을 것 같습니다. 보면 알기에 굳이 어떤 기능이다 설명하지 않겠습니다. 직접 따라해보시면서 느껴보시길 바랍니다. 우선 준비물을 챙겨오세요. 이 친구는 당연히 GSAP 이라는 라이브러리의 가족이므로 이들을 대여해.. [자료 구조] 여기 까지 구현해본 단일 연결 리스트의 장점과 단점에 대한 생각 단일 연결 리스트를 구현해보면서 느낀 장점과 단점 배열과 비교했을 때는 이런게 장점인 것 같다. 일단 본인이 판단하기로 단일 연결 리스트의 장점은 배열과 달리 연속적인 메모리 공간 할당을 필요로 하지 않기 때문에, 메모리 관리 측면에서 매우 효율적이라는 생각이 들었다. 또한, 노드의 추가 및 삭제, 검색, 조회 등에 있어서도 일반적인 배열에 비해서, 참조관계를 바탕으로 노드를 순회하며 찾아가면 되기 때문에, 비번한 삽입 및 삭제가 반복되는 상황에서는 배열 보다 더 활용하기 좋아보였다. 자바스크립트에서 기본적으로 사용되는 arr =[ ] 의 경우에는 배열의 앞 부분에 요소를 추가하게 되면, 각 요소들이 메모리 공간을 연속적으로 할당받아 사용하므로 기존의 요소들이 새요소로 인해서 한 자리씩 뒤로 밀리게 되는.. [자료구조] 단일 연결 리스트에서 특정 노드를 제거하는 함수를 구현해보자 이전 시간까지 단일 연결 리스트에서 노드를 찾아서 조회하는 기능을 구현하였는데, 이번에는 타겟이 되는 노드를 검색해서 삭제하는 기능을 구현해볼 것이다. 단일 연결리스트에서 특정 노드를 삭제하려면 단일 연결리스트에서 특정 노드를 삭제하려면 우선적으로 연결 리스트 전체를 순회해야 한다. 왜냐 하면, 단일 연결리스트의 참조는 단방향이기 때문에 전체 노드를 순회해야 타겟 노드를 찾을 수 있기 때문이다. 또한, 타겟이 되는 노드를 제거하기만 하면 되는 것은 아니며, 타겟 노드를 이전 노드가 가리키는 다음 노드의 참조를 타겟 노드의 다음 노드에 해당하는 노드로 변경해주어야 한다. 예를 들어 5 -> 3 -> 1 이라는 연결리스트가 있다고 가정할 때, 2 라는 노드를 제거한다면 5 -> null -> 1 와 같은 형.. [성능최적화 모음집] 웹 성능을 최적화하기 위한 방법을 정리해서 모아둡니다. 이 포스트는.. 해당 포스트는 제가 웹 개발 시 참고하기 위한 웹 성능 최적화 기법을 모아두는 아카이브로서 역할을 합니다. 한글 문서 등에 별도로 정리해두었던 내용들을 하나 씩 블로그에 옮기고 있습니다. 추가되는 내용이 있을 때 마다 최신 날짜를 기준으로 포스트가 갱신됩니다. [이미지 최적화] 이미지 지연로딩을 통해 CPU 가 열일 하는 걸 줄여주자 보통 이미지 지연로딩을 사용하지 않고, 대량의 이미지를 로드하는 페이지를 렌더링하면, 무수히 많은 이미지를 렌더링 하기 위해 CPU 는 엄청난 과부하를 경험하게 됩니다. 브라우저의 경우에는 싱글 스레드로 동작하기 때문에 CPU 가 이미지 렌더링에 많은 시간을 소요하게 되면, 사용자 입장에서는 렉이 심하게 걸려서 마우스 조작도 힘든 버벅이는 화면을 오랫동안 볼.. [모음집] 유용한 CSS 속성을 모아두는 아카이브 이 포스트는.. 해당 포스트는 제가 판단하기로 유용한 기능이나 개념이라 생각되는 부분이 있으면 모아두는 저장소 용도의 포스트 입니다. 각 챕터의 순서는 정해져 있지 않는 각각의 독립된 콘텐츠로 생각하고 참고하시면 좋을 것 같습니다. 내용은 최대한 짧게 필요한 핵심만 정리하는 것을 원칙으로 하고, 매번 업데이트가 될 때 마다 최근 날짜를 기준으로 리스트가 갱신됩니다. 오늘의 명언 inset 속성 보통 저희는 position 속성에서 절대적 위치를 나타내는 absolute 나 고정된 절대값을 가지는 fixed 를 이동시킬 때 left, right, top, bottom 속성을 따로 지정하여 위치를 변경합니다. 그런데, 이 모든 속성의 축약형이 존재하는데 inset 속성이 그렇습니다. inset: 10px; .. 이전 1 ··· 13 14 15 16 17 18 19 ··· 50 다음
