김 양의 멋따라 개발따기

1. 문제상황 javascript 로 클론코딩을 하던 중 jquery의 slideup, slidedown이 등장함 css animaion과는 조금 다른 이벤트라 정확하게 클론하고 싶었음. 2. 문제 해결(코드) //HTML 토글 이 내용을 숨기거나 보이게 할 것입니다. //CSS .target { overflow: hidden; transition: height 0.3s ease; /* 애니메이션 효과를 부드럽게 만듭니다. */ } //Javascript const toggleButton = document.getElementById('toggleButton'); const targetElement = document.getElementById('targetElement'); let isHidden = ..

1. 문제 상황 배경 음악을 재생한 후 다른 페이지를 가도 음악이 계속 재생하고 있는 상황 2. 문제 해결 함수형 컴포넌트의 생애주기를 관리할 수 있는 훅인 useEffect의 return 문을 활용하고 addEventListener 로 만들어준 event를 return 문 안에서 removeEventListener를 사용해 줌 useEffect(() => { const audio = new Audio(playList); const timeUpdateHandler = () => { setCurrentTime(audio.currentTime); setRatio((audio.currentTime / audio.duration) * 100); if (audio.duration === audio.currentT..

1. html 코드 2. css 코드 /* Add slide animation class */ .slide-container { overflow: hidden; position: relative; width: 100%; height: 100%; } .img-container { position: relative; overflow: hidden; width: 300px; height: 200px; } .image { width: 100%; height: 100%; transition: transform 0.3s ease; /* transform 속성에 대한 0.3초의 부드러운 애니메이션 효과 추가 */ } 3. javascript 코드 function updateTransform(event) { if(zo..

//다운로드 받고 싶은 부분 Save

1. 입력 2. 출력 1) strip_tags() 모든 태그가 벗겨져 출력됨 2) htmlspecialchars_decode() 일부 미리 정의된 HTML 엔터티를 문자로 변환 3. 결론 태그 상관 없이 모두 벗겨서 출력 하고 싶을 땐 strip_tags()을 사용하는 것이 좋고 태그 안의 내용을 지키며 내용을 출력하고 싶을 땐 htmlspecialchars_decode()을 사용하자!

1. 결과물 2. 코드 .step_1 { background-color: #64a9cb; border-right: 3px solid #64a9cb; position: relative; padding-right: 4px; } .step_1 ::after{ content: ""; position: absolute; border-top: 22px solid transparent; border-right: 22px solid transparent; border-left: 22px solid #64a9cb; border-bottom: 22px solid transparent; left: 135px; top: 85px; } .step_2 { background-color: #4083a8; border-right: ..

1. 문제상황 html 파일을 pdf파일로 다운로드 받기를 구현 해야 했음 jspdf 라이브러리를 사용해 손쉽게 구현하고자 함 2. 문제 해결 //내보내기 할 코드 ## 주의사항 내보낼 태그에 background Img는 내보내기가 안 됨 -> img 태그를 사용해야 함

1. 문제상황 첫 페이지 로딩 속도가 너무 느렸음 페이지에 클릭하면 열리는 모달 창이 많은 상태였음 2. 문제 해결 Nextjs의 dynamic import 사용 1. 지연 로딩의 장점 경로를 렌더링하는 데 필요한 JavaScript의 양을 줄임으로써 애플리케이션의 초기 로딩 성능을 개선하는 데 도움 2. next에서 지연 로딩을 시키는 두 가지 방법 1. Dynamic imports, next/dynamic 사용 2. React.lazy() , Suspense 사용 여기서 첫번째인 next/dynamic을 사용하기로 결심했다. //hello.jsx export function Hello() { return Hello!; } // pages/index.js import dynamic from 'next/..

1. git HEAD란? git에서 HEAD는 현재 체크아웃된(현재 작업중인) 커밋을 가르킴 HEAD는 항상 작업트리의 가장 최근 커밋을 가르킴 작업트리에 변화를 주는 명령어들은 대부분 HEAD를 변경하는 것으로 시작됨 2. HEAD 분리하기 HEAD를 브랜치 대신 커밋에 붙이는 것을 의미함 git checkout [커밋명]으로 가능 커밋명을 찾기 어렵거나 귀찮을 경우 한 번에 한 커밋 위로 움직이는 경우 : ^ 한번에 여러 커밋 위로 움직이는 경우 : - 출처 : https://learngitbranching.js.org/?locale=ko

1. 블록체인(blockchain)이란? 핵심은 개인간의 거래/중개자가 없음(탈중앙화) 관리 대상 데이터를 '블록'이라고 하는 소규모 데이터들이 P2P 방식을 기반으로 생성된 체인 형태 분산 데이터 저장 환경에 저장되어 누구도 임의로 수정할 수 없고, 누구나 데이터를 열람할 수 있는 분산 컴퓨팅 기술 기반의 데이터 위조 변조 방지 기술 분산 데이터 저장 기술의 한 형태, 지속적으로 변경되는 데이터를 모든 참여 노드에 기록한 데이토로서, 분산 노드의 운영자에 의한 임의 조작이 분가능하도록 고안됨 가장 널리 알려진 응용 사례는 암호화폐가 있으며, 거래 과정을 기록하고 탈중앙화된 전자장부로서 비트코인이 있음 읽기만 가능하고 수정/삭제가 안 되므로 신뢰성을 높임 실시간 저장이 어려움 2. 블록체인 아키텍처의 핵..