정보덕

웹 개발을 하다 보면 URL을 직접 조작해야 하는 경우가 자주 생긴다.API 요청을 만들거나, 파라미터를 추가하거나, 특정 경로만 추출해야 할 때가 그렇다.파이썬에서는 이런 작업을 표준 라이브러리인 urllib.parse를 이용해 비교적 쉽게 처리할 수 있다.이 글에서는 urllib.parse의 주요 기능을 중심으로, URL을 분해하고 수정하고 다시 조합하는 과정을 단계별로 살펴본다. urllib.parse란?urllib.parse는 URL 문자열을 구성 요소별로 분리하거나, 반대로 다시 합치는 기능을 제공한다.별도의 외부 라이브러리 없이 표준 라이브러리만으로 URL 파싱, 인코딩, 쿼리 조작을 모두 처리할 수 있다. Python 2의 urlparse 모듈이 Python 3에서 urllib.parse로 ..

혹시 이런 경험 있지 않으신가요?.. 구글에서 제공하는 Apps Script 를 사용하면 이렇게 하나하나 폰트를 변경할 필요 없이 일괄적으로 폰트를 변경할 수 있습니다. 아래 처럼 [확장 프로그램] → [Apps Script] 클릭 해서 접속해주세요. 들어가시면 아래 스크립트를 입력할 수 있는 화면이 뜨면 됩니다. 모든 폰트를 변경하는 자바스크립트 코드이제 모든 폰트를 변경하는 자바스크립트 코드를 입력해줍시다. function changeFontInAllSlides() { const NEW_FONT = "Roboto"; // 변경할 글꼴 const slides = SlidesApp.getActivePresentation().getSlides(); slides.forEach(slide => { ..

반갑습니다. 아주 오랜만에 찾아 뵙게 되었습니다. 오늘은 순수 JavaScript와 CSS만으로 마우스를 따라다니는 연기(smoke) 효과를 만들어보는 방법을 소개해드리겠습니다. 마우스를 움직이면 흩날리는 연기처럼 보이는 원들이 생성되고, 자연스럽게 사라지는 애니메이션 효과가 적용됩니다.아주 간단한 코드지만 시각적으로 꽤 멋진 효과를 줄 수 있어요! 최종 결과 미리 보기마우스를 움직이면 연기 같은 둥근 원이 생기고 서서히 커지면서 위로 날아가듯 사라지는 효과가 구현됩니다. HTML 구조먼저 HTML은 아주 간단합니다.애니메이션 원들이 추가될 컨테이너 역할의 하나만 있으면 됩니다. CSS 스타일링연기 효과의 핵심은 CSS 애니메이션입니다. circle 클래스에 원형 모양을 주고, 커지면서 투명해지는 ..

참고사항- 태극기 양은 (#d13642) 을 사용해야 하며, 음은 (#080884) 을 사용해야 합니다. 과정에는 음의 색상만 정확히 사용하고, 양의 색상은 임시 색상인 red 를 사용하고 있는데, 결과물에서는 정상적인 색상으로 설정되어 있습니다. 들어가는 말오늘 만들어볼 작품은 태극기 입니다. 1945년 8월 15 일 일본 제국의 패망으로 식민지로 벗어나 현재 대한민국은 눈부신 성장을 거쳐 지금과 같은 강국이 되었습니다. 오늘은 이 날을 맞이하여 나름의 광복절을 기념하며, 애국하는 마음으로 CSS 를 사용해 태극기를 만들어 보았습니다.      아래는 시연 영상입니다. 참고로 자바스크립트 부분은 설명하지 않았습니다. 만들고 정리하다보니 시간이 많이 지체되어서 생략하였습니다. 어려운 코드는 아니니 최하단..

애니메이션 소개문득 바탕화면의 마우스를 드래그 하면서 저 드래그 애니메이션은 어떻게 동작하는 거지? 라는 궁금증이 생겼습니다. 그래서 동작과정을 하나하나 살펴보고, 직관적이게도 위치좌표 사이의 거리에 따라 크기가 변경되는 것을 알 수 있었습니다. 단순한 애니메이션이었지만, 실제 구현을 할 때는 크기의 반전과 같은 생각지 못한 부분에서 예상과 다른 문제가 있었는데요. 이번 포스트는 그렇게 완성된 간단한 애니메이션인 바탕화면 마우스 드래그 애니메이션에 대해서 정리해보는 시간을 가져볼까 합니다. 아래는 시작전에 참고하시라고 준비된 완성된 코드 예시입니다.   See the Pen 바탕화면 마우스 드래그 애니메이션 by youngwan2 (@youngwan2) on CodePen.">See the Pen..

Next.js 프로젝트를 생성한 후 Prisma와 Supabase를 설정하여 연동하는 과정을 진행합니다. 각 패키지가 무엇인지 알고 있다고 가정하고 바로 설정하는 단계 설명으로 갑니다. Next.js 프로젝트 생성Nextjs 를 설치해줍니다. 현재 설명하는 버전은 15버전 입니다. 13버전 이상이라면 크게 상관없습니다.npx create-next-app@latest [프로젝트 이름]  Prisma 설정하기Prisma 에 대한 기본 설정 입니다. 자세한 설명 보다는 필요한 부분만 언급하고 넘어갑니다.Prisma 설치npm install prisma --save-dev npm install @prisma/client Prisma 초기화npx prisma init 이 명령어를 실행하면 schema.prisma..

발생 에러vite.config.ts 파일 내에서 vitest 설정 시 test 속성이 UserConfigExport  형식에 존재하지 않아서 타입에러가 발생하는 것을 확인 하였습니다. 해결방법이는 기본적인 vite.config.ts 파일에서 선언된 타입이 vitest 설정의 타입과 불일치하여 생기는 문제이므로, vite.config.ts 파일 상단에 ///   를 추가 해줍니다./// export default defineConfig({ plugins: [react()], test: { globals: true, environment: 'jsdom', setupFiles: ['./setup.js'], },}) 결과더 이상 타입 에러가 발생하지 않는 것을 확인하였습니다. 사실 http..

들어가는 말오늘은 질문과 응답 방식을 활용한 학습법에 대해 이야기해볼까 합니다. 이 방법은 특히 새로운 개념을 배우거나 복잡한 내용을 이해할 때 아주 유용합니다. 저는 이 방식으로 처음 보는 개념을 이해하고 실제 상대에게 설명하기 까지 며칠 걸리지 않을 정도로 빠른 습득력을 얻을 수 있었기에, 이에 대한 방법을 공유해볼까 합니다1. 질문하기먼저, 자신이 이해하고 싶은 주제에 대해 질문을 만들어봅니다. 예를 들어, 저의 경우 도커에 대해 학습을 시도하기 위해 "도커는 무엇인가?"라는 큰 틀을 만들었습니다. 다만, 해당 질문 이전에 해당 지식에 대한 별도의 개별학습을 진행하는게 중요합니다. 해당 방식은 공부한 내용을 실제 이해하고 있는가를 테스트하고, 부족한 부분을 보완해서 빠른 시간 내에 남들에게 쉽게 설..

해당 포스트는- 해당 포스트는 적재적소에 활용할 수 있는 링크를 저장하는 용도의 역할을 합니다. - 해당 포스트는 내용이 많이 추가되거나, 게시글을 최상단으로 끌어올릴 필요성이 있을 때는 최신 날짜를 기준으로 갱신됩니다. 기타 링크🔗https://developer.chrome.com/docs/devtools/network?hl=ko(브라우저 네트워크 도구 활용 가이드)개인 포스트 링크📕자료구조와 알고리즘 위키📕백엔드 위키 📕디자인 위키📕프론트엔드 개념 저장소

들어가는 말오늘은 반응형 레이아웃의 기본이 되는 중단점에 대해 알아보고, 실제 styled-components 에 적용하는 방법과 사용 팁에 대해 정리해볼까 합니다.중단점이란 뭘까요?CSS에서 중단점(breakpoints)은 반응형 웹 디자인에서 화면의 크기에 따라 스타일을 변경할 수 있게 하는 기준점을 말합니다. 다양한 화면 크기(모바일, 태블릿, 데스크탑)에 맞는 스타일을 적용하기 위해 사용됩니다. 최근에는 중단점을 모바일 우선으로 두고, 스타일을 적용하고 있다는데 이를 어떻게 적용하고 있는지 향후 예시를 통해 알아볼 것입니다. 중단점 사용 방법중단점은 주로 미디어 쿼리(media queries)를 통해 정의합니다. 특정 화면 너비 조건에 따라 스타일을 적용할 수 있도록 하는 것이 미디어 쿼리입니다...